HTML тег th

Тег <th> определяет заголовочную ячейку HTML таблицы.

В HTML таблице может быть два вида ячеек:

  • Заголовочная ячейка – содержит информацию для верхнего колонтитула таблицы (создается при помощи элемента <th>)
  • Стандартные ячейка – содержит табличные данные (создается при помощи элемента <td>)

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

По умолчанию, текст в элементе <td> отображается обычным шрифтом и выравненным по левому краю.

Чтобы содержимое ячейки заняло несколько строк или столбцов, используйте атрибуты rowspan и colspan.

Разница между HTML 4.01 и HTML5

В HTML5 все репрезентативные атрибуты не поддерживаются.
Атрибуты тега <th>
Атрибут Описание
abbr Определяет краткое описание содержимого ячейки
align Определяет горизонтальное выравнивание содержимого элемента
axis Определяет категории для содержимого ячеек
bgcolor Определяет фоновый цвет элемента
char Определяет символ выравнивания содержимого заголовочной ячейки
charoff Определяет количество символов смещения
colspan Определяет количество объединяемых ячеек по горизонтали
headers Связывает заголовки таблицы с другими заголовками
height Определяет высоту заголовочной ячейки
nowrap Запрещает перенос на новую строку содержимого заголовочной ячейки
rowspan Определяет количество ячеек по вертикали, на которые будет расширена заголовочная ячейка
scope Определяет, является ли заголовочная ячейка заголовком для колонки, строки или группы колонок или строк
valign Определяет вертикальное выравнивание содержимого заголовочной ячейки
width Определяет ширину заголовочной ячейки

Общие атрибуты

Тег <th> поддерживает общие атрибуты и атрибуты-события.

HTML пример

Простая HTML таблица с двумя заголовочными ячейками и двумя ячейками данных:


<table>
  <tr>
    <th>Месяц</th>
    <th>Сэкономлено</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>$100</td>
  </tr>
</table>

CSS стили по умолчанию

Большинство браузеров будут отображать тег <th> со следующими стилями


th {
    display: table-cell;
    vertical-align: inherit;
    font-weight: bold;
    text-align: center;
}