Replacing Tables With Style
In 2001, A List Apart published an article that showed how tables could be replaced with semantic mark up for forms and the like.
The style code looked something like this (representative sample abstracted from the article):
And the HTML:
This code works! But it's incorrect, because the span element is an inline element, and as such does not have width (or height.) In order to specify width, one must use a block-level element such as div.
An alternative approach
This code gives a similar output to the previously published version:
And the HTML:
The overall presentation of the form on the page is as follows:
In modern browsers, this is the presentational format that users have come to expect of tables-based form structures, but semantically more correct (i.e. not using a table to present non-tabular data.)
Another approach
Another approach is to use the definition list element (dl) to create the structure for a form. List items within a definition list have two components, the term (dt) and the definition (dd), which lend themselves to creating a tabular visual structure on the page, with a little presentational help from CSS.
The standard HTML for a definition list:
And the CSS to make it look more like a traditional form:
Together, this code gives a structure as below:
With a little change in the CSS you can achieve a slightly different effect:
A minor concern with this approach is that it is semantically incorrect. A form's elements do not strictly represent a collection of terms and definitions, although a field label and field input may be considered to have a similar relationship to each other, if you're that way inclined.
If it bothers you, you could consider an unordered list. It's a little more complex (each row or fieldset has to be a list within the overall form list structure) but it works!