Divs vs. Tables for Forms
- Started
- Last post
- 19 Responses
- SteveJobs
preface (for the tl;dr crowd): for forms created for mass consumption with complex layout and localized text, use easy-to-implement tables, or put extra effort into doing it with divs?
I don't understand a lot of the debating about the use of these two, but from what I've seen, the community seems to favor divs, and as such I try to implement them in most all situations, except when tabular data is being displayed.
Right now, however, I'm trying to set up some complex forms where I'd like the labels to all be right aligned and have the same width, but I can't use a fixed width as those labels will be localized thus requiring the need for variable widths.
One other point is that this is something that will be reused A LOT - think of it as a service consumable by the public.
So, with all that, should I put the extra effort to bend css so that I can use divs or just take the easy way out with tables? i'm asking because googling this is overwhelming and impossible to find a consensus amongst all the arguing and biased opinions.
- jamble0
There isn't really a debate, tables are fine for tabular data. A form isn't tabular data so use the appropriate tools for the job.
What you're describing doesn't sound that difficult and shouldn't require "bending" of css to achieve.
- ukit0
You can also make the rows of the table items in a list. Something like this
<ol>
<li>
<label>
</label>
<input>
</li>
</ol>
- SteveJobs0
It may not sound difficult, but for me it is. And one thing I failed to mention is that the form itself has width constraints and it'd be nice if the fields expanded so that they were flush with the right side of their container.
Here's a quick visual reference I put together using tables. It's not 100% flexible, but was easier to wrap my brain around than trying this with divs. The idea is that the form which could have different label widths (which in my case is due to different translations of a word) will maintain some kind of consistency in spite of the those varying label widths.
What I have miiiight work well enough for my needs (still playing around with it), but I figured I'd run it past anyone here who felt strongly against the use of tables, and would offer a reasonas to why.
- inteliboy0
Righty oh jamble. There's no doubt that forms remain a pain in the ass to style. But it's still best not to use tables.
True that ol's and labels help -- but anything more complex then a contact form and it's hard not to start messing with floats and nested divs.
- SteveJobs0
@inteliboy
why is it best not to use tables? I'm looking to be persuaded against them, particularly if they aren't future proof, or mabye won't render consistently across browsers or different platforms.if they are frowned upon by the community for no other reason than they are considered a hack, I might stick with them for simplicity sake. But I'm trying to keep an open mind and understand best practices.
- inteliboy0
Well it's already been mentioned above - tables are for tabular data. If you do otherwise, then your website will face a bunch of accessibility issues - plus your digging yourself into a hole (you can't reposition and style a td like you can a div).
It's part of a web designers/devs job build a website properly, just as an electrician should wire your house to industry standards.
That said, in reality you can get 100% away with using tables for a form - unless your site needs a ridiculous accessibility rating or such, or you're getting paid a proper amount to spend the time to do it right.
- 3030
take a look at this:
http://24ways.org/2009/have-a-fi…Says html5, but I am using that approach with xhtml. <ul> and <li> items work for me.
Also, take a look at this solutions:
http://www.rmsjr.com/RMSforms/RM…
- flashbender0
Divs.
Easier to handle, more accessible and just friendlier.
I am doing a project right now that is developing quote request forms in 24 different languages.
Using styling for <label> and <input> tags makes everything pretty easy
- SteveJobs0
hmmm, this seems to work here. thoughts? am i cheating?
.table {display:table; }
.tr {display:table-row; }
.td {display:table-cell; }
- Continuity0
^
Are those actually divs with a class label of table, tr, td and their display declarations set? Or are those really table elements being style and a redundant display declaration thrown in?
- Continuity0
Honestly, I'd got with divs for this, SJ. Yes, the forms are complex, but if for any reason you need to edit this form later on, you'll be happy that you didn't go the table route.
If I was doing this, I would set it up within a container div for the whole form, making it easier to manipulate the whole thing overall.
After that I would probably set the display properties to table-row for each row of form content, and put each element – whether it's a label or a form element – in its own div, and style that in the external CSS.
Yeah, it's a lot of nested divs, but the primary advantage here is that you can them go on to style the actual form elements (which, as inteliboy mentioned, are notorious frustrating to style) without _necessarily_ breaking the rest of the layout.
Best thing to do is a quick sketch on paper with divs marked out as boxes so that you can better plan your mark-up when you first set it up, and can then figure out your floats, as well.
- Continuity0
As for your potential problem with localisation making your labels break the layout if they are longer than how you have them for one locale: the best way around this is to increase the space between your rows, so that the labels can line-break gracefully and still look good.
Looking at the comps you did above, the spacing between row is pretty tight to start with, and a bit intimidating visually. Letting a bit more white space in the wouldn't hurt, and would probably be helpful anyway for longer labels.
Another solution could be having the form element labels within the actual form elements themselves, and would go away when a user clicks inside the element to input data.
- ********0
localisation can be handled with php variables. noobs
- vaxorcist0
Tables offend many designers, but missed deadlines and such offend clients more....
Div's may allow you more flexibility if you're using Ajax-like validation
spending too much time tweeking all of this means you may lose the client... so be careful... and get it done....
It's all too easy to get into analysis paralysis on things like this..
- SteveJobs0
@ Continuity - yes, I changed everything to divs and am using that instead. It seems to be working. Is this ok, or did I just come up with a cheap work-around?
@jadrian_uk - yes, the localized text will be handled server-side.
@vaxorcist - technically, I'm the client, but you can look at this as though I'm creating an engine (like the developers who created wordpress) to be used by many. this is why i'm trying to learn about the implications of going either route.
- it's good to be in that position, you fan finally "do things right" ....vaxorcist
- Continuity0
SJ, I don't think it's a cheap work-around at all. Your naming convention for your divs is your own, and if it makes it easier for you to name your div classes with table nomenclature, then have at it, I say.
- SteveJobs0
^ well, i just used that naming convention above so it made sense to everyone here what i was doing exactly.
I just wanted to make sure that using the table, table-row, and table-cell properties isn't somehow shooting myself in the foot, but from your response that doesn't seem to be the case. thanks!
- ukit0
Despite all the talk about "should" do this etc, there will likely be zero actual layout issue with using tables. What we're really talking about is what is the "semantically correct" solution.
And if you are viewing things in that light, using <ul> and <li> (or <dl>, <dt> and <dd>) makes the most sense since those elements are intended for this kind of data, whereas divs are generic.
But again, not something that matters all that much in the real world. Divs, ul, or dl are all workable and will likely have zero impact on the client's experience if coded correctly.
- ukit0
FYI, this page uses tables:
http://www.google.com/advanced_s…
I'm not encouraging anyone to go that route, but it really is all a matter of web designer best practices, and not anything on the user end.
Here's one that uses <ol> and <li> to do the same thing: