HTML Тег <th>

Пример

Простая HTML таблица с тремя строками, двумя ячейками заголовка и четырьмя ячейками данных:

<table>
<tr>
    <th>Месяц</th>
    <th>Экономия</th>
</tr>
<tr>
    <td>Январь</td>
    <td>$100</td>
</tr>
<tr>
    <td>Февраль</td>
    <td>$80</td>
</tr>
</table>

Попробуйте сами »

Определение и использование <th>

Тег <th> определяет ячейку заголовка в HTML таблице.

HTML таблица имеет два вида ячеек:

Ячейки заголовка - содержит информацию заголовка (создается с помощью элемента <th>)
Ячейки данных - содержат данные (созданные с помощью элемента <td>)

Текст в элементах <th> по умолчанию выделены жирным шрифтом и выровненными по центру.

Текст в элементах <td> по умолчанию являются регулярными и выровненными по левому краю.

Поддержка браузеров <th>

Элемент
<th>	Да	Да	Да	Да	Да

Атрибуты <th>

Атрибут	Значение	Описание
abbr	text	Определяет сокращенную версию содержимого в ячейке заголовка
colspan	number	Указывает количество столбцов, которые должна охватывать ячейка заголовка
headers	header_id	Указывает одну или несколько ячеек заголовка, с которыми связана ячейка
rowspan	number	Указывает количество строк, которые должна занимать ячейка заголовка
scope	col colgroup row rowgroup	Указывает, является ли ячейка заголовка заголовком столбца, строки или группы столбцов или строк

Глобальные атрибуты <th>

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

События атрибутов <th>

Тег <th> также поддерживает События атрибутов в HTML.

Еще примеры <th>

Пример

Как выровнить содержимое внутри <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>and-shhipunov@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>and-shhipunov@example.com</td>
    <td>123-45-678</td>
    <td>212-00-546</td>
</tr>
</table>

Попробуйте сами »