Тег HTML ячейка таблицы
Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.
Синтаксис
контент ячейки Отображение в браузере
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
Пример использования в HTML коде
Простая таблица на 4 ячейки
Ячейка 1
Ячейка 2
Ячейка 3
Ячейка 4 Поддержка браузерами
| Тег |  |
 |
 |
 |
 |
| Да | Да | Да | Да | Да |
Атрибуты
Фоновый цвет. В HTML5 используйте CSS.
Примеры:
RGB: rgb(236,123,050), rgb(0, 20, 187).
HTML hex: #faf3e1, #ccc.
HTML colorname: white, green;
HTML тег td
Тег определяет стандартную ячейку HTML таблицы.
В HTML таблице может быть два вида ячеек:
- Заголовочная ячейка – содержит информацию для верхнего колонтитула таблицы (создается при помощи элемента )
- Стандартные ячейка – содержит табличные данные (создается при помощи элемента )
По умолчанию, текст в элементе отображается жирным шрифтом и выравненным по центру.
По умолчанию, текст в элементе отображается обычным шрифтом и выравненным по левому краю.
Чтобы содержимое ячейки заняло несколько строк или столбцов, используйте атрибуты rowspan и colspan.
Разница между HTML 4.01 и HTML5
В HTML5 все репрезентативные атрибуты не поддерживаются.
Атрибуты тега
| Атрибут | Описание |
|---|---|
| abbr | Определяет краткое описание содержимого ячейки |
| align | Определяет горизонтальное выравнивание содержимого элемента td |
| axis | Определяет категории для содержимого ячеек |
| bgcolor | Определяет фоновый цвет элемента |
| char | Определяет символ выравнивания содержимого ячейки |
| charoff | Определяет количество символов смещения |
| colspan | Определяет количество объединяемых ячеек по горизонтали |
| headers | Связывает ячейки таблицы с заголовками |
| height | Определяет высоту ячейки |
| nowrap | Запрещает перенос на новую строку содержимого ячейки |
| rowspan | Определяет количество объединяемых ячеек по вертикали |
| scope | Определяет способ связывания ячейки данных таблицы с заголовками |
| valign | Определяет вертикальное выравнивание содержимого ячейки |
| width | Определяет ширину ячейки |
Общие атрибуты
CSS стили по умолчанию
HTML пример использования
Простая HTML таблица с двумя ячейками:
Ячейка A Ячейка B
Что такое td в html
Тег (от англ. table data — данные таблицы) предназначен для создания одной ячейки таблицы.
Демо¶
Синтаксис¶
1 2 3 4 5
table> tr> td>. td> tr> table> Закрывающий тег не обязателен.
Атрибуты¶
Объединяет горизонтальные ячейки.
Позволяет связать ячейки с заголовком.
Объединяет вертикальные ячейки.
Для этого элемента доступны универсальные атрибуты.
colspan¶
Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк.
Синтаксис
td colspan="">. td> Значения
Любое целое положительное число. Значение 0 распространяет ячейку на всю родительскую группу колонок, объединённую элементом . Значения выше 1000 считаются неправильными и устанавливаются в 1.
Значение по умолчанию
headers¶
Позволяет связать ячейки таблицы с заголовками. Этот атрибут предназначен для повышения доступности таблицы пользователям речевых браузеров, в обычных браузерах результат применения атрибута headers не заметен.
Синтаксис
td id="">. td> td headers="">. td> Значения
Один или несколько идентификаторов, разделенных между собой пробелом.
Значение по умолчанию
rowspan¶
Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк.
Синтаксис
td rowspan="">. td> Значения
Любое целое положительное число. Если значение установлено как 0, то ячейки объединяются до конца раздела таблицы ( , или ) или самой таблицы. Максимально допустимое значение равно 65534.
Значение по умолчанию
Спецификации¶
- WHATWG HTML Living Standard
- HTML 5
Описание и примеры¶
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>TDtitle> 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">Ячейка 3td> tr> table> body> html> Что такое td в html
abbr Краткое описание содержимого ячейки. align Определяет выравнивание содержимого ячейки по горизонтали. axis Группирует ячейки связанные между собой похожей информацией. background Задает фоновый рисунок в ячейке. bgcolor Цвет фона ячейки. bordercolor Цвет рамки. char Выравнивает содержимое ячейки по заданному символу. charoff Смещает содержимое ячейки относительно заданного символа. colspan Объединяет горизонтальные ячейки. headers Позволяет связать ячейки с заголовком. height Высота ячейки. nowrap Запрещает перенос строк. rowspan Объединяет вертикальные ячейки. scope Позволяет связать ячейки простой таблицы с заголовками в речевых браузерах. valign Выравнивание содержимого ячейки по вертикали. width Ширина ячейки.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
HTML 4.01 IE Cr Op Sa Fx
Тег TD Ячейка 1 Ячейка 2 Ячейка 3
Статьи по теме
- Атрибуты тега
- Выравнивание элементов
- Колонки таблицы
- Макет из двух колонок
- Макет из двух колонок
- Макет из трех колонок
- Макет из трёх колонок
- Объединение ячеек
- Объемная таблица
- Особенности верстки слоями
- Особенности таблиц
- Применение таблиц
- Простая таблица
- Разрезание и склейка изображений
- Сетка таблицы
- Строки таблицы
- Таблица без рамки
- Таблица с рамкой
- Таблицы
- Таблицы и стили
- Таблицы и стили
- Теги для таблиц