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; }