What can tables do that CSS positioning cannot?

Question

I know there are various good arguments preferring CSS positioning over table-based layouts. What I'm wondering is whether the CSS model is complete (assuming a relatively modern browser) with respect to ALL of the capabilities of tables. Are there layouts that tables can achieve that are impossible or impractical with CSS?

Answer 1

CSS doesn't have a good way of handling data which is genuinely tabular. If your data is, itself, structured in rows and columns, then the table tag is still the best way of presenting it. While you can "fake it" in CSS, it results in complex, difficult to maintain code for no real reason.

Note that tabular data doesn't necessarily always mean just tables of numbers. Sometimes forms and other types of interactive content can be tabular as well, if their fields logically group themselves into columns and rows. The key point is to ask yourself, "would I think of my data as rows and columns if I wrote it out on a page and the computer had nothing to do with it?"

Answer 2

I would switch to css based layouts if I could. The sematic arguments are correct, but there are practical considerations. Tables will:

• absolutely prevent 'float wrap' where a div will fall to the next line because there isn't enough space for it
• give you same-height columns
• allow dynamic layouts where widths and heights are not known until run-time
• provide colspans and rowspans
• reduce the number of SO questions asking how to do stuff without tables :)

There are css display properties (table-cell, etc) which mimic some of this, but I don't believe the support is widespread enough to use them yet (unless you can control your user's browser selection).

The site I work on requires competely dynamic column widths in the layouts. Multiple customers use the same site templates, and I have no idea what they will put into the menu or page header or content cells. (And no idea what they will find attractive, which is another issue...) Using a single outer table to lay out the main sections of the site allows the flexibility I need without worrying that a slightly-too-wide menu will push the main content box down to the next row, or that background colors won't fill the required height.

In a perfect (to me) world, we would have <table>s for tabular data, and another, nearly identical set of tags for layouts - call it <layout> (along with corresponding row and cell tags). Or, add a 'mode' attribute to the <table> tag - the values would be 'data' and 'layout' so that screen readers and search engines would know what to do. Maybe in html 6...

Edit: I shoud add, regarding the 'float wrap' thing - there is a current question on SO with an answer that works pretty well here. It is not perfect, and too me it is too complicated, but it would resolve the problem in many cases.