The Perpetual n00b

Hmm, the site in his example does have a nicely laid out form; however, until browsers all catch up and, somewhat, accept CSS formatting the same way, tables are still more ... reliable. To many coders, relative positioning and CSS are the grail of online media formatting, but, and perhaps out of my own ignorance/lack-of-time/whatever, I still have more success and successful layouts using tables when developing cross browser sites. Your not alone. :D

It's easy to design form with a Definition List (<dl>, <dt> and </dt><dd>). Better CSS control, better semantic and no <table> <tbody> <tr> <th> ... mess. Athough it is absolutely not wrong to use Tables. DL or Tables, it's good to not forget about <fieldset> and <legend>, again for better semantic and accessibility.</legend></fieldset></th></tr> </tbody></table> </dd></dl>

Yeah. CSS design purists will probably say that only floating layout with spans, divs and labels should be used. I have found unexpected problems with designing forms without tables. There is no problem as long as it is only field with label but everything goes wrong when it becomes more complicated.

I was recently posting about web design here and on my previous blog before. Perfect guide about forms you can find on LukeW page http://www.lukew.com/resources/articles/web_forms.html

I completely agree with you. I think it is crazy how zealous people become about table-less layouts. The fact is, div layouts has their place and table layouts have theirs. Tabular data and layout out forms in a table are examples of where a table layout should be used. These types of arguments always boil down to one thing: Use the best solution for the problem instead of clinging to any technology/technique because of an ideology.

Excellent post.

When I'm designing the page, I end up using tables for the form.  If there's anything that I would add to this would be this:

I use the table to form the base of my form layout.  If there are additional properties that need to be added, I use a div inside of the td to accomplish what I need.  So it's more of a hybrid table/css layout.

I like to use tables over CSS almost always. Mostly because I also like to write automation against web pages that scrape them, and it's easier for me to get the data out from a table than from Div tags.

Yes, I completely agree Stephen. I use a hybrid too. I use a table to basically layout the fields and labels of my form, but usually that table ends up residing inside a div on the page, and often times also, as you mentioned, ends up having spans and divs within it as well.

Bob, I'm with ya. Like with any coding, you need to use your noggin when deciding which to use. However, having sliced up countless Photoshop files into dynamic websites, i love the CSS method for pure simplicity. I don't know how many times I almost went insane with colSpans and rowSpans and tables nested 46 deep. I also like the ability of CSS to change the style definition and completely change the layout of a site without changing one line of code.

Yeah, I'd have to say you're still in a bit of the dark ages and missing something :). Doing the forms without tables saves a lot of grief later when you have to twiddle everything around. If your form's public facing, the importance of accessibility grows with traffic (smaller file sizes don't hurt, either). Besides, with places like formassembly.com and wufoo.com around, it's braindead easy to do it the right way. I counted my last row/colspan a couple of years ago.

The question for me is: What is the easiest to maintain?  I love CSS for layout because, as Dave Thieben said, I went insane with nested tables...  However, when it comes to forms, I often use tables because I find it easy to maintain.  (It's rare to nest tables for a form).

I do plan to followup on the urls DonDraper mentioned.  I'm always looking for a better way...

Like someone else said it before me ... excelent post.

I still use tables for the main structure of the web site and for the forms as well.

Anything else is build and position by css and images.

Here something that a lot of you might go nuts over it: I am still using div tags inside the tables and position them inside the cell using css.

Why so many people think this is wrong? I have still NOT found a browser that will not display the page corectly and fast.

I personally think that people are going way too much "banana" for the whole div tags/css thing.

Each of them have their own places and you can use them toghether as well (as long you know how to).

I checked out DonDraper's suggestions and they are as I expected. The "Advanced" sample I saw of formassembly even used tables for some layout. wufoo had some good solid markup and CSS, but man I've gotta tell you it's a LOT of CSS to pull off. I really really want to do things the "right" way, but I feel like I've got to spend too much time hacking things up to do pure CSS for complex forms. I wish they were all simple one label, one input rows but that's just not reality in complex business applications. Perhaps the thing that rubs me the wrong way the most about it is having to explicitly define widths to mimick what tables do naturally. I've worked on sites that have complex forms on many many pages and that leads to a LOT of definitions to shore each one up individually. And each time a form gets a new field I've gotta go tweak on it again. And managing font-size increases is a good time, too. With limited resources in a constant-change environment I think tables for forms are much easier - class it and go. Then the software engineers can add or remove things without my intervention. For the record, I use CSS for layout of everything else except tabular data and forms. I'm actually a little tired of the "experts" in the ivory tower telling me to do the subjective "right" thing and then spout off a very simple one label, one value "example" of how easy it is. Time is money and dealing with the many browser quirks resulting from complex CSS form layout isn't responsible from my perspective.