I have to do a user registration form (classical layout with two columns, labels on the left, fields on the right). The labels can be displayed in English or French (therefore different label lengths are possible).
At the HTML level, should I do:
<form ...>
<ul>
<li>
<label ...>...</label>
<input ... />
</li>
</ul>
</form>
or
<form ...>
<table>
<tr>
<td><label ...>...</label></td>
<td><input ... /></td>
</tr>
</table>
</form>
?
Personally I would go for table layout in that case, since I find easier to work with (vertical alignment between label and field), and it can easily adapt itself to the different labels length.
However since several years, tables can generally be replaced with divs/lists to avoid table overuse for layout purposes. I can understand that (and prefer a good general layout organization with layers instead of a bunch of nested table cells), but does this applies too to user registration forms?
What would be your pros/cons?
I’m ending up reading flame wars like “tables vs divs“.
I will use table since I want a simple, compatible, maintainable solution, offering a good internationalisation support (variable length labels => variable left column width).
It’s not saying that I will use tables for everything in layout, but in this particular registration form case, yes.
See:
Plus the two links in my comments, to make yourself an idea of when it is relevant to use tables or not.