HTML тег th

Тег <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>