Definition Lists As Tables
Friday, November 03, 2006
I was looking to style a definition list in a two-column table format yesterday and in the process I found this great little resource at MaxDesign (scroll down the page). Anyway, after looking at the Styling a definition list to look like a table, I decided the article was missing a trick. You'll note that if you try and alternate the background colour of the list, blotches of colour are left out if the definition text runs to two lines or more.
My solution is as follows:
<dl
class="display-as-table">
<dt>Football</dt>
<dd
class="odd-row">Football is the name given to a number of different team sports. The most popular of
these is Association Football (also known as soccer).</dd>
<dt>Rugby
Union</dt>
<dd>Rugby union is a team sport that was developed from the rules used to play football at
Rugby School in England. Two teams, each of 15 players have the task of outscoring the opposing
team.</dd>
<dt>Test Cricket</dt>
<dd class="odd-row">Test cricket is the
longest form of the sport of cricket. It is regarded by players and serious fans as the ultimate test of playing
ability.</dd>
<dt>Ultimate Frisbee</dt>
<dd>A game between two teams whose players try
to toss a Frisbee to one another until they cross the opponents goal.</dd>
<dt>Field
Hockey</dt>
<dd class="odd-row">A game that is played on an open field. Two opposing teams
use curved sticks try to drive a ball into the opponents' net.</dd>
</dl>
I have
used class names on each alternate <dd> tag, however with a bit of ingenuity, I'm sure it can be
achieved otherwise. Note you don't need to apply the odd-row classes to the corresponding
<dt> tags.
The CSS required is as follows:
dl.display-as-table {
border: 1px solid #485699;
border-width:
1px 0;
width: 40em;
}
dl.display-as-table dt {
float: left;
width: 10em;
padding:
0.5em;
font-weight: bold;
}
dl.display-as-table dd {
padding: 0.5em 0.5em 0.5em 11em;
margin:
0;
}
dd.odd-row {
background: #F2F2F2;
}
The final result is scalable and works in Safari, Internet Explorer 5+ (Win), Firefox and Opera. Click here to view the finished stripy definition list 'table'.
Additional things to try are adding a .odd-row:hover class
to provide some focus, but the only 'hit' area will be the <dd> block, and so hovering on the
<dt>'s won't trigger it.