Tables are the new black?
2008-03-07 / 18:01 / dave
In early January, Zed Shaw redesigned his site with tables (but where are the links from the main page to the individual posts? Makes linking a bit un-fun). Now Kevin Yank says Table-Based Layout Is The Next Big Thing.
Some of the early comments on Yank’s article seem to be, as Zed might say, lemmings following that “Zen CSS bullshit”: they fault Yank’s example for being non-semantic. But if you check out his source, it looks like any other sexy mark-up:
<body>
<div id="header">
<h1>Page header</h1>
<p id="skipto">
That’s just a snippet, but you get the idea. No <table> to be seen. Instead, he uses (exceptionally simple) CSS to get it to render like a table.
On the other hand, Zed’s entire page is one giant table:
<table id="fuckyourcssbitches" cellspacing="0" cellpadding="0">
<tr>
<td id="leftcolumn" valign="top" rowspan="2">
“Oh no” you think “a table!” But the markup is semantic; check the id="leftcolumn" attribute on the <td>. If you can’t figure out what that column represents, well… the problem is probably not the HTML. (and if you can’t figure out his view on CSS based on the id of the table…)
There is one problem with a table layout, though: adding actual tables. Putting an id on your main “page layout” table allows you to do special styling. This is what Zed does in his css:
#fuckyourcssbitches {
padding: 0px;
margin: 0px;
border-spacing: 0px;
width: 100%;
}
But what if you want to style an actual table of data? If you don’t write your CSS selector write, you’ll end up with your table styling affecting everything on your page.
On the other hand, using an HTML table has one huge advantage over Yank’s CSS table: it works. Yank’s article is specifically about how this will be viable once we get to IE8. 8. Doh!
What to do, what to do
If you want working HTML-tale-less layout now, you can do a few things: 1) Use one of the many tutorials or 2) use Blueprint CSS. Blueprint makes it easy to “design to the grid” (where “grid” is basically a designers word for “table”). You just have to include blueprint’s CSS file and add some classes to your source.
As I said before, the one problem I have with Blueprint is that, like using HTML tables, it injects some style information into your HTML. You have to add things like class="column span-20 last" in your markup. I’ve read some debate back and forth over whether this is a problem or not, but as a user of Blueprint I can say that it is for me. If I change a column position I have to change markup on every similarly formatted page. This kind of skips the whole beauty of changing a single CSS file and having everything change consistently.
Anyway, I’m using Blueprint and probably won’t change anytime soon. I am impressed with Yank’s CSS table layout–it’s just so simple–but given that it doesn’t work in IE it’s pretty much a non-starter. If anything, this points out the failings of CSS and browser implementations in general. Let’s hope CSS 3 and future browsers improve things.