Table-less forms

Often, web designers create (X)HTML forms using tables. Tables tend to clutter up the code when used excessively and ought to be replaced with DIVs coupled with some CSS.

A common issue with creating forms is that the label of the input element varies in width and therefore does not play nicely with respect to alignment (...which is the reason why most people resort to tables). The solution to this problem is to set a width for the label tag. Setting a normal width CSS attribute will not work because a label tag is, by default, an in-line display tag so you have to override the display property with a value of block or set the float property (Set the float property! You'll probably prefer this over setting the display property.).

If you set a uniform width for all form labels, you'll notice that all your input elements are left-aligned. For controls that do not have any label text, you would still probably want to place an empty label tag to get the left-alignment.

Anyway, more from me later. Happy web designing!

PS: For more info, see http://old.macedition.com/cb/testers/icabcss1.html