JavaScript Workshop » Using CSS for Form Layout

I admit it. I use tables when I need to layout a form. It is just so quick and easy to do. Though as we all know (or should know), tables were only intended to be used for layout of tabular data. So with all the buzz about semantic markup and accessiblity, I thought I'd look into learning how to layout a simple form the right way. After a few hours of head scratching, I finally came up with a form that uses CSS that looks practically the same as one using tables.

Here is a form using a table for its layout and here is the same form using CSS for the layout. If you don't view the source for either page, could you tell which one used tables or CSS?

Designing without tables definitely takes more time when you think about the layout of each input element and its semantic meaning. Though once you do, your forms will be easier to maintain, more cross-browser compatiable and accessible and will even download a little faster.

View the source of both examples to see the differences and hopefully it will help you make the transition too.

Two additional resources would be this excerpt (.pdf) from the wonderful book The Art & Science of CSS that talks about how to properly design a form with semantic markup and CSS and this useful online tool from Accessify.com that gives you a head start in creating a CSS based form layout (minus the styles).