Images in this post missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at imagehelp@codebetter.com
Tables vs. CSS for layout of web forms

This is an interesting post, with a good tip for how to apply field labels to TextBox fields on web forms. I did however find one point that was made interesting and it made me think...

The problem is how to design this form cause there are no tables by default and also tables are not state of the art today.

I guess the reason I find this interesting is because I only partially agree with his statement. Tables are not "state of the art" today, but I believe this only applies to your overall page layout, not necessarily to forms on your page. I feel like using a table to layout a form in a tabular format is absolutely appropriate, and really the only way to effectively layout a form with lots of fields that you may not necessarily want to layout strictly with vertical orientation (all fields and labels on top of each other). Am I the only one that feels this way? I still use tables to layout my forms, at least partially because I've not found an effective and easy way to use CSS to layout a form in tabular orientation. Am I still in the dark ages and missing something?

Currently listening to: The Pot Bellied Goddess by He Is Legend from the album Suck Out The Poison

Posted 10-11-2006 10:04 AM by Bob Yexley
Filed under: ,

[Advertisement]

Comments

David R. Longnecker wrote re: Tables vs. CSS for layout of web forms
on 10-11-2006 11:03 AM
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
Mika wrote re: Tables vs. CSS for layout of web forms
on 10-11-2006 11:17 AM
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>
Jimmy wrote re: Tables vs. CSS for layout of web forms
on 10-11-2006 11:17 AM

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

Luke wrote re: Tables vs. CSS for layout of web forms
on 10-11-2006 11:24 AM
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.
Stephen Wright wrote re: Tables vs. CSS for layout of web forms
on 10-11-2006 1:02 PM

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.

Steve wrote re: Tables vs. CSS for layout of web forms
on 10-11-2006 1:10 PM
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.
Bob Yexley wrote re: Tables vs. CSS for layout of web forms
on 10-11-2006 1:51 PM

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.

dave thieben wrote re: Tables vs. CSS for layout of web forms
on 10-11-2006 4:08 PM
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.
DonDraper wrote re: Tables vs. CSS for layout of web forms
on 10-12-2006 12:04 AM
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.
Christopher Bennage wrote re: Tables vs. CSS for layout of web forms
on 10-12-2006 11:52 PM

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...

newttyy wrote re: Tables vs. CSS for layout of web forms
on 04-18-2008 9:44 AM

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).

Paul wrote re: Tables vs. CSS for layout of web forms
on 09-12-2008 3:47 PM
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.

Add a Comment

(required)  
(optional)
(required)  
Remember Me?

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Subscribe
Google Reader or Homepage

del.icio.us CodeBetter.com Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl CodeBetter.com Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of Devlicio.us
Red-Gate Tools For SQL and .NET

NDepend

SlickEdit
 
SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
LiteAccounting.Com
DevExpress
Fixx
NHibernate Profiler
Unfuddle
Balsamiq Mockups
Scrumy
JetBrains - ReSharper
Umbraco
NServiceBus
RavenDb
Web Sequence Diagrams
Ducksboard<-- NEW Friend!

 



Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers

 

Community Server (Commercial Edition)