Are forms tabular data?

An old question revisited: Should forms be tableless or not?

[MatthewHSE]

Speaking to "CSS Purists" here . . . ;)

Even since switching to full CSS layout, I've still stuck with tables for forms. I've read some of the other posts around here about making tableless forms but somehow none of those ideas have seemed to quite make the cut for me (though they're close).

I've been kind of hating myself for using tables for forms, but I just realized today that perhaps part of the reason we all struggle over this issue is that forms are, after all, tabular data.

Think about any kind of print-form. Order forms, applications, etc. They're almost always laid out in a definable table, complete with borders and shaded backgrounds.

So are forms really legitimate tabular data? Why or why not?

[Reflection]

For me it depends on how complex the forms is. For most forms using framesets & labels is sufficient, but for more complex forms I sometimes find that browser compliance can become a pain so I will use a table.

The vast majority of my forms are tableless.

[createErrorMsg]

Recognizing that any definition of exactly what 'tabular data' includes is, at least to some degree, subjective, I'll go ahead and pitch in my two pennies...

FOr me, tabular data means anything that is best viewed in a columns'n'rows format. So, for instance, if you're trying to tell your users what each of four products are, and how much they each cost, and how many years their warranties lasts, this is clearly tabular data. It fits nicely into columns and rows, and, more importantly, is best understood in columns and rows.

So the question is, are forms best viewed in column'n'row format? And I think the answer (go figure) is that it depends on the form.

A contact form, for instance, is usually laid out to resemble common letter format, not columns and rows, and so should not be in a table.

An order form, however, is the epitome of column and row format and so, probably ought to be in a table.

A questionaire? That's best viewed as an alternating list of Qs and As, so no table.

And so on.

[DrDoc]

For most forms using framesets & labels is sufficient

I assume you mean fieldsets and legends?

[g1smd]

I think that every form I have ecer done has been wrapped in a table.

I have never looked into forms in <div>s as I avoid divs where possible.

I assume it is possible to have a form inside a list, too, but never tried that.

[drbrain]

How about:

<form>
<fieldset>
<legend>Shipping Information</legend>
<table>
<tr>
<th><label for="name">Name</label>
<td><input name="name" id="name">
</table>
</fieldset>
<fieldset>
<legend>Billing Information</legend>
...
</fieldset>
</form>

Remember that in a valid HTML document a form must contain a block-level element inside it, so you can't just place the labels or inputs as children of the form.

[Reflection]

I assume you mean fieldsets and legends?

Yup thats what I meant.... framesets yuck ;)

so you can't just place the labels or inputs as children of the form

No, but they can be children of the fieldset, so you don't need the table in that example.

This is valid:

<form action="..." method="post">
<fieldset>
<legend>Personal Information</legend>
<label for="l">Last Name:</label> <input id="l" name="l" type="text" tabindex="1">
<label for="f">First Name:</label> <input id="f" name="f" type="text" tabindex="2">
<label for="a">Address:</label> <input id="a" name="f" type="text" tabindex="3">
</fieldset>
</form>

[Small Website Guy]

If you want to get a lot of stuff to line up in rows and columns, I don't see why you wouldn't use tables.

Name:
Address:
City:
State:
Zipcode:

It's easy to make that line up in two columns using a TABLE. It would be a lot more difficult using DIVs.

[photon]

Not hard to line up at all without tables; DIVs aren't necessary either.

Using Reflection's HTML with the following CSS would line things up nicely:

label {
float:left;
width:200px;
text-align:right;
clear:both;
}
input {
float:left;
width:300px;
text-align:left;
}

The above is just off the top of my head (not sure about the placement of the

clear

for example), so there may be some errors. In essence though, neither tables nor DIVs are required to line up a form.

[Small Website Guy]

I think you mean "clear:left". "clear:both" would cause the INPUT to move below the LABEL.

But the advantage of tables is that they automatically adjust to the size of the things inside them. So you don't have to worry about figuring out what the exact width is.

I am sold on the idea of doing most layout with DIVs, but when it comes to getting what is essentially tabular data to line up, I use a TABLE.

[Lance]

This is the only way I was able to get that to work:

label { 
float:left; 
width:100px; 
text-align:right; 
clear:left; 
} 
input { 
float:right; 
width:300px; 
text-align:left; 
clear:right; 
}

Probably best in a container with a defined width.

[MatthewHSE]

This method doesn't work very well with the way I like to do forms. For instance, I prefer to have First Name and Last Name as separate fields, but on the same "line" with one another. Try as I might, I can't come up with a good pure-CSS method to achieve this.

But using tables makes me feel dirty . . . ;)

[Lance]

Agreed... But for simple "log in" forms or perhaps "guest book" entries, this seems like a decent method. Start with the easy ones and work on the hard ones later.

"Clearing the world of tables one form at a time"

[Small Website Guy]

If you can convince me that there's a good reason to use TABLEless login forms, other than just being able to say "I did it," then I will do it.

But you have to convince me.

[pageoneresults]

But using tables makes me feel dirty . . . ;)

Not me. I'll use them whenever a form is being developed. There is just too much work involved in setting up a form without tables and it is not worth the headache. I'll style away my <table>, <th>, <tr>, and <td>s, but they are not going anywhere anytime soon. ;)

Also, take a look at your form with CSS turned off. Does it still make sense without the tables?

[Lance]

"Clearing the world of tables one form at a time"

Oops! I forgot to put the smily face after that...

I'm currently restyling a site I did a few months ago that relied heavily on tables for layout. They're mostly all gone now, and the site looks better and loads faster. Once I "got the hang" of doing things the CSS way, it was actually much easier to accomplish the effects I wanted to in <div>s, <span>s and <ul>s than tables ever were.

I must admit, as a "recent convert", I became a "CSS Zealot"... ...Standing there on my hill-side thumping my CSS Manual and preaching "Ye evil user of thine tables shall surely burn in the ether rot in the bit bucket". (But then I got better)

I started trying to restyle a couple of the forms without tables and suddenly it became a real hassle. It was no longer easy. And then it dawns on me... This is a form, it has a heading row, a column down the left with lables, and fields you fill in, in the middle. It is a table. There's nothing purist about it. Just because you can invest the time to turn the form into a table-less design doesn't mean you should.

Tables aren't evil after all, they are just terribly over used. In my opinion, forms are the perfect example of when tables are the right way to do it.

In most cases, restyling a site is easier when the site was done in CSS to begin with. But that isn't necessarily true of a form. Adding a new field or rearrainging the layout of a form of any real complexity is far easier if that form is in a table.

So for the "CSS Purists" out there, you have my utmost respect for having the patience to convert complex tabular layouts to CSS. And I'm sure that the world is a better place because you exist.

(To the tune of "Love and Marriage")
Forms and tables...
Forms and tables...
Go together like a roof and gables...