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

<td>

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

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

Демо

Таблицы

Синтаксис

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

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

Атрибуты

colspan

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

headers

Позволяет связать ячейки с заголовком.

rowspan

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

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

colspan

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

Синтаксис

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

Значения

Любое целое положительное число. Значение 0 распространяет ячейку на всю родительскую группу колонок, объединённую элементом <colgroup>. Значения выше 1000 считаются неправильными и устанавливаются в 1.

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

1

headers

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

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

Синтаксис

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

Значения

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

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

Нет.

rowspan

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

Синтаксис

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

Значения

Любое целое положительное число. Если значение установлено как 0, то ячейки объединяются до конца раздела таблицы (<thead>, <tbody> или <tfoot>) или самой таблицы. Максимально допустимое значение равно 65534.

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

1

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

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

 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
<html>
    <head>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <title>TD</title>
    </head>
    <body>
        <table border="1" cellpadding="7" cellspacing="0">
            <tr>
                <td
                    colspan="2"
                    bgcolor="#D3EDF6"
                    align="center"
                >
                    Ячейка 1
                </td>
            </tr>
            <tr>
                <td valign="top" align="center">
                    Ячейка 2
                </td>
                <td width="98%" valign="top">Ячейка 3</td>
            </tr>
        </table>
    </body>
</html>

Ссылки

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

Комментарии