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

you can even use them for layouting, if your layout is somewhat tabular. I like the feature of tables and cells dynamically adjusting to whatever width the browser window is. Never use any fixed widths or height, that's just messing up things.

Answer 2

Everyone so far has said how tables should only be used for tabular data, and this is true. Take a look at the HTML source of any page on SO and you'll see that they have a different idea...

I think their rationale is that sometimes using a table is just so much simpler. Though, there are a lot of really good usability reasons why to avoid them.

Answer 3

Other than for tabular data, tables are unfortunately still necessary if you want to create flexible grid layouts such as complex forms in a cross-browser compatible manner.

CSS2 has support for creating flexible grid layouts without using the table element via the display property, but this is not supported in IE6 or IE7.

However, for most basic form layouts, CSS should be sufficient.

Answer 4

I think you might be slightly confused. CSS is a method of styling HTML documents, whether this is a table element or a 'div'.

It used to be that tables were used in HTML to design the whole page layout. It was common to see multiple nested tables (usually generated by WYSIWYG programs such as Dreamweaver), and this lead to a maintainance nightmare.

Since the introduction and adoption of CSS stylesheets it is now correct only to use a table for tabular data. That means if your data is most naturally rendered as a table use the table element. You can still style the table using CSS.

However, and I generally disapprove of this method since it duplicates existing functionality, it is possible to use elements to build a table like structure. In fact there are several website that will generate such code for you, but I have no links to hand.

Remeber also that some users might be either viewing in text only mode, or using a screen reader both of which will probably break the page (like reading the columns vertically rather than horizontally) hence the proper use of tables.

HTH

Answer 5

If only the CSS equivalent was as expedient in setting up a "table-like" layout, then I would love to use CSS. I find the time that it takes to mimic the things that others have listed here (equal heights on cells, auto-growing rows, etc.) is simply not worth the effort. I don't get a return on my investment as opposed to quickly throwing together a table in most cases.

All browsers can agree on exactly how a table should be laid out. Bam. Done.

Here's how my CSS follies usually go: Try setting up a table-like layout in CSS. Spend 20 minutes or more getting everything just so in Mozilla and then open it up in IE. Spend another 30 minutes tweaking between those two browsers. Pretend like there are only two browsers in the world because I actually need to get some work done.

I believe in the promise of CSS: Separation of concerns. The problem is that for those who need to be productive, CSS is not ready for prime time. Or perhaps it's the rendering engines of the browsers - whichever.

Answer 6

Although for some layouts using tables may seem simpler at first, when maintenance time comes using css pays off. Especially if you ever want to change the position of something, or if you want to use the same layout in several places.

IMHO, tables should be used only when presenting tables. Never for layout purposes.