Перейти к содержанию

<th>

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

Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Элемент <th> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри <table>.

Демо

Таблицы

Синтаксис

1
2
3
4
5
<table>
    <tr>
        <th>...</th>
    </tr>
</table>

Закрывающий тег не обязателен.

Атрибуты

colspan

Объединяет горизонтальные ячейки.

headers

Позволяет связать ячейки таблицы с заголовками в речевых браузерах.

rowspan

Объединяет вертикальные ячейки.

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

colspan

Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк.

Синтаксис

1
<th colspan="<число>">...</th>

Значения

Любое целое положительное число больше 1.

Значение по умолчанию

1

headers

Позволяет связать ячейки таблицы с заголовками. Этот атрибут предназначен для повышения доступности таблицы пользователям речевых браузеров, в обычных браузерах результат применения атрибута headers не заметен.

Для связывания ячеек между собой, ячейке в <th> пишется атрибут id, а в другой ячейке — атрибут headers со значением, совпадающим со значением id.

Синтаксис

1
2
<th id="<идентификатор>">...</th>
<th headers="<идентификатор>">...</th>

Значения

Один или несколько идентификаторов, разделённых между собой пробелом.

Значение по умолчанию

Нет.

rowspan

Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк.

Синтаксис

1
<th rowspan="<число>">...</th>

Значения

Любое целое положительное число больше 1.

Значение по умолчанию

1

Значения ARIA role

  • role=columnheader для заголовочной ячейки в столбце
  • role=rowheader для заголовочной ячейки в строке

Спецификации

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<html>
    <head>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <title>TH</title>
        <style type="text/css">
            table {
                border-collapse: collapse; /* Отображать двойные линии как одинарные */
            }
            th {
                background: #ccc; /* Цвет фона */
                text-align: left; /* Выравнивание по левому краю */
            }
            td,
            th {
                border: 1px solid #800; /* Параметры границы */
                padding: 4px; /* Поля в ячейках */
            }
        </style>
    </head>
    <body>
        <table width="100%" cellspacing="0" border="1">
            <tr>
                <th>Браузер</th>
                <th colspan="3">Internet Explorer</th>
                <th colspan="3">Opera</th>
                <th colspan="2">Firefox</th>
            </tr>
            <tr>
                <th>Версия</th>
                <td>5.5</td>
                <td>6.0</td>
                <td>7.0</td>
                <td>7.0</td>
                <td>8.0</td>
                <td>9.0</td>
                <td>1.0</td>
                <td>2.0</td>
            </tr>
            <tr>
                <th>Поддерживается</th>
                <td>Да</td>
                <td>Да</td>
                <td>Да</td>
                <td>Да</td>
                <td>Да</td>
                <td>Да</td>
                <td>Да</td>
                <td>Да</td>
            </tr>
        </table>
    </body>
</html>

Ссылки

  • Тег <th> MDN (рус.)

Комментарии