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

Answer 1

Both are correct.

I preffer using some div/li, as that allows me to make some different layouts, but tables for forms are not frowned upon.

Actually, by default, Django gives you table formated forms.

Answer 2

After being the biggest anti table person you can imagine I've started to realize in the end it doesn't matter. Use what's quickest. Of course if you are nesting tables then you have a problem but generally I can't think of a easier way to layout forms. At the end of the day does the client or the visitor give two hoots about whether you used a table or a list?

Answer 3

Forms can be or feel tabular, but tables imply a "presentation" along with the semantics. Marking up a form in a table tends to lock the design into a 2-across, field/input layout (assuming you don't want to spend time overriding the table's CSS). Furthmore, you may have to override the styles if you are trying to account for small screens such as mobile phones.

Furthermore, a screen reader will over-announce this form with, "Row 1, column 1, label, 'Name', column 2, input, 'Name'..." instead of simply, "Input, 'Name'..."

My recommendation is to use DIVs, FIELDSETs, or ULs/LIs. This leaves the presentation in the hands of CSS, exactly where it belongs.

Answer 4

A form isn't tabular data.

It's so easy to lay out form elements with CSS, I don't see any value worth obfuscating the markup with tables. Personally, I find that laying out forms with CSS is easier than using tables at this point. For example:

HTML:

<fieldset>
  <label for="FirstName">First Name</label>
  <input type="text" id="FirstName" />

  <label for="LastName">Last Name</label>
  <input type="text" id="LastName" />

  <label for="Age">Age:</label>
  <select id="Age">
    <option>18-24</option>
    <option>25-50</option>
    <option>51-old</option>
  </select>
</fieldset>

CSS:

fieldset {
  overflow: hidden;
  width: 400px;
}

label {
  clear: both;
  float: right;
  padding-right: 10px;
  width: 100px;
}

input, select {
  float: left;
}

Using simple variations on that theme, you can make great-looking, accessible forms that are actually easier to work with than tables anyway. I've used that basic approach and ramped it up to some fairly complex, multi-column data entry forms too, no sweat.

Answer 5

you can use whatever you want, it just that it is a new standard for making the layout of the html forms, and it's kinda like a rule not use table tags for design, but it's still ok to use tables for displaying a table of data (grid)

Answer 6

It's important to use labels with the 'for' attribute for screen readers (for usability).

That is why I use fieldsets