HTML - тег <th> указывает ячейку заголовка в таблице HTML. Его необходимо использовать как дочерний элемент <tr>, который, в свою очередь, объявлен в теге <table>.
Тег <th> - синтаксис и код
Тег <th> представлен парами. Содержимое записывается между открывающим (<th>) и закрывающим (</th>) тегами.
Пример простой таблицы HTML с тремя строками, двумя ячейками заголовков и четырьмя ячейками данных:
<table>
<tr>
<th>Месяц</th>
<th>Экономия</th>
</tr>
<tr>
<td>Январь</td>
<td>10000 ₽</td>
</tr>
<tr>
<td>Февраль</td>
<td>5000 ₽</td>
</tr>
</table>
| Месяц |
Экономия |
| Январь |
10000 ₽ |
| Февраль |
5000 ₽ |
Определение и использование
Тег <th> может содержать текст, изображение, форму, ссылки или любой другой элемент HTML, который можно использовать в теле HTML-документа. Размер таблицы автоматически регулируется в зависимости от размера ее содержимого.
- HTML - тег
<th> определяет ячейку заголовка в таблице HTML.
Таблица HTML имеет два типа ячеек:
- Ячейки заголовка — содержат информацию заголовка (созданного с помощью элемента
<th>).
- Ячейки данных — содержат данные (созданные с помощью элемента
<td>).
- Текст в элементах
<th> по умолчанию выделен жирным шрифтом и центрирован.
- Текст в элементах <td> по умолчанию обычный и выровнен по левому краю.
В таблицах HTML данные располагаются вертикально в столбцах. Если вы хотите отобразить первую строку таблицы в виде меток или заголовков, для содержимого первой строки таблицы вы должны использовать элементы <th> вместо элементов <td>.
Обратите внимание, что все строки таблицы содержат одинаковое количество ячеек, что эквивалентно количеству ячеек в самой длинной строке. Если в строке меньше ячеек, то браузер автоматически заполнит строку, разместив в конце ее пустые ячейки.
★ Примечание: чтобы изменить внешний вид, вы можете использовать стили CSS. Благодаря этому элементу заголовки таблиц также можно легко стилизовать независимо от остального содержимого таблицы.
Поддержка <th> браузерами
 |
✅ Поддерживает |
 |
✅ Поддерживает |
 |
✅ Поддерживает |
 |
✅ Поддерживает |
 |
✅ Поддерживает |
Атрибуты
| Атрибут |
Значение |
Описание |
| abbr |
text |
Указывает сокращенную версию содержимого в ячейке заголовка |
| colspan |
number |
Указывает количество столбцов, которые должна охватывать ячейка заголовка |
| headers |
header_id |
Указывает одну или несколько ячеек заголовка, с которыми связана ячейка |
| rowspan |
number |
Указывает количество строк, которые должна охватывать ячейка заголовка |
| scope |
col
colgroup
row
rowgroup |
Указывает, является ли ячейка заголовка заголовком столбца, строки или группы столбцов или строк |
Глобальные атрибуты
Тег <th> также поддерживает глобальные атрибуты в HTML
Атрибуты событий
Тег <th> также поддерживает атрибуты событий в HTML
Еще примеры
Таблица с невидимыми границами:
table, th, td {
border: 1px solid #333333;
border-collapse: collapse;
}
th, td {
background-color: #89abcc;
}
При помощи свойства border-radius углы таблицы закругляются:
table, th, td {
border: 1px solid white;
border-radius: 10px;
}
Связанные страницы
Руководство по HTML: таблицы HTML
Настройки CSS по умолчанию
Большинство браузеров отображают элемент th со следующими значениями по умолчанию:
th {
display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: center;
}
Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.
