<td>

25 января 2023

Что делает тег

Тег <td> используется для создания ячейки таблицы. Он должен быть вложен в тег <tr> , который, в свою очередь, вложен в тег <table> . Ячейка может содержать текст, изображения, формы, список и другие HTML-элементы.

Синтаксис тега <td>

<table>
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
  </tr>
  <tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
</table>

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

Тег является частью спецификации HTML Living Standard.

Примеры использования

Таблица с тремя колонками (имя, фамилия и возраст) и тремя строками данных:

<table>
  <tr>
    <td>Имя</td>
    <td>Фамилия</td>
    <td>Возраст</td>
  </tr>
  <tr>
    <td>Иван</td>
    <td>Иванов</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Пётр</td>
    <td>Петров</td>
    <td>30</td>
  </tr>
</table>

В этом примере ячейки в первой строке таблицы определены с помощью тега <th> , который используется для заголовков таблицы, вместо <td>:

<table>
  <tr>
    <th>Ячейка 1</th>
    <th>Ячейка 2</th>
  </tr>
  <tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
</table>

В этом примере используется атрибут colspan, чтобы объединить ячейки в первой строке таблицы и создать заголовок для двух колонок:

<table>
  <tr>
    <td colspan="2">Сумма</td>
    <td>100</td>
  </tr>
  <tr>
    <td>Товар 1</td>
    <td>50</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Товар 2</td>
    <td>75</td>
    <td>25</td>
  </tr>
</table>

Для чего использовать тег <td>

Добавить расписание на сайт.
Показать цены на товары.
Создать таблицу с данными о продуктах.
Показать контакты компании.
Создать таблицу с результатами опроса.

Атрибуты тега <td>

colspan — количество объединяемых ячеек по горизонтали.

rowspan — количество объединяемых ячеек по вертикали.

headers — список id элементов, которые связаны с ячейкой.

Глобальные атрибуты

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

Ограничения

Тег может использоваться только внутри <tr>.
Не рекомендуется использовать вложенные таблицы — это приводит к проблемам с доступностью и масштабируемостью.

Нюансы

Если ячейка пустая, используйте <td></td> вместо <td/> для лучшей читаемости кода.
Если ячейка содержит изображение, используйте атрибут alt для доступности.
В одной строке таблицы должно быть одинаковое количество ячеек.
Если в таблице используются ячейки с разной шириной, браузеры автоматически изменяют ширину других ячеек в строке.
Если в ячейке нет содержимого, она всё равно отображается, но имеет нулевую высоту и ширину.
Если содержимое не помещается в ячейке, браузер автоматически изменит её размеры.

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

Тег <td> поддерживается всеми современными браузерами.

Актуальная информация — на caniuse.

Альтернативные теги

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