HTML-тег <th>
Тег <th> определяет ячейку заголовка в HTML-таблице. Он должен использоваться как дочерний элемент тега <tr>, который, в свою очередь, размещается внутри тега <table>. Для определения обычной ячейки данных используется тег <td>.
Тег <th> может содержать текст, изображения, формы, ссылки или любой другой HTML-элемент, который можно использовать в теле HTML-документа. Размер таблицы автоматически подстраивается в зависимости от размера её содержимого.
В HTML-таблицах данные располагаются вертикально по столбцам. Если вы хотите отобразить первую строку таблицы в виде меток или заголовков, для этой строки необходимо использовать элементы <th> вместо <td>. По умолчанию содержимое тега <th> отображается жирным шрифтом и по центру. Чтобы изменить его внешний вид, можно использовать стили CSS. Заголовки таблицы также можно легко стилизовать независимо от остального содержимого таблицы.
Обратите внимание, что все строки в таблице должны содержать одинаковое количество ячеек. Если в строке меньше ячеек, браузер неявно отрисовывает недостающие ячейки. Эти неявные ячейки наследуют стили границ таблицы. Если вам нужно указать, что другие ячейки не содержат данных, создайте пустые ячейки там, где это необходимо. Если неявные ячейки идут подряд, они могут отобразиться как одна объединённая ячейка.
Синтаксис
Тег <th> используется парами. Содержимое записывается между открывающим (<th>) и закрывающим (</th>) тегами.
HTML-тег <th>
<table>
<tr>
<th>...</th>
</tr>
</table>Пример использования HTML-тега <th>:
Месяц и дата — Пример использования HTML-тега <th> — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
tr:first-child {
background-color: #1c87c9;
color: #fff;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>June</td>
<td>18.07.2018</td>
</tr>
</table>
</body>
</html>Результат
В этом примере наши заголовки — «Месяц» и «Дата», которые мы определяем с помощью тегов <th>. Мы помещаем оба тега внутрь элемента <tr>.
Атрибут colspan обычно используется с тегом <th>, чтобы содержимое растягивалось на несколько столбцов. Давайте посмотрим, как это работает.
Пример использования HTML-тега <th> с атрибутом colspan:
Пример с атрибутом colspan — HTML-тег <th> — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
tr {
background-color: #1c87c9;
color: #ffffff;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">Month and Date</th>
</tr>
<tr>
<td>Jun</td>
<td>18.07.2014</td>
</tr>
</table>
</body>
</html>В этом примере значение атрибута colspan равно «2». Это означает, что ячейка заголовка должна охватывать два столбца.
Атрибуты
Примечание: Атрибуты, такие как align, bgcolor, valign, width, height и другие, устарели в HTML5. Вместо них используйте CSS для стилизации.
| Attribute | Value | Description |
|---|---|---|
| abbr | text | Определяет сокращённую версию содержимого в ячейке заголовка или альтернативный текст. Некоторые пользовательские агенты, такие как программы чтения с экрана, могут воспроизводить это описание перед самим содержимым. |
| align | left right center | Выравнивает содержимое в ячейке заголовка. Не поддерживается в HTML5. |
| axis | category_name | Группирует ячейки с похожим содержимым. Не поддерживается в HTML5. |
| background | background | Устанавливает фон в ячейке. Не поддерживается в HTML5. |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | Определяет цвет фона ячейки. Не поддерживается в HTML5. |
| bordercolor | bordercolor | Устанавливает цвет границы. Не поддерживается в HTML5. |
| char | character | Выравнивает содержимое в ячейке заголовка по заданному символу. Используется только если указан атрибут align="char". Не поддерживается в HTML5. |
| charoff | number | Устанавливает количество символов, на которое содержимое будет смещено от символа, указанного в атрибуте char. Используется только если указан атрибут align="char". Не поддерживается в HTML5. |
| colspan | number | Определяет количество столбцов, которое должна охватывать ячейка. Значение атрибута должно быть положительным целым числом. Значение по умолчанию — 1. |
| headers | header_id | Указывает список идентификаторов ячеек заголовка через пробел, содержащих информацию об этой ячейке. Значение должно соответствовать id ячейки заголовка (устанавливается с помощью атрибута id). |
| height | % pixels | Устанавливает высоту ячейки. Не поддерживается в HTML5. |
| nowrap | nowrap | Указывает, что содержимое внутри ячейки не должно переноситься. Не поддерживается в HTML5. |
| rowspan | number | Указывает количество строк, которое должна охватывать ячейка. Значение атрибута должно быть положительным целым числом. Значение по умолчанию — 1. Не рекомендуется использовать значения выше 65534, так как они будут обрезаны до 65534. |
| scope | col colgroup row rowgroup auto | Определяет ячейки, к которым относится элемент заголовка (определённый в <th>). Важно для доступности таблиц. |
| sorted | reversed number reversed number number reversed | Определяет направление сортировки столбца. Не поддерживается в HTML5. |
| valign | top middle bottom baseline | Указывает вертикальное выравнивание содержимого внутри ячейки. Не поддерживается в HTML5. |
| width | % pixels | Устанавливает ширину ячейки. Не поддерживается в HTML5. |
Тег <th> также поддерживает Глобальные атрибуты и Атрибуты событий.
Как стилизовать HTML-тег <th>
th {
background-color: #f2f2f2;
color: #333;
padding: 8px;
border: 1px solid #ccc;
}Практика
Какова цель HTML-тега <th>?