Синтаксис

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

Описание

Тег <th> (от англ. table header cell — ячейка заголовка таблицы) предназначен для создания одной заголовочной ячейки таблицы.

Внимание!

Элемент должен находиться внутри контейнера <tr> (определяет строки таблицы), который в свою очередь располагается внутри элемента <table>.

Содержимым тега <th> может быть любой HTML элемент: текст, форма, изображение, таблица и т.д.

По умолчанию содержимое ячейки отображается жирным шрифтом и выравнивается по центру.

Примечание!

Чаще всего с тегом <th> используют атрибуты colspan и rowspan, чтобы содержимое охватывало несколько столбцов или строк.

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

Атрибуты

Атрибут Значение Описание
abbr текст

Задает сокращенную версию содержимого в ячейке заголовка

align left
right
center
justify
char

Выравнивание содержимого в ячейке заголовка.
Не поддерживается в HTML5

axis текст

Классифицирует ячейки заголовка.
Не поддерживается в HTML 5

background URL-адрес

Задает фоновый рисунок в ячейке.
Не поддерживается в HTML 5

bgcolor rgb(x,x,x)
#xxxxxx
название цвета

Задает цвет фона ячейки заголовка.
Не поддерживается в HTML 5

bordercolor rgb(x,x,x)
#xxxxxx
название цвета

Задает цвет рамки.
Не поддерживается в HTML 5

char символ

Выравнивает содержимое ячейки данных таблицы по заданному символу.
Атрибут char используется только если атрибут align = "char".
Не поддерживается в HTML 5

charoff число

Атрибут позволяет произвести выравнивание в ячейке данных с указанного в атрибуте символа вправо или влево.
Атрибут charoff используется только, если атрибут align = "char".
Не поддерживается в HTML 5

colspan число

Атрибут определяет количество столбцов, которое ячейка должна охватывать.
Значение атрибута должно быть положительным целым числом.
Не рекомендуется использовать значения свыше 1000, т.к. они могут быть сокращены до этого числа.
Значение по умолчанию 1

headers id ячейки

Указывает id одной или нескольких заголовок ячеек, которые определяются HTML тегом <th>.
Атрибут не отображается в браузере, но может быть использован для чтения с экрана или в работе скриптов

height %
px

Задает высоту ячейки.
Не поддерживается в HTML 5

nowrap nowrap

Указывает, что содержание в ячейке не должно переноситься.
Не поддерживается в HTML 5

rowspan число

Атрибут определяет количество строк, которые ячейка данных должна охватывать.
Значение атрибута должно быть положительным целым числом.
Не рекомендуется использовать значения свыше 65534, т.к. они могут быть обрезаны до этого числа.
Значение по умолчанию 1

scope col
colgroup
row
rowgroup

Задает способ связывания заголовочной ячейки (HTML тег <th>) с ячейками данных в таблице.
Не поддерживается в HTML 5

valign top
middle
bottom
baseline

Задает вертикальное выравнивание содержимого в ячейке данных.
Не поддерживается в HTML 5

width %
px

Задает ширину ячейки данных.
Не поддерживается в HTML 5

Пример

HTML-код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Тег th</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>№</th>
                <th>Страна</th>
                <th>Город</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Россия</td>
                <td>Москва</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Беларусь</td>
                <td>Минск</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Украина</td>
                <td>Киев</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Отображение в браузере:

Страна Город
1 Россия Москва
2 Беларусь Минск
3 Украина Киев

Параметры CSS по умолчанию

th {
    display: table-cell;
    vertical-align: inherit;
    font-weight: bold;
    text-align: center;
}

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

Элемент

Chrome

Chrome

Opera

Opera

Firefox

Firefox

Safari

Safari

Microsoft Edge

Microsoft Edge

<th> Да Да Да Да Да

Комментарии

Оставить комментарий:
* отправляя форму, я даю согласие на обработку персональных данных

Продолжаем добавлять языки программирования для Вас.
Впереди много интересного!

Только свежие новости программирования и технологий каждый день.