Wednesday 29 October 2003 — This is 21 years old. Be careful.
Here’s another CSS gripe that I don’t think we can do anything about. What the heck is wrong with tables as a concept? I understand why we want to separate content from layout. I can see that we don’t want to overload the poor <table> tag with both tabular data display and grid layout, because that’s poor semantics.
But everyone understands tables. Any designer out there can take any old layout grid, no matter how wild, and tell you how to create a table to display it. So why can’t CSS use those concepts for layout? Why did separating the layout from the content requiring using entirely new concepts to describe the layout? All the HTML authors understood how to write tables, and all the browsers understood how to display tables. Why did CSS leave tables behind?
CSS could have been designed to separate content from layout and at the same time, use table concepts to describe the layout. There’s no incompatibility between the two. Sure, tables wouldn’t do everything: you can’t do floated pull-quotes with tables. But they are great at page-level grid layouts. Why couldn’t CSS have kept those concepts?
Now we have all sorts of clever people outdoing each other to try to describe conceptually simple layouts in CSS. These people could be putting their energies to productive use, but instead are doing the web design equivalent of translating “The Cat in The Hat” into Sanskrit. To what end?
Why couldn’t CSS have let me describe the grid of the page with familiar <table>-like constructs? Doug Sauder asked these same questions, and proposed a <grid> tag. I’d do the same, but keep it separate from the content, to keep the main CSS goodness. Three-column layout with a 100 pixel left column, and the other two columns splitting the rest 70/30? With a header and two footers? No problem:
<grid>
<tr colspan='3'><td id='head1'/></tr>
<tr>
<td width='100px' id='left'/>
<td width='70%' id='center'/>
<td width='30%' id='right'/>
</tr>
<tr colspan='3'><td id='footer1'/></tr>
<tr colspan='3'><td id='footer2'/></tr>
</grid>
Even the hippest coolest proponents of modern web design admit that tables do some things better than CSS. Why did CSS throw the baby out with the bath water?
I know this seems like an angry rant, but I really want to know. Why are floated divs and the other CSS constructs better than tables as a layout mechanism?
Comments
When you use a "grid" for layout in your html, you can not change your layout via CSS.
Look at your example, say you "left" column contains a navigation list. How do you move your nav list to the right side using only CSS? You can't. How do you change your nav list from a vertical to horizontal list? you can't.
The point is that using the grid makes it much harder to maintain your site. The whole point of CSS is to make it so that you can style many pages with one CSS file. But when you use a grid you have to modify every page that has a grid in it.
That is why tables are frowned upon. Even with that said, many sites still use tables, and the table tag is still valid markup.
With CSS, the layout of objects can be relative to each other, which allows for *MUCH* more flexibility.
Zubin: I agree that CSS is great at treating objects separately. I disagree that all pages need that separation. Tons of designers are looking to produce layouts that naturally fit into table concepts, and they don't need to move everything independently. For the most part, they think very carefully about moving things around, and want to control where things go as a result of a change. I don't think designers mind that degree of control. After all, we're dragging them kicking and screaming from tables to CSS. Why not have CSS provide them with the language they want?
Both Tables and CSS are powerful tools, and it would be real nice if there were better [universal] support for CSS within Tables and table elements. Last time i checked MSIE ignores the "margin" attribute on TDs [and the "padding" attribute on IMG] see http://www.jujusoft.com/log/200210152327.html
[i was unaware of that "display:table" CSS stuff.... very interesting]
CSS layouts have fallen short of their intended goal.
Yes tables are currently better for layouts but mainly because browsers don't have the problems with them that they have with CSS.
I still prefer tables for layout even though I offer free CSS templates. CSS will be the way in future and I think they eventually will be better than tables, it'll just take a few years to get there.
And speaking of CSS as XSLT, you haven't hit on my number one gripe: the fact that there's now two w3c-approved ways to select elements in a DOM (CSS selectors and XPath)?
I think it's clear that XPath is about ten trillion times more powerful than CSS selectors. So why are we still getting updates to this clearly inferior language.
blech.
Then there's Lynda Weinman (Aesthetics of Layout): "Though this might sound like I'm now encouraging rectangle-itis, I do advocate the use of a grid in your design. The grid itself is not a visible component—it just helps you align your text and images so your design has a sense of security and order." Again, she's arguing from a purely aesthetic standpoint.
So we're back to Ned's question, rephrased somewhat: If it's a good idea to use an *imaginary* grid to lay out your pages, then why is it a bad idea to use an *actual* grid (i.e., a "grid" element) to mark up those pages? I, for one, don't see any compelling reason to abandon the whole grid concept, just because some cooler-than-thou "designers" have decreed that table layouts are to be henceforth "frowned upon".
Certainly, tables *as currently implemented* have their faults. HTML itself has plenty of faults, while we're at it. Previous comments have pointed out that, with tables, you can't (as easily) move a navigation bar to the other side of the page. There are two answers to that, the first being that most serious sites do not make their Web designers type all that crud for each page, over and over again; instead, they use templates. The second answer is more of a question: Why doesn't HTML have templates built-in? I assume it will eventually, but it really should have had them from the beginning. Such a facility would have saved an enormous amount of bandwidth.
In the meantime, the W3C has (for some reason unknown to me) been more focused on giving designers a standardized way to fling dung at arbitrary coordinates on the page (a la CSS positioning), rather than on *reducing bloat*, which is clearly the more serious problem.
The very first comment here made that clear; I suggest everybody go and re-read that part of the specification, because it seems to have sailed right over your heads.
As for why tables for layout are bad, it shouldn't be a question any more. A table is a data structure. If the contents of the table are not, in fact, a table of data, then the tag is being misused. The fact that it was once the only way to achieve a reasonable design layout is no longer an excuse -- there are other ways available now that do not compromise the data contained on the page.
So it's 2008 and we're still using the same browsers with the same half-baked implementations of half-perfect CSS standards. To me, this is ever more indication that we should be using the tools we have available to us. No magical CSS specification is going to come swooping in to save us. Even if it did, I hope to be doing something different in my career in 10 years when it's finally supported.
We recently echoed these sentiments out of frustration. Oddly enough, we propose a layout element just like Doug Sauder's grid and give a meant-to-be-humorous python script to post-process your HTML.
But, hey, I am so new to this, and encouraged at the above, not discouraged.
...
> Why couldn't CSS have let me describe the grid of the page with familiar <table>-like constructs?
No, you really don't understand why we want to separate content from layout, or you'd realise that proposing extra markup tags (content) to control how the page is visually rendered (styled) is exactly the opposite of separating them.
Add a comment: