Replace HTML Table with Divs

Question

Alright, I'm trying to buy into the idea that html tables should not be used, and that divs should be. However, I often have code that resembles the following

<table>
<tr>
 <td>First Name:</td>
 <td colspan="2"><input  id="txtFirstName"/></td>
</tr>
<tr>
 <td>Last Name:</td>
 <td colspan="2"><input  type="text" id="txtLastName"/></td>
</tr>
<tr>
 <td>Address:</td>
 <td>
  <select type="text" id="ddlState">
   <option value="NY">NY</option>
   <option value="CA">CA</option>
  </select>
 </td>
 <td>
  <select type="text" id="ddlCountry">
   <option value="NY">USA</option>
   <option value="CA">CAN</option>
  </select>
 </td>
</tr>

I want the labels to be aligned and I want the controls to be aligned. How would I do this without using tables?

Answer 1

Here's a good read: Prettier Accessible Forms.

Answer 2

Basically it boils down to using a fixed-width page and setting the width for those labels and controls. This is the most common way in which table-less layouts are implemented.

There are many ways to go about setting widths. Blueprint.css is a very popular css framework which can help you set up columns/widths.

Answer 3

This ought to do the trick.

<style>
div.block{
  overflow:hidden;
}
div.block label{
  width:160px;
  display:block;
  float:left;
  text-align:left;
}
div.block .input{
  margin-left:4px;
  float:left;
}
</style>

<div class="block">
  <label>First field</label>
  <input class="input" type="text" id="txtLastName"/>
</div>
<div class="block">
  <label>Second field</label>
  <input class="input" type="text" id="txtLastName"/>
</div>

I hope you get the concept.

Answer 4

Please be aware that although tables are discouraged as a primary means of page layout, they still have their place. Tables can and should be used when and where appropriate and until some of the more popular browsers (ahem, IE, ahem) become more standards compliant, tables are sometimes the best route to a solution.

Answer 5

You can create simple float-based forms without having to lose your liquid layout. For example:

<style type="text/css">
    .row { clear: left; padding: 6px; }
    .row label { float: left; width: 10em; }
    .row .field { display: block; margin-left: 10em; }
    .row .field input, .row .field select {
        width: 100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -khtml-box-sizing: border-box;
    }
</style>

<div class="row">
    <label for="f-firstname">First name</label>
    <span class="field"><input name="firstname" id="f-firstname" value="Bob" /></span>
</div>
<div class="row">
    <label for="f-state">State</label>
    <span class="field"><select name="state" id="f-state">
        <option value="NY">NY</option>
    </select></span>
</div>

This does tend to break down, though, when you have complex form layouts where there's a grid of multiple fixed and flexible width columns. At that point you have to decide whether to stick with divs and abandon liquid layout in favour of just dropping everything into fixed pixel positions, or let tables do it.

For me personally, liquid layout is a more important usability feature than the exact elements used to lay out the form, so I usually go for tables.

Answer 6

It is good practice to put all form elements in a p tag.

<form>
    <legend>My Form</legend>
    <p>
        <label>Input label</label>
        <input type="text" />
    </p>
    <p>
        <button>Go!</button>
    </p>
</form>

Etc.