Перейти к содержанию

Заголовки таблиц

<th>

Элемент <th>(1) используется точно так же, как и элемент <td>, однако его назначение - создание заголовка строки или столбца.

Помните, что даже если ячейка не содержит данных, то вы все равно должны представить ее пустым элементом <td> или <th>, в противном случае таблица будет некорректно отображена в браузере. (В примере первая ячейка первой строки пустая.)

Употребление элемента <th> помогает людям, использующим программы экранного доступа, улучшает результативность индексирования таблиц поисковыми системами, а еще этот элемент помогает управлять оформлением таблиц при использовании CSS.

  1. Table heading(англ.) — заголовок таблицы.
Код
<table>
    <tr>
        <th></th>
        <th scоpe="col">Суббота</th>
        <th scоpe="col">Bоскресенье</th>
    </tr>
    <tr>
        <th scоpе="row">Продано билетов</th>
        <td>120</td>
        <td>135</td>
    </tr>
    <tr>
        <th scope="row">Выручка</th>
        <td>18 000 руб.</td>
        <td>20 250 руб.</td>
    </tr>
</table>
Результат

Для обозначения того, относится ли данный заголовок к строке или столбцу, вы можете воспользоваться атрибутом scope элемента <th>.

Этот атрибут способен принимать одно из двух значений: row(1) или col(2) для обозначения, к чему именно (к строке или столбцу) относится данный заголовок.

  1. Row (англ.) — строка.
  2. Column (англ.) — столбец.

Как правило, браузеры выделяют полужирным шрифтом содержимое элемента <th> и выравнивают его по центру ячейки.