Мелкие заметки по администрированию и не только. Используются в личных целях в качестве памятки

Маленькая хитрость при работе с HTML

Бывают ситуации когда нужно создать таблицу с пронумерованными строками. Первое что приходит в голову — использовать нумерованный список. Здесь вся проблема в том что если и удастся добиться желаемого результата, то мы получим код, несоответствующий стандарту. Можно, конечно, и вручную пронумеровать все строки, но такую таблицу будет сложно поддерживать.
Нашёл более изящное решение.
В спецификации CSS версии 2 и младше есть свойство counter-increment. Можно воспользоваться им.
Для этого набросаем небольшую таблицу

<table class="OL">
<tr>
    <th>№ п/п</th>
    <th>Наименование товара</th>
    <th>Стоимость (руб.)</th>
</tr><tr>
    <td></td>
    <td>Ручка шариковая</td>
    <td>63.00</td>
</tr><tr>
    <td></td>
    <td>Вода минеральная</td>
    <td>80.00</td>
</tr><tr>
    <td></td>
    <td>USB-Flash накопитель 128 ГБ</td>
    <td>2 300.00</td>
</tr>
</table>

и правила отображения:

<style>
table.OL {counter-reset: count;}
table.OL td:first-child:before{
    content: counter(count);
    counter-increment: count;
}
td,th {border: 1px solid black;}
</style>

В результате чего получаем:

№ п/п

Наименование товара

Стоимость (руб.)

Ручка шариковая

63.00

Вода минеральная

80.00

USB-Flash накопитель 128 ГБ

2 300.00

У данного способа только 1 недостаток. При копировании такой таблицы номера строк скопированы не будут.

Обновление от 15 марта 2024:
Наткнулся на аналогичное описание нумирации строк в таблце при помощи CSS с большим количеством разнообразных примеров: Автоматическая нумерация строк таблицы | CSS

Отправить