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

The general principle is that you want to use whatever HTML elements best convey the semantic content that you are intending and then rely on css to visually represent that semantic content. Following that principle buys a lot of intrinsic benefits including easier site-general visual changes, search engine optimization, multi-device layouts, and accessibility.

So, the short answer is: you can do whatever you want, but best practices suggest that you only use table tags to represent tabular data and instead use whatever html tags best convey what it is that you are trying to represent. It might be a little harder initially, but once you get used to the idea, you'll wonder why you ever did it any other way.

Depending on what you are trying to do with your form, it shouldn't take that much more markup to use semantic markup and css, especially if you rely on the cascading properties of css. Also, if you have several of the same form across many pages in your site, the semantic approach is much more efficient, both to code and to maintain.

Answer 2

Yes, it does apply for form layouts. Keep in mind that there are also tags like FIELDSET and LABEL which exist specifically for adding structure to a form, so it's not really a question of just using DIV. You should be able to markup a form with pretty minimal HTML, and let CSS do the rest of the work. E.g.:

<fieldset>
    <div>
         <label for="nameTextBox">Name:</label>
         <input id="nameTextBox" type="text" />
    </div>
    ...
</fieldset>

Answer 3

If you just need a simply row column grip type layout you shouldn't feel guilty using tables. I don't know how anyone can call that 'bad design' just because it's not CSS. I've seen many bad CSS based designs. I love CSS and think it far superior in many ways to traditional nested table layouts, but do what works bests and what is easiest to maintain and move onto more important, more impactful decisions.

Answer 4

If your forms are laid out in a tabular format (for example, labels on the left and fields on the right), then yes, use table tags.

Answer 5

I use CSS mostly until CSS becomes a drag. For example it's a lot easier to create a 3+ column (3 sets of label + form field) form using a table than in css. I couldn't get the layout to look properly in all major browsers using pure css and I was spending too much time getting it to work. So I said screw it and I did it easily using a table. Table are not bad.

Answer 6

To make forms as accessible as possible and semantically correct, I use the following format:

<fieldset>
  <ol>
    <li>
      <label for='text_field'>Text Field</label>
      <input type='text' name='text_field' id='text_field' />
    </li>
  </ol>
</fieldset>