Tablelike Definition Lists

I’ve not yet mentioned it here, but I really like Definition Lists for anything that has basically the form of key/value-pairs. For example personal information:

<dl>
  <dt>Name</dt>
  <dd>John Doe</dd>
  <dt>Address</dt>
  <dd>...</dd>
</dl>

And of course, forms, which to me are also key/value-pairs (field description to field):

<dl>
  <dt><label for="name">Name</label> </dt>
   <dd><input type="text" name="name" id="name"> </dd>
  <dt><label for="password">Password</label> </dt>
   <dd><input type="password" name="password" id="password"> </dd>
</dl>

And, when for styling reasons better separation between the pairs is necessary (this is where definition items (<dl>) will come in handy), even:

<dl>
  <dt><label for="name">Name</label></dt>
   <dd><input type="text" name="name" id="name"></dd>
</dl>
<dl>
  <dt><label for="password">Password</label></dt>
   <dd><input type="password" name="password" id="password"></dd>
</dl>

This is, to me, the most meaningful way of writing form elements and it usually renders quite nicely. The only problem that I constantly encounter is that a lot of people want forms to look like tables with the description on the left, and the field on the right. To this end I’ve written a CSS-Class which does exactly this: displaying our definition lists as if they where tables.

Introducing tablelike definition lists

/*forms*/
form.tablelike dt,
form.tablelike dd,
dl.tablelike dd,
dl.tablelike dt{
	margin-top:0.5em;
	float:left;
}
 
form.tablelike dt,
dl.tablelike dt{
	min-width:30%;
	clear:both;
}
 
form.tablelike dd,
dl.tablelike dd{
	width:60%;
	padding:0;
	margin:0;
}
 
form.tablelike dl:after,
dl.tablelike:after{
    visibility: hidden;
    display: block;
    content: ".";
    clear: both;
    height: 0;
}
 
form.tablelike dl,dl.tablelike {
  display: block;
}
 
/* ie6 */
 
* html form.tablelike dl,
* html dl.tablelike{
	height: 1%;
}
 
* html form.tablelike dt,
* html dl.tablelike dt{
	width:30%;
}
/* end ie6 */

[View the demo]

Simply add a “tablelike”-class to your <form> or <dl>1 and of you go. Note that it’s always best to put the IE6-part into a separate IE6-stylesheet.

I’ve personally used this technique on several projects and it so far works quite nicely. There are issues however:

  • It is – by far – not so robust as a “real” table, meaning it breaks a lot easier
  • It does not really work for checkboxes, radio-buttons and the like
  • There is currently no real good solution for additional data to form elements (like an additional explanation, validation errors and so forth)

This works in Firefox 2+, IE6+, Opera 9+ and Safari 3+.

As always: use it if you feel its useful, and share it if you could improved it.

  1. or adjust this CSS to any other class you already have, whatever floats your boat [↩]