Пример
Простая HTML-таблица с тремя строками, двумя ячейками-заголовками и четырьмя ячейками с данными:
<table>
<tr>
<th>Месяц</th>
<th>Накопления</th>
</tr>
<tr>
<td>Январь</td>
<td>100$</td>
</tr>
<tr>
<td>Февраль</td>
<td>80$</td>
</tr>
</table>
Попробуйте сами »
Другие примеры "Попробуйте сами" ниже.
Определение и использование
Тег <th> определяет ячейку-заголовок в HTML-таблице.
HTML-таблица имеет два типа ячеек:
- Ячейки-заголовки - содержат информацию заголовка (создаются с помощью элемента
<th>) - Ячейки с данными - содержат данные (создаются с помощью элемента <td>)
Текст в элементах <th> по умолчанию выделен жирным шрифтом и выровнен по центру.
Текст в элементах <td> по умолчанию обычный и выровнен по левому краю.
Поддержка браузерами
| Элемент | |||||
|---|---|---|---|---|---|
| <th> | Да | Да | Да | Да | Да |
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| abbr | текст | Определяет сокращенную версию содержимого в ячейке-заголовке |
| colspan | число | Определяет количество столбцов, которые должна охватывать ячейка-заголовок |
| headers | header_id | Определяет одну или несколько ячеек-заголовков, с которыми связана данная ячейка |
| rowspan | число | Определяет количество строк, которые должна охватывать ячейка-заголовок |
| scope | col colgroup row rowgroup |
Определяет, является ли ячейка-заголовок заголовком для столбца, строки или группы столбцов или строк |
Глобальные атрибуты
Тег <th> также поддерживает Глобальные атрибуты в HTML.
Атрибуты событий
Тег <th> также поддерживает Атрибуты событий в HTML.
Больше примеров
Пример
Как выровнять содержимое внутри <th> (с помощью CSS):
<table style="width:100%">
<tr>
<th style="text-align:left">Месяц</th>
<th
style="text-align:left">Накопления</th>
</tr>
<tr>
<td>Январь</td>
<td>100$</td>
</tr>
<tr>
<td>Февраль</td>
<td>80$</td>
</tr>
</table>
Попробуйте сами »
Пример
Как добавить фоновый цвет ячейке-заголовку таблицы (с помощью CSS):
<table>
<tr>
<th
style="background-color:#FF0000">Месяц</th>
<th style="background-color:#00FF00">Накопления</th>
</tr>
<tr>
<td>Январь</td>
<td>100$</td>
</tr>
</table>
Попробуйте сами »
Пример
Как установить высоту ячейки-заголовка таблицы (с помощью CSS):
<table>
<tr>
<th
style="height:100px">Месяц</th>
<th style="height:100px">Накопления</th>
</tr>
<tr>
<td>Январь</td>
<td>100$</td>
</tr>
</table>
Попробуйте сами »
Пример
Как указать отсутствие переноса слов в ячейке-заголовке таблицы (с помощью CSS):
<table>
<tr>
<th>Месяц</th>
<th style="white-space:nowrap">Мои накопления на новую машину</th>
</tr>
<tr>
<td>Январь</td>
<td>100$</td>
</tr>
</table>
Попробуйте сами »
Пример
Как выровнять содержимое внутри <th> по вертикали (с помощью CSS):
<table style="width:50%;">
<tr
style="height:100px">
<th style="vertical-align:bottom">Месяц</th>
<th
style="vertical-align:bottom">Накопления</th>
</tr>
<tr>
<td>Январь</td>
<td>100$</td>
</tr>
</table>
Попробуйте сами »
Пример
Как установить ширину ячейки-заголовка таблицы (с помощью CSS):
<table style="width:100%">
<tr>
<th style="width:70%">Месяц</th>
<th
style="width:30%">Накопления</th>
</tr>
<tr>
<td>Январь</td>
<td>100$</td>
</tr>
</table>
Попробуйте сами »
Пример
Как создать ячейки-заголовки таблицы:
<table>
<tr>
<th>Имя</th>
<th>Email</th>
<th>Телефон</th>
</tr>
<tr>
<td>Джон Доу</td>
<td>john.doe@example.com</td>
<td>123-45-678</td>
</tr>
</table>
Попробуйте сами »
Пример
Как создать таблицу с заголовком:
<table>
<caption>Ежемесячные накопления</caption>
<tr>
<th>Месяц</th>
<th>Накопления</th>
</tr>
<tr>
<td>Январь</td>
<td>100$</td>
</tr>
<tr>
<td>Февраль</td>
<td>80$</td>
</tr>
</table>
Попробуйте сами »
Пример
Как определить ячейки таблицы, которые охватывают более одной строки или одного столбца:
<table>
<tr>
<th>Имя</th>
<th>Email</th>
<th colspan="2">Телефон</th>
</tr>
<tr>
<td>Джон Доу</td>
<td>john.doe@example.com</td>
<td>123-45-678</td>
<td>212-00-546</td>
</tr>
</table>
Попробуйте сами »
Связанные страницы
Учебник HTML: HTML таблицы
Справочник HTML DOM: Объект TableHeader
Учебник CSS: Оформление таблиц
Настройки CSS по умолчанию
Большинство браузеров будут отображать элемент <th> со следующими значениями по умолчанию:
th {
display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: center;
}