Little bit of tension in the neighborhood. Kevin and I got into a little fight over the weekend about the best way to design a form. I think I said something about tables being sometimes appropriate, he said something about only a “second-rate sloth-master database programmer” would think of not using CSS, and then I said something about his mom needing a new stylesheet — basically, things were said that shouldn’t have been said and it got ugly fast. I don’t want to go into details, but at some point, he took a sharpie and wrote “CSS IS YOUR DADDY!” on my bed sheets and tried to strangle me with them.
Luckily, Chris found us, broke it up and made us hug.
Here’s my take: Certain situations (fluid three column layouts) are very easy to implement with tables and very hard to implement with CSS. I’m not talking about puny one column forms with 5 to 10 fields. Those are easy to manage. I’m looking at 2 to 3 column forms with multiple sections and headers and fields that stretch through all 3 columns in width. I have tried both CSS and tables and experience tells me that the more complex the form, the cleaner (and more manageable) it becomes to use tables. Basically, I say use CSS as much as you can, but don’t kill yourself.
If you want to know more about the issue, check out the following sites:
Someone made a comment about this yesterday but we had a database problem that resulted in the loss of recent comments. There was nothing inappropriate, just an error (Thanks to Kevin).
It all depends on how much you value the semantics of your document/form.
Forms are NOT tables. They are forms. If they wasn’t the case we wouldn’t need a forms tag and the table tag would have action/method attributes.
I semi-ranted about this a while back: http://richardathome.no-ip.com/index.php?article_id=223
I’ve laid down this challenge before (http://www.yourtotalsite.com/archives/xhtml_css/using_tables_to_layout_fo/Default.aspx – last few comments) and had no takers so far: Show me a form layed out with a table and I’ll help you take away the tables leaving you with clean, undiluted, cruft free markup :-)
Interesting challenge. If I get the time this weekend I will take you up on it. I know it can be done in CSS, but we’ll look at ease of maintenance, ease of development, and a few other things. Actually, I would love for you to prove me wrong. If I could find an easy reusable CSS solution I’d be a happy guy.
I took a look at the posts you linked to. Nice blog post. If you have any other work with CSS tables feel free to link to them so I can look them over.
Firstly, thanks for the link… Since writing that post about laying out forms with tables, I’ve gone through something of a conversion. These days, I shy away from table layout forms and, instead, use css. However, I did need to re-teach myself form design to be able to acheive it… Forms are unbelievably easy to style and layout until you require something more complex than a series of text boxes, text areas and select boxes. When we delve into the domain of large lists of checkboxes or radio buttons, it all gets a bit more complicated. Aesthetically, we want labels and inputs to align in columns, we want labels BEFORE inputs for selects, inputs and textareas and we want labels AFTER inputs for checkboxes and radios (believe me, this is the nicest way of doing it). Trying to acheive this can be horrifyingly difficult. In reality, HTML is actually quite limiting in its scope. You have to remember that it was created almost 20 years ago for marking up physics papers at CERN. We’re now forcing it into a role it was never designed for and, as such, the tags we could do with don’t exist. The best method I’ve found for marking up and styling a form is to create the XHTML first. Now take a look at it. Do you understand the form? Can you follow what you’re supposed to enter? Do the things that relate to each other APPEAR to relate to each other? If they do, you’re off to a good start. Now you can start to add your CSS but be sparing, don’t screw up what you’ve already acheived with good markup. Sooner or later you’ll be happy with the result. It’s also worth noting that every COMPLICATED form you create (and this doesn’t mean poxy comment forms - I mean full questionnaires, surveys and registration forms) will end up teaching you something new about form design. All forms are different, and because of this, all forms need different designs. Good luck with your argument guys - if my workmates and I are anything to go by, you may find it lasts a while. Once you get past the TABLE argument, someone will mention DL’s… ;)
That’s some good advice Tim. I agree that you learn something new with every form. Maybe that’s why I hate forms so much - they are never easy to deal with. I still have my reservations about full CSS forms in certain situations, but I am starting to adapt. We will see how it goes.
Some things simply don’t work using 100% CSS. Here’s my view on the issue: Did CSS really kill the tables?