Best practice for form layout in html -- table or flow?

What is considered the best practice for laying out forms in html? Specifically where you have a set of fields with labels, and possible error indicators. The best I can do is use a table, but that doesn't work real well in a css oriented layout design. For example:

<table>
  <tr>
    <td>N开发者_如何学Pythoname:</td>
    <td><input type="text" /></td>
    <td style="display: none" id="NameError">*</td>
  </tr>
  <tr>
    <td>Phone:</td>
    <td><input type="text" /></td>
    <td style="display: none" id="PhoneError">*</td>
  </tr>
  <tr>
    <td>Birthday:</td>
    <td><input type="text" /></td>
    <td style="display: none" id="BirthdayError">*</td>
  </tr>
</table>

This doesn't seem very CSS, but I am not sure how to use a css oriented layout to make this work right.

What would be considered best practice?

I don't know about you guys, but I don't use much markup for form layout.

Here is the markup for a simple log in form (no layout markup i.e. divs, tables, etc)

<form method="post">
    <label>Username</label>
    <input type="text" name="username" />

    <label>Password</label>
    <input type="password" name="password" />

    <input type="submit" name="Log In" />
</form>

Here is CSS for the form

label,input{float:left}
label,input[type="submit"]{clear:left}

Here is the result

The amazing thing about this is:

• Lack of markup
• Lack of CSS
• Flexibility

If you look at the css, the label element is being cleared left (and floated left). Meaning that the label will float with its fellow inputs however every label will be a new line.

This makes it VERY EASY to add extra inputs. Even validation messages after inputs

Take this form for example

<form method="post">
    <label>Name</label>
    <input type="text" name="username" />

    <label>Password</label>
    <input type="password" name="password" />

    <label><abbr title="Date of Birth">D.O.B.</abbr></label>
    <input type="text" name="dob_day" />
    <input type="text" name="dob_month" />
    <input type="text" name="dob_year" />

    <input type="submit" name="Log In" />
</form>

With this CSS

label,input{float:left}
label,input[type="submit"]{clear:left}
input[name^="dob_"]{width:44px;margin:2px}
label{width:70px}

We get

It really is that simple :)

Using this concept, you create a huge number of possibilities, and you'll never have to use a table for layout again!

Use actual <label> elements for field labels, which is good for usability too, and style them appropriately using CSS.

For instance,

<label for="name">Name</label> <input type="text" name="name">

Then in your CSS, you could style LABEL elements with, e.g., display:block and a width of your desire, and appropriate clear values.

For tickbox / radio inputs, the input itself should be inside the <label> element - this means that the label itself should be clickable to select that input, for instance:

<label for="mycheckbox"> <input type="checkbox" name="mycheckbox"> Tick me if you dare</label>

One can argue a form is tabular data, so a table is acceptable. As David states, they main issue is that you want to use proper LABEL tags.

In your example, I'm not sure what you gain from using a table over CSS, though.

Best Practice = NEVER use table for layout.

You can try CSS framework like blueprint our 960 grid system.

"Best Practice" would be to use a table for what it's meant to do (represent data) and use a combination of div, span or other elements to style your input form.

Posting my answer to your follow up question here as it is likely to get closed as a duplicate.

I'm not sure how good the browser support on this is, tested in FF4: http://jsfiddle.net/shanethehat/7h3bC/11/

<div id="tableForm">
    <div class="tableRow">
        <div class="tableCell">
            <label for="mycheckbox">  Tick me if you dare</label>
        </div>
        <div class="tableCell">
            <input type="checkbox" name="mycheckbox" id="mycheckbox">
        </div>
    </div>
    <div class="tableRow">
        <div class="tableCell">
            <label for="mytext">  Give me some text test test</label>
        </div>
        <div class="tableCell">
            <input type="text" name="mytext" id="mytext">
        </div>
    </div>
</div>


div#tableForm {
 display:table;   
}
div.tableRow {
  display:table-row;  
}
div.tableCell {
    display:table-cell;   
    width:inherit;
}

Yes, I know, I've just created a table using divs. The point though is that this is nicely accessible and semantically proper.

Edit: fails miserably in IE7 where fixed width would be the only way, but 8 and 9 seem OK.

Edit2: switched the label/fields around and set right align: http://jsfiddle.net/shanethehat/7h3bC/12/. The markup is getting a little class heavy at this point. :first-child would be an alternative to using the left class, but at the expense of IE8.