<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>
— используется для заголовка таблицы.
Чем заменить тег
Если необходимо отобразить данные в виде таблицы, используйте тег <td>
.
Актуальность
Тег <td>
не устарел, можете использовать его в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023