HTML тег `<td>`

Значение и применение

Каждая ячейка данных таблицы помещается в элемент <td>...</td>.

Таблицы помогают нам систематизировать определённые данные в строки и столбцы. Они могут содержать в себе различную информацию, например, такую как текст, изображения, нумерованные и маркированные списки и т.п.

Чтобы понять, как составить таблицу, давайте рассмотрим ее простейший вариант:

Основное содержимое таблицы заключается в тег <table>..</table>.

Каждая строка таблицы помещается в элемент <tr>...</tr>.

Ячейка заголовка таблицы помещается в элемент <th>...</th> (при этом содержимое отображается жирным начертанием и выравнивается по центру).

Наименование таблицы, если оно требуется размещается внутри элемента <caption>...</caption> (необязательный элемент). Обращаю Ваше внимание, что если Вы планируете использовать данный элемент в своей таблице, то он должен следовать в документе сразу за элементом <table>. По умолчанию наименование таблицы размещается по центру вверху таблицы (расположение заголовка таблицы возможно изменить, используя CSS свойство caption-side).

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

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (3) поддерживаются не везде — смотрите таблицу.

ВсеКомпьютерыМобильные

Совместимостьhtml.elements.td
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`td`	✓1	✓12	✓1	✓≤12.1	✓1	✓18	✓4	✓≤12.1	✓1	✓1.0	✓4.4	✓1
`abbr`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`align`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
`axis`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`bgcolor`	✓1	✓12	✓1	✓≤15	✓1	✓18	✓4	✓≤14	✓1	✓1.0	✓4.4	✓1
`char`	×	×	×	×	×	×	×	×	×	×	×	×
`charoff`	×	×	✓1	×	×	×	✓4	×	×	×	×	×
`colspan`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`headers`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`rowspan`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
rowspan attribute with value 0 (extend to the end of the row group)	✓65	✓79	✓≤55	✓52	×	✓65	✓≤55	✓47	×	✓9.0	✓65	×
`scope`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`valign`	✓1	✓12	✓1	✓15	✓3	✓18	✓4	✓14	✓2	✓1.0	✓4.4	✓2
`width`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
Ещё 10 значений · поддерживаются везде более 3 летСвернуть

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Атрибуты

Атрибут	Значение	Описание
`abbr`	`text`	Не поддерживается в HTML5. Определяет сокращенный вариант содержания в ячейке данных, либо выступает в роли альтернативного текста. Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов.
`align`	`right left center justify char`	Не поддерживается в HTML5. Выравнивает содержимое ячейки данных таблицы.
`axis`	`category_name`	Не поддерживается в HTML5. Назначение категории ячейки данных.
`bgcolor`	`rgb(x,x,x) #xxxxxx colorname`	Не поддерживается в HTML5. Задает цвет фона для ячейки данных таблицы.
`char`	`character`	Не поддерживается в HTML5. Выравнивает содержимое в ячейке данных таблицы по заданному символу. Атрибут `char` может быть использован только если атрибут `align =` `"char"`.
`charoff`	`number`	Не поддерживается в HTML5. Атрибут, который позволяет произвести выравнивание в ячейке данных с символа, указанного в атрибуте, путем смещения от определённого символа вправо (положительные значения) или влево (отрицательные значения). Атрибут `charoff` может быть использован только если атрибут `align =` `"char"`.
`colspan`	`number`	Целое число от 1 до 1000; по умолчанию 1. Ноль недопустим, большие значения ограничиваются 1000.
`headers`	`header_id`	Указывает `id` одной или нескольких заголовочных ячеек (HTML тег `<th>`), связанных с данной ячейкой данных. Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов.
`height`	`pixels %`	Не поддерживается в HTML5. Устанавливает высоту ячейки данных.
`nowrap`	`nowrap`	Не поддерживается в HTML5. Указывает, что содержание в ячейке данных не должно переноситься.
`rowspan`	`number`	Целое число от 0 до 65534; по умолчанию 1. Ноль охватывает оставшиеся строки текущей группы, а не всей таблицы.
`scope`	`col \| row \| colgroup \| rowgroup`	Устаревший атрибут у td. Связь области заголовка задавайте атрибутом scope на `<th>`.
`valign`	`top middle bottom baseline`	Не поддерживается в HTML5. Вертикальное выравнивание содержимого в ячейке данных.
`width`	`pixels %`	Не поддерживается в HTML5. Определяет ширину ячейки данных.

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

Структура таблицы

Измените td и сравните заголовки, основную часть и итог таблицы.

base.css

CSS

/* Границы помогают увидеть ячейки и их объединение. */
table {
    border-collapse: collapse;
}
th,
td {
    border: 1px solid;
    padding: 4px;
}

index.html

HTML

<table>
  <caption>
    Заказ
  </caption>
  <thead>
    <tr>
      <th scope="col">Товар</th>
      <th scope="col">Количество</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Блокнот</th>
      <td>2</td>
    </tr>
    <tr>
      <th scope="row">Карандаш</th>
      <td>3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Всего</th>
      <td>5</td>
    </tr>
  </tfoot>
</table>

Отличия HTML 4.01 от HTML 5

В HTML 5 была прекращена поддержка 11 атрибутов.

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

CSS

td {
display: table-cell;
vertical-align: inherit;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML тег <td>