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

Tables are meant and should be used for tabular data, and not for structure. Personally I see tables being used as an easy way out, and I have never ran into a situation that could not be solved with CSS.

Tables are definitely easier for vertical positioning and full height columns, but again this can be overcome with CSS.

Answer 2

Terrible looking ones?

Seriously, though. No.

A good example of people using tables is that they make it a lot easier to present form fields in a nice looking way but it completely messes with accessability and semantic meaning of pages. You can acheive the same and better with a little more effort in CSS.

Answer 3

You can do the same thing with CSS, but it isn't usually as elegant.

Tables are important to display tabular data (i.e., NOT LAYOUTS) . They are logical, semantic constructs and should be used as such. They contains concepts like columns and rows, that CSS alone does not.

Answer 4

save you time

Answer 5

I got one! There is something that seems to me impossible with css, but is possible with tables. I just asked a question on this yesterday and got an answer.

If you have two separate elements that you want on one line, regardless of width, you must use a table. That is, if the two elements are either inline or floated, if they are dynamically sized and become wider than the container, they will break to the next line rather than overflow. If you absolutely require that they stay on the same line even if the second one would overflow the container's width, then they need to be cells in a table row.

edit: a bit of testing shows this is only true with floats. If your elements are display inline or inline-something, then you can set white-space:nowrap on the container. However in this case it seems (in FF anyway) there's a mysterious space between the elements, which for my purposes yesterday, would have been a problem.

Answer 6

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 7

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.

Answer 8

What can tables do that CSS positioning cannot?
In theory, nothing, since you can use display: table;, display: table-cell; or other such values for display.

<ArgumentOnSemanticsUsabilityAndAcessibility />

Answer 9

Use them(Tables) in the markup and you don't have to break your head about positioning or about cross browser compatibility. Tables work almost the same way across browsers