Question

I want to display an HTML form containing labelled text fields, like this:

      First Name:  [_____________]
       Last Name:  [_____________]
   Date of Birth:  [________]

My obvious approach is to use a <TABLE> and simply place the labels and text fields in its cells, but is there a better way, e.g. a CSS-based approach?

EDIT:

1. I’m looking for a way that reduces the verbosity in the HTML file.
2. And yes, I’m looking for auto-sizing of the labels. See a related question about wrapping labels

Answer 1

If you need the labels to the left of the fields like that, just go ahead and use a table. Not only do tables degrade nicely on older browsers, but they auto-size the column of labels to the text in them (assuming you use white-space: no-wrap on the cells containing the labels, and/or — and this is true heresy — the trusty old nowrap attribute on the th tag), they handle being made fairly narrow well, and they’re easy. Make each label cell a header and each field cell a normal cell. And it’s a pain, but make sure the labels really are labels and link to their fields, because accessibility matters, even if (perhaps especially if) you’re using a table non-semantically.

I’d love to hear about CSS solutions that auto-size the label columns, handle being narrow well, and don’t involve 18 hacks to deal with inconsistencies across browsers. I’d be thrilled to see them. But every time I’ve looked (and that’s several), it’s still been a gap. A gap that needs filling, IMV, so we can stop doing this without wearing hairshirts.

For anyone reading who doesn’t need the labels to the left like that, check out jball’s answer for a good-looking, semantic alternative.