Commonly authors have used tables to make forms look nice and neat, like this:
| Sex: |
And yes, it does make things a whole lot neater. Now, this isn't a clear-cut violation of tables - some people argue that lining up forms is a valid use for them, and basically you have a data table with some cell values provided by the user.
Personally, I don't agree with that argument, and feel CSS is a better approach. It also makes things a lot easier for screenreader users (not having to navigate between cells as well as form elements).
To achieve the same effect in CSS, ideally you should just have to use <label> elements, like this:
<label for="name">Name:</label> <input id="name" ...>
And then simply float them, like this:
label {
float: left;
width: 10em;
}
There's just one problem with this: in Mozilla 1.x (and subsequently in Netscape 7), floating labels causes them to vanish without a trace. This means users are confronted with a mass of unlabeled inputs, which doesn't make a lot of sense.
To work around this, simply use an extra <span>, like so:
<label for="name"><span>Name:</span></label> <input id="name" ...>
And then float that instead:
label span {
float: left;
width: 10em;
}
Make sure to use em to set a width, otherwise everything will go a bit pear-shaped if the user increases the font size.