CSS and tables for forms

We don't always get to design our own form layouts. The form below, for instance, looks more suited for print than for the web, but that's just the way things sometimes go.

Widht:100%

Instead of setting the width for each individual form element, why not simply let them scale to a grid automatically? The form below does exactly that. A fixed table layout creates a solid grid to work with. This grid is then used with varying colspan values, and the 100% width for input fields does the rest.

First name:
Last name:
Gender:	Male Female
Address:
House number:		Postal code:
E-mail address:			Newsletter?
Phone number:			call me now
Fax number:

Granted, using tables for forms may be questionable, but you're entering a world of pain if you don't do it for complex form layouts. The CSS file is over here.

Back to CSS Examples