Question

I need to make an ordered list with tabular content that renders something like this:

1. Winner         00:00
2. Runner up      00:00
3. Looser         00:00

Now, I’ve managed to do this using the following HTML:

<ol>
    <li><dl><dt>Winner</dt><dd>00:00</dd></dl></li>
    <li><dl><dt>Runner up</dt><dd>00:00</dd></dl></li>
    <li><dl><dt>Looser</dt><dd>00:00</dd></dl></li>
</ol>

and CSS:

dt {
    display: inline-block;
    width:   5em;
}
dd {
    display: inline-block;
}

which renders correctly in the latest Chrome, Safari and Firefox. I don’t know about IE.

However, it doesn’t feel right. Are there a more semantic approach to solving this problem using HTML and CSS only?

Answer 1

As far as CSS semantics, this is definitely not a good thing to do. (for one thing I can’t seem to get it to work in chrome). Because this is tabular data, it should be placed in a table. As for automatic incrementation, you could use the css count attribute:

Demo

table{counter-reset:number;}

table tr td:first-child:before
{
    counter-increment:number;
    content:counter(number) ". ";
}