Пример
Простая HTML таблица с двумя строками и четырьмя ячейками:
Ячейка A
Ячейка B
Ячейка C
Ячейка D
Попробуйте сами »
Больше примеров "Попробуйте сами" ниже.
Определение и использование
Тег <td> определяет стандартную ячейку данных в HTML таблице.
HTML таблица имеет два типа ячеек:
- Ячейки заголовков - содержат информацию заголовка (создаются с помощью элемента <th>)
- Ячейки данных - содержат данные (создаются с помощью элемента
<td>)
Текст в элементах <td> по умолчанию обычный и выровнен по левому краю.
Текст в элементах <th> по умолчанию жирный и выровнен по центру.
Поддержка браузерами
| Элемент | |||||
|---|---|---|---|---|---|
| <td> | Да | Да | Да | Да | Да |
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| colspan | число | Определяет количество столбцов, которые должна охватывать ячейка |
| headers | header_id | Определяет одну или несколько ячеек заголовков, с которыми связана ячейка |
| rowspan | число | Устанавливает количество строк, которые должна охватывать ячейка |
Глобальные атрибуты
Тег <td> также поддерживает Глобальные атрибуты в HTML.
Атрибуты событий
Тег <td> также поддерживает Атрибуты событий в HTML.
Больше примеров
Пример
Как выровнять содержимое внутри <td> (с помощью CSS):
Месяц
Накопления
Январь
$100
Февраль
$80
Попробуйте сами »
Пример
Как добавить цвет фона ячейке таблицы (с помощью CSS):
Месяц
Накопления
Январь
$100
Попробуйте сами »
Пример
Как установить высоту ячейки таблицы (с помощью CSS):
Месяц
Накопления
Январь
$100
Попробуйте сами »
Пример
Как отключить перенос слов в ячейке таблицы (с помощью CSS):
Стихотворение
Никогда не увеличивайте сверх необходимого количество сущностей,
требуемых для объяснения чего-либо
Попробуйте сами »
Пример
Как выровнять содержимое по вертикали внутри <td> (с помощью CSS):
Месяц
Накопления
Январь
$100
Попробуйте сами »
Пример
Как установить ширину ячейки таблицы (с помощью CSS):
Месяц
Накопления
Январь
$100
Попробуйте сами »
Пример
Как создать заголовки таблицы:
Имя
Email
Телефон
Иван Иванов
ivan.ivanov@example.com
123-45-678
Попробуйте сами »
Пример
Как создать таблицу с заголовком:
Ежемесячные накопления
Месяц
Накопления
Январь
$100
Февраль
$80
Попробуйте сами »
Пример
Как определить ячейки таблицы, которые охватывают более одной строки или столбца:
Имя
Email
Телефон
Иван Иванов
ivan.ivanov@example.com
123-45-678
212-00-546
Попробуйте сами »
Связанные страницы
Учебник HTML: HTML Таблицы
Справочник HTML DOM: Объект TableData
Учебник CSS: Стилизация таблиц
Настройки CSS по умолчанию
Большинство браузеров отображают элемент <td> со следующими значениями по умолчанию:
td {
display: table-cell;
vertical-align: inherit;
}