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 that has been suggested is to use the definition list (dl) element 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:
The problem with this approach is that it is semantically incorrect, because a form is not strictly a list of terms and definitions.