Is it bad design to use table tags when displaying forms in html?

Question

I keep hearing that div tags should be used for layout purposes and not table tags. So does that also apply to form layout? I know a form layout is

Answer 1

It's certainly easier to use table than div to layout a table, but keep in mind that a table is supposed to mean something - it's presenting data in a regular way for the user to see, more than putting boxes on the screen in a given order. Generally, I think forms layouts should use divs to decide how the form elements are displayed.

Answer 2

One thing that I don't often see discussed in these form layout questions, if you've chosen a table to layout your form (with labels on the left and fields on the right as mentioned in one of the answers) then that layout is fixed. At work we recently had to do a quick 'proof of concept' of our web apps in Arabic. The apps which had used tables for form layout were basically stuck, whereas I was able to reverse the order of all the form fields and labels on all my pages by changing about ten lines in my CSS file.

Answer 3

Most of the answers I've seen here seem appropriate. The only thing I'd add, specifically to apathetic's or Mr. Matt's is to use <dl>/<dt>/<dd>. I believe these represent the list semantically.

<dl>
  <dt><label for="nameTextBox">Name:</label></dt>
  <dd><input value="input value" type="text" name="fieldName" id="fieldName" /></dd>
</dl>

You might want to restyle these, but this says semantically what's going on, that is you've got a list of "terms" (<dt>) and "definitions" (<dd>), with the term being the label and the definition being the user entered values.

Answer 4

A form is not "presentation", you ask for data, you do not usually present data. I use a lot of inline editing in tabular data. Obviousely i use the datacells - td as holders for the input elements when switching from presentation to input.

Answer 5

I think it's a myth that forms are "difficult" to layout nicely with good HTML and CSS. The level of control that CSS gives you over your layout goes way beyond what any clunky table-based layout ever would. This isn't a new idea, as this Smashing Magazine article from way back in 2006 shows.

I tend to use variants of the following markup in my forms. I have a generic .form style in my CSS and then variants for text inputs, checkboxes, selects, textareas etc etc.

.field label {
  float: left;
  width: 20%;
}

.field.text input {
  width: 75%;
  margin-left: 2%;
  padding: 3px;
}

<div class="field text">
  <label for="fieldName">Field Title</label>
  <input value="input value" type="text" name="fieldName" id="fieldName" />
</div>

Tables aren't evil. They are by far the best option when tabular data needs to be displayed. Forms IMHO aren't tabular data - they're forms, and CSS provides more than enough tools to layout forms however you like.

Answer 6

It's a grey area. Not everything in markup has clearly defined boundaries, and this is one case where you get to use your personal preference and make a judgement call. It doesn't quite fit the idea of data being organised, but the cells are related across multiple axes, and that's the rule of thumb I use to decide whether something fits in a table or not.