CODEWITHSUNDEEP
htmlcsshtml-listsmultiple-columns
Thor Chr. Jacobsen
Thor Chr. Jacobsen

Reputation: 3

Tabular ordered list

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?

Upvotes: 0

Views: 258

Answers (2)

reisio
reisio

Reputation: 3242

The table element.

Upvotes: 0

Joseph Marikle
Joseph Marikle

Reputation: 78520

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) ". ";
}

Upvotes: 1

Related Questions