Главная » Справочник » Справочник по HTML » Справочник по тегам HTML элементов » Тег td HTML

Тег td HTML

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

Тег <td> - синтаксис и код

Тег <td> представлен парами. Содержимое записывается между открывающим (<td>) и закрывающим (</td>) тегами.

Пример простой HTML таблицы с двумя строками и четырьмя ячейками:

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

Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4

Определение и использование

HTML - тег <td> определяет стандартную ячейку данных в таблице HTML.

Таблица HTML имеет два типа ячеек:

Ячейки заголовка — содержат информацию заголовка (созданного с помощью элемента <th>).
Ячейки данных — содержат данные (созданные с помощью элемента <td>).

Текст в элементах <td> по умолчанию обычный и выровнен по левому краю;
Текст в элементах <th> по умолчанию выделен жирным шрифтом и центрирован.

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

Более сложные таблицы могут содержать элементы <caption>, <colgroup>, <col>, <tfoot>, <tbody> или <thead>.

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

★ Примечание: ячейки, добавленные браузером, не имеют границ, и если они идут друг за другом, они будут отображаться как одна интегрированная ячейка.

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

	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает

Атрибуты

Атрибут	Значение	Описание
colspan	number	Указывает количество столбцов, которые должна охватывать ячейка
headers	header_id	Указывает одну или несколько ячеек заголовка, с которыми связана ячейка
rowspan	number	Устанавливает количество строк, которые должна занимать ячейкаГлобальные атрибуты

Тег <td> также поддерживает глобальные атрибуты в HTML

Атрибуты событий

Тег <td> также поддерживает атрибуты событий в HTML

Еще примеры

Пример таблицы с отступом, свойство padding:

 th, td {
  padding: 5px;
}

Привет!	Привет!	Привет!
Привет!	Привет!	Привет!
Привет!	Привет!	Привет!

Пример таблицы с интервалом, свойство border-spacing:

table {
  border-spacing: 30px;
}

Привет!	Привет!	Привет!
Привет!	Привет!	Привет!
Привет!	Привет!	Привет!

Связанные страницы

Руководство по HTML: таблицы HTML

Настройки CSS по умолчанию

Большинство браузеров отображают элемент td со следующими значениями по умолчанию:

td {
  display: table-cell;
  vertical-align: inherit;
}

Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.

Поделиться ссылкой