HTML тег <th> используется для создания заголовочной ячейки в HTML таблице. Он размещается внутри парного тега <tr>, который, в свою очередь, находится в теге <table>.

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

Содержимое тега <th> по умолчанию отображается жирным шрифтом и выравнивается по центру. Для изменения внешнего вида содержимого можно использовать CSS стили.

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

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

Добавленные браузером ячейки не имеют рамок, и если они находятся друг за другом, то будут отображаться в виде одной объединенной ячейки.

Синтаксис

<table> 
  <tr> 
    <th>...</th> 
  </tr> 
</table>

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      th, td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%; margin:30px auto; border-collapse:collapse;">
      <tr style="background-color:#1c87c9; color:#fff;">
        <th>Месяц</th>
        <th>Дата</th>
      </tr>
      <tr>
        <td>Июнь</td>
        <td>18.07.2018</td>
      </tr>
    </table>
  </body>
</html>

Результат

thexample1

В этом примере наши заголовки - "Месяц" и "Дата". Для каждого заголовка мы использовали отдельный тег <th>. Оба тега мы поместили в элемент <tr>.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      th, td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%; margin:30px auto; border-collapse:collapse;">
      <tr style="background-color:#1c87c9; color:#fff;">
        <th colspan="2">Месяц и дата </th>
      </tr>
      <tr>
        <td>Июнь</td>
        <td>18.07.2014</td>
      </tr>
    </table>
  </body>
</html>

Результат

thexample2

В этом примере значение атрибута colspan равно "2". Это означает, что ячейка заголовка должна охватывать два столбца.

Атрибуты

Атрибут Значение Описание
abbr text Определяет сокращенный вариант содержимого ячейки, либо выступает в роли альтернативного текста. В браузере применение атрибута не отображается, но он может быть использован, например, для чтения с экрана или в работе скриптов.
align left
right
center
Устанавливает выравнивание содержимого ячейки.
Не поддерживается в HTML5.
axis category_name Определяет назначение категории ячейки заголовка.
Не поддерживается в HTML 5.
background background Задает фоновый рисунок в ячейке.
Не поддерживается в HTML 5.
bgcolor rgb(x,x,x)
#xxxxxx
colorname
Задает цвет фона ячейки таблицы.
Не поддерживается в HTML 5.
bordercolor bordercolor Задает цвет рамки.
Не поддерживается в HTML 5.
char character Выравнивает содержимое ячейки данных таблицы по заданному символу. Атрибут char используется только если атрибут align = "char".
Не поддерживается в HTML 5.
charoff number Атрибут позволяет произвести выравнивание в ячейке данных с указанного в атрибуте символа вправо или влево. Атрибут charoff используется только, если атрибут align = "char".
Не поддерживается в HTML 5.
colspan number Указывает положительное целое число, определяющее сколько столбцов будет в ячейке по горизонтали. Значение по умолчанию ‒ 1.
headers header_id Указывает id одной или нескольких заголовок ячеек, которые определяются HTML тегом <th>. Атрибут не отображается в браузере, но может быть использован для чтения с экрана или в работе скриптов.
height %
pixels
Задает высоту ячейки.
Не поддерживается в HTML 5.
nowrap nowrap Запрещает перенос строк.
Не поддерживается в HTML 5.
rowspan number Атрибут определяет количество строк, которые ячейка данных должна охватывать. Значение атрибута должно быть положительным целым числом. Не рекомендуется использовать значения свыше 65534, т.к. они могут быть обрезаны до этого числа. Значение по умолчанию 1.
scope col
colgroup
row
rowgroup
auto
Определяет связь ячейки простой таблицы с заголовками в речевых браузерах. Атрибут не отображается в браузере, но может быть использован, например, для чтения с экрана или в работе скриптов.
sorted reversed
number
reversed number
number reversed
Определяет направление сортировки столбца.
Не поддерживается в HTML 5.
valign top
middle
bottom
baseline
Выравнивает содержимое ячейки заголовка по вертикали.
Не поддерживается в HTML 5.
width %
pixels
Задает ширину ячейки данных.
Не поддерживается в HTML 5.

Тег <th> поддерживает также глобальные атрибуты и атрибуты событий.

Как добавить стиль к тегу <th> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <th>:

Цвет текста внутри тега <th>:

Стили форматирования текста для тега <th>:

Другие свойства для тега <th>:

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

chrome edge firefox safari opera

Практикуйте свои знания

Что верно о теге <th> в HTML?
Считаете ли это полезным?