Тег <th> определяет заголовочную ячейку HTML таблицы.
В HTML таблице может быть два вида ячеек:
- Заголовочная ячейка – содержит информацию для верхнего колонтитула таблицы (создается при помощи элемента <th>)
- Стандартные ячейка – содержит табличные данные (создается при помощи элемента <td>)
По умолчанию, текст в элементе <th> отображается жирным шрифтом и выравненным по центру.
По умолчанию, текст в элементе <td> отображается обычным шрифтом и выравненным по левому краю.
Чтобы содержимое ячейки заняло несколько строк или столбцов, используйте атрибуты rowspan и colspan.
Разница между HTML 4.01 и HTML5
В HTML5 все репрезентативные атрибуты не поддерживаются.
Атрибуты тега <th>
| Атрибут | Описание |
|---|---|
| abbr | Определяет краткое описание содержимого ячейки |
| align | Определяет горизонтальное выравнивание содержимого элемента th |
| axis | Определяет категории для содержимого ячеек |
| bgcolor | Определяет фоновый цвет элемента th |
| char | Определяет символ выравнивания содержимого заголовочной ячейки |
| charoff | Определяет количество символов смещения в теге th |
| colspan | Определяет количество объединяемых ячеек по горизонтали |
| headers | Связывает заголовки таблицы с другими заголовками |
| height | Определяет высоту заголовочной ячейки |
| nowrap | Запрещает перенос на новую строку содержимого заголовочной ячейки |
| rowspan | Определяет количество ячеек по вертикали, на которые будет расширена заголовочная ячейка |
| scope | Определяет, является ли заголовочная ячейка заголовком для колонки, строки или группы колонок или строк |
| valign | Определяет вертикальное выравнивание содержимого заголовочной ячейки |
| width | Определяет ширину заголовочной ячейки |
Общие атрибуты
Тег <th> поддерживает общие атрибуты и атрибуты-события.
CSS стили по умолчанию
Большинство браузеров будут отображать тег <th> со следующими стилями
th {
display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: center;
}
HTML пример использования
Простая HTML таблица с двумя заголовочными ячейками и двумя ячейками данных:
<table>
<tr>
<th>Месяц</th>
<th>Сэкономлено</th>
</tr>
<tr>
<td>Январь</td>
<td>$100</td>
</tr>
</table>
