Tableless forms are painful. Every time I start trying to create them, I wonder why I am going through the motions. Some vague sense that it will be “more accessible” and I’ll be able to tick an abstraction of a “web standards-compliant” box. But really, these table-less constructs are supposed to make page authoring easier, not harder. In the case of forms, table-less CSS makes it much harder.
Here are some examples of popular blog articles explaining how to create table:
CSS-Only, Table-less Forms (Jeff Howden) “Most of the CSS-only, table-less forms available suck.” He’s talking from an aesthetic perspective, not programming perspective whose suckiness I speak of here. What he does though, is show how to make a pretty form. The rub is over 300 lines of standard-formatted CSS, let alone the HTML. He does a good job, and I have no reason to question that the 300 lines is required; it’s a sad reflection of what’s required to make a neat form, albeit a fairly complex one.
A List Apart on Accessible Forms A more pedestrian tutorial on the basics of table-less forms. Weighing in at a mere 46 lines of CSS.
Using a table and just a handful of CSS lines, you can achieve pretty similar stuff. It won’t get an accessibility auditor’s magic tick, even though it will probably be quite accessible. It won’t be a semantically valid structure either. That won’t actually bother your users or any modern search engine, but if the thought scares you, you should get started with those floats and clears. For all these problems, you’ll be rewarded with one great benefit: you’ll be able to build it in a matter of minutes.
For typical forms where you want to be agile and get the thing published, stick with tables.
11 responses so far ↓
1 Michal Talaga // Feb 12, 2007 at 8:36 am
Cannot agree more with you. I have my opinion on layouts also. I have yet to see a working 2 columns layout made in css. I have seen dozens of tutorials and NONE of them worked. Sometimes they are fixed width, which sucks in my opinion, but most often they put a footer wrong i.e. it is not below all columns but under one only. I have merged few of the layouts and got it to work finally on IE. Now I have problem with FF.
And to do all of that I need a LOTS of CSS and a LOTS html. This of course gives me nothing, because I cannot just switch the way it looks by replacing the CSS file. 90% of the layouts use float, which as you know depends on the element’s position in the html flow. Which makes the CSS bubble pop.
All of this just to replace a very clean 2 column - table layout.
Or maybe I’m not smart enough? That could also be an explaination. I wonder though, why it is so damn hard to find a ready solution for such a simple thing!!!
2 Michael Schuerig // Feb 12, 2007 at 12:22 pm
Calling the example form by Jeff Howden “complex” is a gross overstatement. Essentially, it consists of a single column of input elements with adornments on the left an right. I agree wholeheartedly, the the required CSS is grotesquely complex for what little it achieves. How about a multi-column form with resizing input elements?
I don’t at all intend to denigrate Jeff’s work. To my mind it showcases how ill-suited CSS, at least up to and including version 2.1, is for web applications, in contrast to web sites and Zen Garden-like pretty pages.
3 Thomas Messier // Feb 12, 2007 at 12:58 pm
I reached that same conclusion. After wasting a lot of precious time trying to do more complex designs without tables, I realized that I had no desire to be a purist and stick with the tables-for-tabular-info-only rule.
4 PohEe.com // Feb 15, 2007 at 1:25 am
I like Tableless-Form so much. But I agreed that sometimes really frustrated to use it.
5 DragonI // Feb 23, 2007 at 7:14 pm
I totally agree with you. Theory and standards are great until you actually have to code it and find yourself going WTF when testing. The productivity lost isn’t worth it. Professionally, we can do the best we can but clients only care that we meet our deadlines.
HTML and CSS standards are ending up exactly where the SQL standards are at. At least DB vendors have to specify what level of SQL their product supports. Browser vendors should be made to do the same. It’s my dream of course.
Someone at the W3C should be allowed to stick a cattle prod into CEO’s of vendors who do not comply (i.e. MS). There’s no use having standards, if they can’t be enforced.
Ah, I feel better now
6 Eden Ridgway // Mar 30, 2007 at 6:05 am
You’ve echoed my exact sentiments on the whole tableless form layout design decision. Having been down that road on too many occasions it is pretty apparent that as developers we make our own lives difficult. We need to refocus on business value and delivery time. Does your client actually care whether or not your site is accessible? This is particularly true if you are developing intranet applications. Is there a real benefit to investing the extra time required to deal with fiddly css issues? Sometimes the answer be yes, but I suspect that most often it is really no.
7 Don // Apr 20, 2007 at 2:19 pm
Agreed. I sometimes feel like the table-less way can produce rather awkward HTML/CSS.
Regarding the accssibility issue, maybe if we could provide screen readers (or such) some hints/annotations in our HTML to indicate to it things like ‘this TABLE is for structure and format only and does not express tabular data or other context, please report it instead as a such-and-such (or just don’t even mention it)’. Maybe this is already possible? Have to check.
8 Hone // May 25, 2007 at 7:03 am
Since I never really bothered to learn table based layouts - fieldset with css layout is far easier and faster for me.
9 Katy G. B. // Jun 7, 2007 at 9:28 pm
more compassion, less crying,
first, those ‘few extra points’ for making your form compliant &accessible. this effects real people, real people!
welcome to stylesheets, new standards, and decent design. i don’t see those examples of how using stylesheets for a three column, or two as you wrote is ‘harder’. first, yeah there is a decent amount of css in those examples. but for starters its all mostly styles for making the display not suck. a great deal of any of those css examples could be cut out and have a fully functional multiple column form. albeit one that looks more like an old form to mail form than anything professional.
this is one of the most pathetic whiny lil posting ever. to be honest; i think everyone is way over thinking this. css makes this easier! yeah, i’ll say it again: css makes multiple column display easier! and if it doesn’t you’re either making it more complicated than it needs to be.
the truth is prolly more like that you’ve been designing your layouts wrong all along and you’ve just now found that out. but your apparently huge egos would rather just say “they’ve made it to hard” than admit &accept the truth that “you’ve done it work”.
10 Herman van der Blom // Jul 3, 2007 at 1:57 pm
I have tried a multi-column layout without tags and indeed it sucks. CSS is not yet capable enough to do the job right. Yes you can do it, but it does not feel right the way it is implemented. So right now I implement my projects with fieldsets but if needed i put them in a table to get a multi-column layout. Its easy, its readable and maintainable, so what more do I want. Compliancy? Not at any cost!
11 Bhagwad // Sep 25, 2007 at 11:01 am
I’ve tried to use CSS layouts instead of tables. And my idea is that it’s just too unintuitive. If CSS is all that great as they say it is, then they have to make it easier to use.
Maybe we need a new tool just to structure layout. Creating forms with CSS just shouldn’t be so unintuitive as it is the most common of all web design components.
Leave a Comment