== What (and how) I use HTML tables for layout here

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 /blog]].

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
NoMoreTableGuilt]].)

The most visible use of a table in [[Wandering Thoughts]] is the
sidebar, which is placed there [[in a table CSSIrritation]]. 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 NoMoreTableGuilt]]):
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 {{C:laquo}} and {{C:raquo}} 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 CSSAccessibilityAdvantage]] (see that
for more discussion).