It's not news to any web developer that table-based layouts are way out of style. Tables were originally intended for tabular data, or data in which the rows are related to each other.
There is a case to made for tables though.
- The columns automatically size to make the best use of horizontal space available.
- There are many JavaScript solutions available for quick sorting of table rows.
- They provide a solution for displaying multiple columns of data without the use of CSS.
But, if the none of the above apply to your particular set of data, you might find yourself more comfortable inside the definition list (DL). The definition list makes sense, in most cases, where the data values are unrelated to each other.
For instance, if you were to display a list of temperature highs and lows for each day over the past month, a three column table makes sense, as the only unit is temperature, and it makes for easy sorting of the data.
However, if you are displaying information about a person (height, weight, age, etc.), the units are completely unrelated (inches/feet/meters, lbs/kg, years, etc), and hence gain no value from being placed in a table.
The definition list however, was designed for this type of information. Each definition list can contain children called terms (DT) and definitions (DD). It's easy to see the maintenance advantage over tables:
<dl>
<dt>Name</dt>
<dd>Bob Smith</dd>
<dt>Height</dt>
<dd>5'7"</dd>
<dt>Age</dt>
<dd>33</dd>
</dl>
With just a little CSS, we can even mimic the look of a table:
dl { margin-bottom: 50px; }
dt { float: left; font-weight: bold; padding: 5px 10px 5px 0; width: 100px; }
dd { padding: 5px 0; }
A little note on the styling. If you plan on having multi-line definitions, you may want to add some left margin to the <dd> styles, equal to the width + margin + padding of the terms, i.e.
dd { margin: 2px 0 0 110px; }
It may also be worth mentioning that it's likely services like Google's "define:" use this type of semantic markup to index their results.
Make a definition list appear more like a table:
dl.grid { border: 1px solid #333; border-top: 0; }
dl.grid dt, dl.grid dd { padding: 4px 6px; }
dl.grid dt { float: left; font-weight: bold; width: 200px; border-top: 1px solid #333; }
dl.grid dd { margin: 0 0 0 212px; border-left: 1px solid #333; border-top: 1px solid #333; }