Tables – The Secret Behind Every Simple CSS Form

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.

20 thoughts on Tables – The Secret Behind Every Simple CSS Form

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

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

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

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

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

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

  9. Wrong.

    I haven’t seen the above tutorials, but I get perfect forms every time with only one line of css, no floats, and one ie specific hack [which is not even needed for IE8.

    Took me a few hours way back when, to get it right. Tested in all major browsers and it seems to just work (example in the download builder at http:// siteroller.net/projects/moorte/download.php, though that page has enough other things that might mess up the formatting.)

    If someone would help me publicize it, i would write a tutorial myself.

  10. Sam, please do write a tutorial – we all need one. Ideally, I’d like something with a few basic guidelines so that I could write a form from scratch myself without having to cut-and-paste.

    As for publcising, I’ll certainly point people to it here or via Twitter if you could do that.

  11. After some thought, Ive decided to break up into a 3 part tutorial. 1) Pretty forms; fixed and simple fluid layouts. 2) Fluid layouts; Borders, padding and margins 3) Mixing fixed and percentage based columns

    The goal is to explain how to do cross-browser 3 column “holy grail” layouts without using floats, tables, extra markup, or more than 4 lines of CSS.

    Check it out, leave comments at: http://siteroller.net/articles/3-column-no-tables-no-floats/pretty-forms-1.php

    Or contact me by mail.

  12. I’ve added part two and changed some of what was earlier written.

    The article is here: http://siteroller.net/articles/3-column-no-tables-no-floats/

    It now covers fixed and fluid length elements, forms, and layouts. Next is the combination of the fixed and fluid length columns [without hacks or floats], but I would first like to get your overall impression and feedback before putting any more time into this. The earlier link has some specifics.

  13. CSS is a great time-saver in some cases, but in other situations it is more trouble than it’s worth. A lot of fuzzy idealism went into the W3C recommendation, and it was written years before any implementations existed. It was not possible to know which parts were impractical until many years after the words were set in stone. For so many reasons – some good and some bad – we have to be pragmatic and make compromises in web design. This includes using tables where they are a more realistic tool than CSS layouts, and vice versa. Eventually a new system will completely replace this hodge podge of HTML/CSS/JS, but until then we must make the best use of what we have.

  14. Pingback: Creating Forms: Pure CSS vs Table Based

Leave a Reply