Table-less Forms: Are They Really That Hard?

I probably don't need to explain the love-hate (and in many cases, just plain hate) relationship Web designers have with tables. If you don't believe me, a Google search turned up this lovely presentation on presentational tables that explains the issues in a much less hot-headed fashion than what I've typically seen before. What I usually read boils down to "Tables are evil, and you should never use them."

Naturally, this presents a few problems: Some things that are easy to do with tables and presentational HTML are much harder to do with CSS and purely semantic markup. For instance, the A List Apart article, Practical CSS Layout Tips, Tricks, & Techniques outlines a few of them and offers some solutions. There's just one thing that I have yet to see done to my satisfaction: Forms.

Every technique I've ever seen for table-less forms has the problem of sacrificing some of the functionality you get with a table. Sure, they can put labels and fields on the same row and even make sure the fields all line up together. However, most of them use either a fixed width or a percentage width for the label column. A table, on the other hand, will resize the columns to fit the content.

Worse still, some of the supposedly more semantic approaches introduce extra markup. The A List Apart article linked above gives us this mess:

<div style="width: 350px; background-color: #cc9;
border: 1px dotted #333; padding: 5px;
margin: 0px auto";>
  <form>
    <div class="row">
      <span class="label">Name:</span><span
class="formw"><input type="text" size="25" /></span>
    </div>
    <div class="row">
      <span class="label">Age:</span><span
class="formw"><input type="text" size="25" /></span>
    </div>
    <div class="row">
      <span class="label">Shoe size:</span><span
class="formw"><input type="text" size="25" /></span>
    </div>
    <div class="row">
      <span class="label">Comments:</span><span
class="formw">
        <textarea cols="25" rows="8">
        Go ahead - write something...
        </textarea>
      </span>
    </div>
  <div class="spacer">
  &nbsp;
  </div>
 </form>

</div>

Admittedly, that article is ten years old, which probably explains why it's a rather extreme example. But come now, <span class="label"> rather than just <label>? Inline styles? More importantly, <div class="row">? Isn't that awfully similar, structurally speaking, to a table? I thought part of the objective was to trim the fat from the code, and this doesn't have too many fewer tags than a table. To be fair, a more recent article from 2006 does a better job (though I'm not sure why the author chose an unordered list), but still doesn't solve the width problem.

Now some people will tell you that there's no problem with using tables to lay out forms. After all, they really are tabular: Labels get one column, form fields get another. The label refers to the form field on the same row. Besides, if you look at a real form, i.e. one made of ink and paper, it looks like a table. Besides, they're quick and simple to create, which is no small consideration when time is a factor.

I agree, to a point. I've certainly used tables to line up forms before, and I feel no remorse. Even so, it's not a perfect solution. For one thing, while you can make a case that forms are tabular enough to excuse the use of tables, that isn't really the most semantic way to do it. For another, you're still stuck with table markup and form markup.

What I really want is a method that will line everything up the way a table does, stretch or shrink the label column to fit the text, and minimize the extra HTML. To reiterate, I have never seen a solution that does this, though that may very well be because I haven't looked very hard. It seems like it shouldn't be too difficult to create such a solution.

So I think I will. Stay tuned.