css - Is it acceptable to use tables for forms? Or is it still more correct to use divs?

Question

I'm wondering whether it's acceptable to use tables for forms.

Strictly speaking, name/value pairs are tabular data, aren't they? And a form is just a user customisable set of name/value pairs. So is it right to use tables in this case? Or should I use divs styled with CSS?

Answer 1

Try fieldsets

I prefer to break up the fields into logical <fieldset>s with one <legend> each, because:

• The code is less cluttered
• The default formatting is user-friendly (I especially like how the legend displays)
• It's easy to style with CSS

Here's a code example. Note that the labels' for attribute lets you click that label to move focus to the input specified (it matches the id attribute).

<form>
  <fieldset>
    <legend>Wombat Statistics</legend>
    <ol>
      <li>
        <label for="punchstrength">Punch Strength</label>
        <input id="punchstrength" name="punchstrength" />
      </li>
      <li>
        <label for="beverage">Favorite Beverage</label>
        <input id="beverage" name="beverage" />
      </li>
    </ol>
  </fieldset>
  <fieldset>
    <legend>Questions That Are Too Personal</legend>
    <ol>
      <li>
        <label for="creditcard">What is your credit card number?</label>
        <input id="creditcard" name="creditcard" />
      </li>
      <li>
        <label for="gullibility">Did you actually fill that in?</label>
        <input id="gullibility" name="gullibility" />
      </li>
    </ol>
  </fieldset>
</form>

For a basic layout, you can use something like:

label, input, textarea, select { 
  display: inline-block; vertical-align: top; width: 30%; 
}

See this article for a more in-depth tutorial.