Табличный упорядоченный список

Question

Мне нужно составить упорядоченный список с табличным содержимым, который выглядит примерно так:

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

Теперь мне удалось сделать это, используя следующий 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>

и CSS:

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

, который корректно отображается в последних версиях Chrome, Safari и Firefox.Я не знаю об IE.

Однако, это не так.Существует ли более семантический подход к решению этой проблемы с использованием только HTML и CSS?

Answer 1

Что касается семантики CSS, это определенно не очень хорошая вещь. (во-первых, я не могу заставить его работать в Chrome). Поскольку это табличные данные, их следует поместить в таблицу. Что касается автоматического увеличения, вы можете использовать атрибут css count:

Демо

table{counter-reset:number;}

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

Answer 2

Элемент <a href="http://w3.org/tr/html5/tabular-data.html#the-table-element" rel="nofollow">table</a>.