Тег <td>

Описание

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

Базовый синтаксис:
<table> <tr> <td>Ячейка с данными</td> <td>Другая ячейка</td> </tr> </table>
Примеры использования:
<!-- Простая таблица --> <table> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> </tr> </table> <!-- Объединение ячеек --> <table> <tr> <td colspan="2">Объединённая ячейка</td> </tr> <tr> <td rowspan="2">Высота 2 строки</td> <td>Ряд 1</td> </tr> <tr> <td>Ряд 2</td> </tr> </table> <!-- Доступная таблица --> <table> <tr> <th id="name">Имя</th> <th id="age">Возраст</th> </tr> <tr> <td headers="name">Иван</td> <td headers="age">25</td> </tr> </table>

Рекомендации по использованию:

  • Используйте только внутри <tr>
  • Для заголовков применяйте <th>
  • Избегайте пустых ячеек (используйте &nbsp; или CSS)
  • Для сложных таблиц указывайте атрибуты доступности
  • Не используйте таблицы для вёрстки страниц
Адаптивный подход:
<table> <tr> <td data-label="Имя">Иван Иванов</td> <td data-label="Телефон">+7 (123) 456-7890</td> </tr> </table> <!-- На мобильных преобразуется в: Имя: Иван Иванов Телефон: +7 (123) 456-7890 -->

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

Атрибуты

colspan Количество объединяемых столбцов
rowspan Количество объединяемых строк
headers Связь с заголовочными ячейками
scope Область действия ячейки
abbr Сокращенная версия содержимого
align Горизонтальное выравнивание
axis Категория ячейки
bgcolor Цвет фона
char Символ для выравнивания
charoff Смещение выравнивания
height Высота ячейки
nowrap Запрет переноса текста
valign Вертикальное выравнивание
width Ширина ячейки
class CSS-классы для стилизации
contenteditable Разрешает редактирование
data-* Пользовательские данные
dir Направление текста
hidden Скрывает элемент
id Уникальный идентификатор
lang Язык содержимого
style Инлайновые стили
tabindex Порядок перехода
title Всплывающая подсказка
translate Определяет возможность перевода
role ARIA-роль
aria-* ARIA-атрибуты

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