I'd like to say, to start with, that I'm not particularly opposed to using CSS for layout as an alternative to tables. It's just that I find HTML tables easier to write in practice and as far as I know, CSS lacks the features that would make it really work well for this. Today I want to talk about three specific uses I make of tables in Wandering Thoughts.

The first is my most common use of tables for layout in general: aligning form labels and form entry fields. What I almost invariably want in my forms (whether it is smart or foolish) is something that looks like:

a field label	<input field>
label 2	<another input field>
name?	<input field>

I want the labels to line up (either left or right aligned depending on my mood) and all of the input fields to line up too (always left), without me specifying any widths explicitly. I want the entire thing to take up as little or as much space as needed by the fields (and to wrap label fields if necessary and appropriate). Wandering Thoughts has an example of this in the current 'add a comment' form where I use a table as part of the form to align a couple of fields below the main comment text entry area.

(Setting up the current version of the 'add a comment' form is what prompted my original entry on giving up my table guilt.)

The most visible use of a table in Wandering Thoughts is the sidebar, which is placed there in a table. Most of the content on every page is wrapped inside a simple two-cell table, with the left cell set to 76% width and the right one to 24% (and some CSS used to style the border between them; that dotted border actually shows the exact span of the table on the page). The relative percentages are questionable, but I was in a grumpy mood back many years ago when I did them and I picked things that came out right on my screen.

(I think the right approach would be to set relative widths but also to set minimum widths in ems for both sides. And ideally there would be CSS magic that dropped the sidebar off to the bottom if there wasn't enough room, because the sidebar is less important than the main content. But I'm dreaming here.)

The other use of tables in Wandering Thoughts is visible at the bottom of individual entries (such as this one): the entire area of the previous entry and next entry links are formatted with tables. What I wanted for this is for the previous and next links split the space 50-50 (with a bit of margin between them and the divider line) and that the « and » markers be centered vertically within the overall box (if they're present). Right now this actually uses nested tables because at the time I was hitting things with brute force hammers and I find tables easier than CSS.

I suspect that if I knew more CSS I would naturally gravitate to doing a number of these effects with CSS instead of tables. But the last time I wrestled with float and so on the result just kind of barely worked when the dust settled and I've been scared of touching it ever since.

(That CSS is still here today, handling the breadcrumbs at the top of every Wandering Thoughts page.)

Sidebar: the CSS layout-related feature I really want

The killer CSS feature would be the ability to define a grid (hopefully flexibly) and then arbitrarily relocate <div>s or other content blocks into it. One of the big drawbacks of tables is that they force an order on the HTML; the top left table cell must be first in the HTML, the bottom right one last. This may not correspond to the right content ordering for, say, accessibility (see that for more discussion).