HTML тег <th>

Поддержка браузерами

Описание

HTML тег <th> (table header) применяется в таблицах внутри тегов <tr> для создания заголовочной ячейки. Тескст введенный в заголовочную ячейку по умолчанию отображается жирным шрифтом и выравнивается по центру ячейки.

Содержимым тега <th> может быть все, что можно поместить в тело HTML-документа, включая изображения, текст, формы, ссылки и тд. и даже другие таблицы. Браузер автоматичеки создаст таблицу нужного размера для корректного отображения содержимого всех ячеек.

Если в какой-либо из строк оказалось меньше ячеек, чем в других, то браузер автоматически создаст пустые ячейки и поместит их в конец строки, заполняя ее. В случае если вам нужно создать пустую ячейку в начале или в середине строки, для обозначения отсутствующих данных, то нужно просто создать ячейку без содержимого в нужном вам месте.

Примечание: ячейки добавленные браузером автоматически, для заполнения строки, не имеют собственной рамки, то есть несколько таких ячеек, идущих друг за другом, будут отображаться как одна большая ячейка.

Атрибуты

colspan:

Указывает положительное целое число, определяющее сколько столбцов будет охватывать ячейка (по горизонтали). Значение по умолчанию - 1.

headers:

Указывает одну или несколько заголовочных ячеек, связанных с данной ячейкой. В качестве значения атрибута выступает идентификатор или список разделенных пробелами идентификаторов, принадлежащих нужным заголовочным ячейкам.

rowspan:

Указывает положительное целое число, определяющее сколько строк будет охватывать ячейка (по вертикали). Значение по умолчанию - 1.

scope:

Определяет набор ячеек, для которых текущая заголовочная ячейка предоставляет заголовочную информацию. Он может иметь следующие значения:

col - заголовок относится ко всем ячейкам в столбце, в котором он определен
colgroup - заголовок относится к группе столбцов
row - заголовок относится ко всем ячейкам в строке, в которой он определен
rowgroup - заголовок относится к группе строк

Тег <th> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

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

Пример

<table>
  <tr>
    <th>Месяц</th>
    <th>Доход</th>
  </tr>
  <tr>
    <td>Сентябрь</td>
    <td>700р</td>
  </tr>
</table>

Результат данного примера в окне браузера: