A while back I wrote an article about forms and CSS and covered displaying forms in tables, for this impropriety I was immediately lynched by the purists. As an application developer I still maintain that sometimes a table is the most appropriate way to layout a complex form. In fact, very often, a complex form is in itself a representation of tabular data – and in an application is often being inserted straight into a row in a database – as tabular data. So I was interested to see this article (hat tip: Jon Hicks) which puts across this point of view well.
The important thing to remember is that if you do use a table to layout a form, you don’t put your accessibility and semantics brain under the pillow and just “stick it in a table”. Using label properly, setting the tabindex of the fields and keeping the table to a minimum, using CSS to style how it looks in the browser, means that you can maintain accessibility despite the use of a table. As detailed in the above article, there is a good argument that a table is often the most semantic way to describe this data input.
5 Comments
“As an application developer I still maintain that sometimes a table is the most appropriate way to layout a complex form.”
I agree – a recent project at work taught me this all too well. I spent days trying to come up with a usable, elegant layout for a complex form, without tables. In the end, nothing came close to being as usable as it needed to be, consistently across all test cases.
When my “purist” streak conceded defeat and I used a table, I had the form finished in 2 hours, complete with all the accessiblity features like labels all present and correct.
Hi there Rachel,
I did, however, notice you had “how to make an HTML form without using tables” in the anthology.
I was quite impressed. Well, maybe not “quite quite,” but given the proper amount of tags I knew it could be achieved with CSS.
But like you said here, I think agree too that a complex form would perhaps be another form of ‘tabular data.’
I think you should write an article about “what qualifies as tabular data,” since I think most of us who have ‘gone tableless’ (
It has been argued that, when a form is complete, or perhap, if the data collected by the form is displayed in a table, the table contains tabular data but others feel that an empty form, which is what it is to start out with (for the most part), then it does not contain data and therefore does not contain tabular data.
Personally, I don’t have a problem creating table-free forms and that is what I do these days. Granted, most of my forms are fairly simple such as this one but I have created some more complex ones for entry and editing of data into a database.
Although one may use the [label] tag either implicitly [label]Label Text[input][/label] or explicitly [label for=“id”]Label Text[/label][input id=“id”], I find it easier to work with explicit [label] tags for formatting. I also find that I can require quite a few CSS rules just for the format of forms but the tradeoff is ease of redesign with the CSS and table-free layout.
I made the last comment on the article mentioned in your post. I’m still waiting for Garrett to get back to me with an example of a form that can’t be done without a table and wouldn’t be improved semantically 😉
If you haven’t read my article on Why Tables Are Bad Form take a peek now. I still stand by everything I wrote then.
The crucial thing to remember about tabulator data is: A cell gains extra semantic meaning from its position in the table. You can see it is related to the other cells in the same row, you can see how it relates to the same column in the other rows.
Take a calendar for example: All the Mondays are grouped together in a column. You can pick a day number and immediately know which day of the week it is. Likewise, you can tell which week number it belongs to and all the other day numbers within that week.
That’s tabulator data.
ertuzdul
sjoccldocgg