Should Tables be avoided in HTML at any cost?

Question

It is advisable to use tables in HTML pages (now that we have CSS)?

What are the applications of tables? What features/abilities does tables have that are not in CSS?

Answer 1

I think the reason this comes up so much is that using html tables is easier to understand when creating structure and layout than CSS. Using CSS is more abstract but helps seperate your code.

In response to the "structure" argument...by definition, isn't using html tables giving structure to data so that you identify it as "tabular". Whether it is CSS or html you are controlling the flow and layout of data. Be it tabular or otherwise...

If CSS tables are so important (and I'm sure my answer will start some kind of flame war) why isn't there a mechanism in Visual Studio to create a layout using CSS? Oh, you didn't check the layout feature thingy in VS? Yeah, you get tables, straight from Microsoft. I'm not complaining, just making the point that if it meant as much to the rest of the world you would see MS switch to CSS.

In my opinion do what fits best with your project. For one or two page web projects I still use html because what it does is obvious. Using CSS is more abstract and some mornings I just haven't had that much coffee. HTML tables can get messy, fast. CSS takes a little more time to get messy but will too.

Answer 2

I also don't like the idea of using tables to arrange items on a page. However this should not become a religion - tables are bad. I've encountered one example where I have a three column layout and needed the center column to grow with the content. In the end the solution that was the simplest and worked well on all needed browsers was to use a table. IMHO CSS still has some shortcomings and sometimes it's better to use something simple that works rather than just adhere blindly to some idea ('tables are bad...').

Answer 3

Scanning over these answers, I didn't see one real-world reason where tables are necessary for layout and that is html emails.

I work for a very, very large financial company and we track around 600 different jobs a month....many of which are multiple email campaigns.

You cannot use css for layout for any mail reader. There are a few inline css specs you can use that relate to color, font face and size and even line-height is fairly widely available but for layout, you have to use tables as all the major and most minor email readers (Outlook 97/03, Entourage, MSN etc) read them just fine.

The issues with tables come into play when you have td's that do not have height/width specified whether they contain data or not. So, 'broken' table layouts are usually fixed by paying attention to attributes and yes... whitespace in the html....yes whitespace that isn't supposed to matter.

So, if you ever work for a large company/corporation or you land a very large client, be ready to throw all the current technology out the door and get your html table hat on!

Answer 4

Tables are for outputting tabular data. Anything that you might display in a spreadsheet, columns of results, that kind of thing.

The suggestion of using CSS rather than tables is for columnar layouts, which weren't really actual tables. It was never intended to suggest that tables should be removed completely.

Answer 5

I guess I'm not in the majority here, but I still see a lot of use for tables in HTML. Of course, yes, for things like forms, you simply can't beat a table. Trying to line up the labels and accompanying form fields would certainly be possible using DIV's, but what a PITA that would be, and resizing the page would be ugly in some cases. A table works wonders here.

But also consider larger issues. For example, have you tried to create a standard 3 column layout with header and footer using only DIV's and CSS? Again, it is very possible, and there are about 1000 websites with examples, but they all tend to suffer from the same problems. The first problem is that the columns never really like to all become the same height without some sort of javascript assistance. The second problem is changing the layout is often a tricky thing, because it is a bit of a balacing act to get everything "just right" to begin with, so then you don't want to mess with it. Finally, and this goes back to that last point - it ain't easy. You have to lay out all your DIV's, then go back and create the magic CSS that force those DIV's into the proper position, and then spend a few hours tweaking it until it is right.... ugh. And then looking at the HTML without a viewer really gives you NO idea what the page looks like because it is ALL reinterpreted by the CSS in the end.

Now, option B. Use a table. Spend about 30 seconds typing out the <tr> and <td> tags, probably no CSS at all, no javascript 'fixit', and know EXACTLY what it will look like just by looking at the HTML.

Certainly there are arguments for and against tables, and purists seem to favor DIV's for layout, but don't use DIV's for religious reasons just because someone told you tables are evil. Use what works best for you, your page, and the way your viewers are going to interact with the page. If that's a table, then use it. If not, don't.

Answer 6

No - not at all. But use tables for tabular data. Just don't use them for general layouting.

But if you display tabular data, like results or maybe even a form, go ahead and use tables!