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

Тег <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> — используется для заголовка таблицы.

Чем заменить тег

Если необходимо отобразить данные в виде таблицы, используйте тег <td>.

Актуальность

Тег <td> не устарел, можете использовать его в веб-разработке.


Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<div>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<dl>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023