Veerle's blog

Today I took the challenge to style a form in CSS instead of a traditional table. With forms it's always not that obvious to use CSS instead of table tags.

First of all I created backgrounds for my labels and for my fields on the right. The left (.col1) and right (.col2) columns are defined by a class each linked with a background image and a set of properties and values.

• Here is my CSS form example that I like to share with you.

This has been tested on Mac in Safari (1.2.1), Netscape 7 and FireFox 0.8 and on Windows XP in Internet Explorer 6 and Netscape 7, Mozilla and FireFox 0.8. But I seem to have floating problems on Mac in Netscape 6.2 and Internet Explorer 5.5.

Interesting tutorials on this kind of matter:

• Designing a form using CSS layouts
• Adding Style to Forms with CSS
• Fun with forms - customized input elements
• Style Webforms Using CSS

Considering the time I've spent to create this simple form without any table tags I'm wondering if it's worth in this case just to avoid table tags? It's not that this form needs any complex table code and that it will slow down loading time. Besides this looks a bit like tabular data, no? Anyway I just wanted to give it try and see if this would be doable.