CSS Tables for layout are A Bad Idea.
There has recently been quite a bit of attention paid to the idea of using CSS Tables for layout, now that all browsers support
display:table; and its associated attributes. Using CSS to force layout in a table-like manner has been written about in books, talked about in blogs, and hailed as a revolution in CSS based design. It’s not. It’s really bad. Don’t do it. I’m writing here to convince you why you shouldn’t.
First a little background: These values have been in the CSS specification for over eight years. It so happens that a certain popular browser didn’t support them and it’s taken until now for that browser vendor to catch up. I’ll let you guess who we’re talking about. Anyway, this isn’t anything new, and it’s not the product of any radical new thinking. Which leads me to my main issue with this idea: using CSS to perform table-esque layout is just as bad as using
<table> for layout. It is a product of the same flawed thinking and it produces many of the same flaws as using a real
<table> would. Allow me to break it down for you.
Pro’s of using
- We get equal height columns at last. Real ones.
- Things will line-up horizontally as well as vertically.
Con’s of using
We introduce a whole load of redundant, meaningless, only-there-to-position-stuff mark-up. Mark-up that makes future design changes as much of a pain in the ass as back in the day when you spent all those hours trying to re-factor a web page that was stuck inside a load of table mark-up. Remember trying to find the start and end of those table cells so you could cut the content out and move it somewhere new? Welcome back to a work methodology that sucks as hard now as it did then. The only difference is instead of this:
You’ll have this:
<table> <tr> <td>here's some content</td> <td>here's some content</td> <td>here's some content</td> </tr> <tr> <td>here's some content</td> <td>here's some content</td> <td>here's some content</td> </tr> </table>
<div class="table"> <div class="table-row"> <div class="table-cell">here's some content</div> <div class="table-cell">here's some content</div> <div class="table-cell">here's some content</div> </div> <div class="table-row"> <div class="table-cell">here's some content</div> <div class="table-cell">here's some content</div> <div class="table-cell">here's some content</div> </div> </div>
Now sure, you can kid yourself that you’ll somehow wrangle the results you want out of your existing mark-up, or at least you’ll be able to trim it down and get a bit more semantic - but when you’ve spent an hour trying to get your faux-table to work, and then it turns out a bit of content needs changing and now so does your faux-cell structure, you’re going to throw up your hands and just wrap stuff in otherwise pointless divs. And you’ll do that because that’s the practical thing to do - not because you’re not a good developer or designer. And when it comes time to re-design the site you’re going to spend a lot of time trawling through that mark-up, because now you’ve thrown it in there you can’t just tweak the CSS files to change the layout, you’ve got to adjust your mark-up too.
The “problem” with display : table; is that it not only re-introduces chronic cases of divitus, it also takes you back into a mindset from the dark days of the web. Soon you’ll be seeing designs in terms of slices. You’ll want to cut up visuals into neat squares. Your designs will start to go boxy again; you’ll lose the flexibility of scaling and adaptive layouts. You’ll slip into the mind-set that adding bits of mark-up purely for visual purposes isn’t really that bad.
CSS’s ability to emulate the layout characteristics of a table is a tool that was born back in the day when the default mindset for any layout was to use a table. It is a tool that works in exactly the same way as a table, the only benefit of which is to remove the semantic issues of using a table. But the other issues still remain. To flock to display:table now would be to take more than a couple of steps backward after eight years of learning how to do this web stuff properly.
How has it comes to this?
So why are designers clamouring over it as though it’s the best thing to happen to layout in years? Because, despite the horribleness, the suddenly animated ghost of yester-year is the best thing to happen in years. The W3C, still, are not willing to believe or are somehow incapable of understanding that the abilities of CSS today are inadequate for the job it must now perform compared to the job it was created to handle. And they are unwilling to re-think the very fundamentals of CSS that are crippling designers today. It’s almost a decade since CSS could be said to have “gone mainstream” - and yet designers are still waiting for a way to make things line up horizontally that doesn’t involve butchering the mark-up. Are still waiting for layout tools that allow us to do some really fundamental basics. Are still waiting for layout options flexible enough for us to use without resorting to complex hacks. And the future looks as bad as the present if the god-forsaken horror that is the “Advanced” layout module of CSS3 is any indication.
CSS tables do bring something new to the table (harhar!) - but that something new is a haggard ghost from the past dressed up in fancy new clothes. It is not the solution we need to our layout issues. We’ve done well enough for the last half-decade using floats and positioning. The web hasn’t fallen down, designers haven’t left the industry in droves, and progress in visual interestingness has continued to be made using the tools at hand. Please, keep using them - display:table is simply not worth the regressions it’s use would involve.
I’ll be talking about what we really need to see from CSS, my proposals for solving our layout problems, and why I am so very frustrated with the W3C, in the next post.