A Table for Two, Please

Summary

CSS makes it easy to show labeled data in a tabular format: your content retains semantic meaning while avoiding the clutter and overhead of tables.

Take a number, then take a seat

For years, I've used tables for quick, painless layout. I threw graphics and text at the table, and the browser figured it all out. I knew the content wasn't tabular (remember making boxes with rounded corners using a table?), but I didn't care: it rendered properly and the paying client was happy. I was addicted to tables.

CSS made it possible for me to kick my table addiction. It's taken time, and I've gone back to tables for particularly tricky problems on a tight deadline, but my code is much healthier now.

When to use

When you want to show the user labeled data, but laid out in a tabular format. The data you want to show can either be static, or it can be input fields for the user to complete.

How to use

We'll first start with your markup, where there are two variations on a theme. The first variant is when you wish to show static text:


<div class='form'>
<div><label for='variable'>Label</label><span id='variable'>Value</span></div>
</div>

The second variant is when you want to collect information from the user:


<form action=''>
<fieldset>
<div><label for='variable'>Label</label><input id='variable' /></div>
</fieldset>
</form>

Notice the themes running through both:

Begin with a container element (<form><fieldset> or <div class='form'>)
Contain one (or more) rows surrounded by <div>
A label (<label>) proceeds the data
Specific content (<span> or <input>) for the data

Now, the CSS to structure the semantic:


div.form label, form label {
  /* the layout */
  display: block;  /* treats the label as a positionable unit */
  float: left; /* to put label on the left of the value; might want right for some languages */

  /* the look */
  width: 5em;          /* how wide the label should be (effectively a default) */
  margin-right: .25em; /* space between the label and the value */
  text-align: right;   /* labels should right align for easier reading */
  font-size: smaller;  /* any other styles */
}
div.form div, form div {
  clear: both; /* to clear the float after each row */
}

The only remaining trick is to ensure, if needed, that the width of the labels matches the content of the labels. For example, the default set in the style sheet (5em in the above) may not be enough for a very long label, so you'd need to override the label for the forms with the longer labels.

See the attached file for a concise example.

Variants

Instead of applying with form, since a form has its own contextual meaning, and since I may want to avoid other layout additions to form, the same affect can be reached with this:


.twoColumnLayout div {
    clear: both; /* to clear the float after each row */
}
.twoColumnLayout label {
    /* the layout */
    display: block;  /* treats the label as a positionable unit */
    float: left; /* to put label on the left of the value; might want right for some languages */

    /* the look */
    width: 5em;          /* how wide the label should be (effectively a default) */
    margin-right: .25em; /* space between the label and the value */
    text-align: right;   /* labels should right align for easier reading */
    font-size: smaller;  /* any other styles */
}

and then, for example:


<form class='twoColumnLayout'>
<div><label for='variable'>Label</label><input id='variable' /></div>
</form>