-1

I sometimes hear that people don't use table anymore to format their form, is this beginning to be a trend that is left behind? why and why not?

adit
  • 32,574
  • 72
  • 229
  • 373

3 Answers3

8

Semantically speaking, a table should contain tabular data. In this sense, there's nothing wrong with using a table tag.

Where it goes wrong is when people start using tables for layout, which they do because it's easy. Page layout is not tabular data, and therefore should not, semantically, be in a table tag.

You can do it and it will work, but you can also eat custard cold and it will work. The idea is more about doing it properly than just doing it.

In an ideal world, you'll be able to generate your form using <fieldset>s, <label>s and other form-related tags.

<label for="usernameID">Username:</label> <input type="text" name="username" id="usernameID" />

Then you can style the label and the input, and you have no fluff in your HTML.

In reality, you'll probably end up wrapping things in <div>s and <span>s, but just try to keep it sensible and not go over the top with them. If you ever think "I have actually got quite a lot of non-form tags in this form" there's probably a better way to do it (although your way may well still work).

Joe
  • 15,669
  • 4
  • 48
  • 83
  • so then what do you use to get the same looks of a table when creating a form? I guess that's my most important concern – adit Sep 10 '11 at 01:29
  • Funny, I was halfway through editing the answer with this, then thought "Nah, leave it" haha. 2s, going back to editing it. – Joe Sep 10 '11 at 01:30
3

A few reasons:

  • Markup should be semantic. This means that the elements in your markup should say something meaningful about your content. A paragraph should be in a <p> tag, a heading in <h1> through <h6>, etc. A <td> tag, by contrast, tells you nothing meaningful about, for instance, a <label>. On the other hand, if you are creating, say, a representation of the periodic table of the elements, a <td> tag is very appropriate.

    HTML 5 continues and strengthens this trend, as now we also get new elements like <nav> and <section> to make the connection between markup and content even tighter.

  • Tables are a pain to style and maintain. If you have an <input> inside of a <label>, and you have THAT inside of a <td> inside of a <tr> inside of a <tbody> inside of a <table>, well, that's a whole bunch of nested elements - and who wants to deal with that? Keep nesting to a minimum, and your CSS becomes less convoluted, and your markup easier to read.

Community
  • 1
  • 1
Philip Schweiger
  • 2,714
  • 1
  • 18
  • 27
0

Using tables for anything that isn't tabular data would be a generally inappropriate use. This is mostly because a table doesn't give any semantic meaning to something that wouldn't normally be put in a spreadsheet.

It's easy to use a table to format a form, especially if you're used to it, but it would be a better practice to use something else that better describes the data you're putting in it.

jgillman
  • 588
  • 6
  • 14