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:


  
Name

  
John Doe

  
Address

  
...

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

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

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> ((or adjust this CSS to any other class you already have, whatever floats your boat)) 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.