I'm done with feeling guilty about using HTML tables for layout

August 30, 2013

Just over six years ago I wrote that using CSS instead of tables was a hack. As far as I can tell nothing has fundamentally changed since then; using CSS to create flexible, powerful column and row based layouts is still awkward and a hack. The promised high level CSS layout support is not particularly closer to materializing in real browsers now than it was then.

(One difference is that you can apparently now fake it with JavaScript, just in case you would like to have two baroque hacks instead of one.)

I don't know about anyone else, but I've spent a certain amount of the last six years feeling vaguely guilty when I periodically resorted to using tables for column-based layouts. As of now, I'm done with that. Until CSS gets its act together (if ever) tables are going to be my first and guilt-free choice for any grid-based things I need, all the way from just lining up form labels and form fields to full-page layout. And if the tables need additional styling I'm going to add bits of CSS without even thinking twice.

Ultimately what it comes down to is simple: HTML tables make it easier to create grid-like layouts and they work better than at least basic CSS. Letting the ghostly voice of CSS get to me about this is stupid and counterproductive (in that it pushes me away from better, more usable designs).

(As a side note, I'm not at all interested in recreating <table>, <tr>, <td> and so on in suitably marked up <div> and <span> entries plus CSS. I already have the table HTML tags and they work fine. Carefully redoing them in CSS just so that I can say I'm using <div> instead of <table> strikes me as the height of something under almost all circumstances.)

Sidebar: why the 'obvious' CSS solutions are not suitable

It's relatively easy to construct a CSS-based grid layout if you force specific column and/or row sizes (in points, pixels, em, or your absolute unit of choice). I refuse to do that for two reasons. First, because forced sizing has various bad side effects. My absolute requirement for a grid-based layout is that the grid spacing flexes in and out based on the browser size. Second, absolute sizing is a pain in the rear to specify out and to test. The advantage of a flexible grid is that I don't need to worry about more than a bit of this.

(The lack of worry is especially acute when I have very simple design rules like 'split the space in half' or 'just line up the left edge of all of these things'.)

Written on 30 August 2013.
« A new piece of my environment: clearing the X selection
HTML quoting as I currently understand it »

Page tools: View Source, Add Comment.
Search:
Login: Password:
Atom Syndication: Recent Comments.

Last modified: Fri Aug 30 00:30:05 2013
This dinky wiki is brought to you by the Insane Hackers Guild, Python sub-branch.