A remark on tables, DIV’s, and CSS

by Peter on January 19, 2010

On the internet, and in books and articles about Web Design, a large number of writers keep telling me about the vast advantages of CSS-based site layouts over site layouts based on tables. Personally, I use both kinds of designs, and I really do not see any great advantage of one over the other. And I am getting quite a bit fed up by a lot of the assertions of the pro-CSS-crowd.

One of the often repeated, and seemingly decisive arguments in the eyes of the die-hard proponents of CSS layouts, is that “tables are for display of data” (see, for instance, “Why tables for layout is stupid“, stating that “Tables existed in HTML for one reason: To display tabular data”). The fact that this and similar assertions are made a 1000 times do not make them any more true. And it really is just a silly argument. Who cares what tables “were made for”? The more important question is what they are useful for, and where they are easier to use and more efficient than other syntax?

Alternatively, one could twist the argument around, and ask: Were DIVs made for layout? And if they were not, does that mean we shouldn’t be using them?

The same article I referred to above (really only one of a thousand saying the same things, and just used here as a representative of a set of false truisms) also claims that CSS-designs (the numbering is mine, they provide a longer list):

  1. make your redesigns more efficient and less expensive
  2. help you maintain visual consistency throughout your sites
  3. get you better search engine results
  4. make your sites more accessible to all viewers and user agents

1. Make your redesigns more efficient and expensive? Than what? Than a table-based design with layers of nested tables and no CSS? There is nothing preventing anybody from just using <td> </td> as a container just like a DIV and styling it with CSS just like DIVs are styled? Or using a DIV wrapper around the table, and fill the table up inside with styled DIVs, just as in a DIV-based CSS design! So the argument is just vacuous in the sensee that it only applies to a constructed (and not even well specified straw man).

2. Help you maintain visual consistency throughout you site? Exactly the same argument applies – relative to what?

3. Get you better search engine results? What is this based on? Does the author assume that search bots are unable to see what is inside HTML like <table><tr>.. </tr></table> whereas they perfectly understand and see content inside <div> .. </div>? If that is the argument, then it is just plain false. And if it is that DIV-based layouts can load content first, then it is equally false, as I and many others have shown that you can load content first in a table-based layout as well! What is more, I have not seen any research indicating that table-based designs are better or worse than DIV-based ones from a search engine optimization point of view, providing sensible and semantic markup is being used. It would perhaps be better if such claims were not made by the proponents of the purist CSS approach unless the claims are backed up by solid facts or research.

4. Make your sites more accessible to all viewers and user agents? What does the author mean? On standard browsers tables are just as accessible. On cell phones and similar devices both table-based and DIV-based designs usually need alternative style sheets to be max accessible?

It would be nice if those of the almost religous sounding claims by proponents of the one true way of Web designs that have no sound logical or factual basis were left out of the debates. They are quite stupid and quite annoying.

Related Posts: