<td>: Элемент ячейки таблицы данных

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

Этот элемент включает глобальные атрибуты.

colspan

Содержит целое неотрицательное значение, указывающее, сколько столбцов охватывает или расширяет ячейка данных. Значение по умолчанию — 1. Пользовательские агенты игнорируют значения, превышающие 1000, устанавливая значение по умолчанию (1).

headers

Содержит список разделенных пробелами строк, каждая из которых соответствует атрибуту id элементов <th>, которые предоставляют заголовки для этой ячейки таблицы.

rowspan

Содержит целое неотрицательное значение, указывающее, сколько строк охватывает или расширяет ячейка данных. Значение по умолчанию — 1; если его значение установлено в 0, оно расширяется до конца раздела группировки таблицы (<thead>, <tbody>, <tfoot>, даже если оно определено неявно), к которому принадлежит ячейка. Значения, превышающие 65534, обрезаются до 65534.

Следующие атрибуты устарели и не должны использоваться. Они документированы ниже для справки при обновлении существующего кода и только для исторической справки.

abbr Устарело

Содержит краткое сокращенное описание содержимого ячейки данных. Некоторые пользовательские агенты, такие как программы для чтения с экрана, могут отобразить это описание перед самим содержимым. Поместите сокращенное содержимое в ячейку, а (более длинное) описание — в атрибут title, так как этот атрибут устарел. Или, что предпочтительнее, включите содержимое в ячейку данных и используйте CSS для визуального обрезания переполняющего текста.

align Устарело

Указывает горизонтальное выравнивание ячейки данных. Возможные перечисленные значения — left, center, right, justify, и char. В тех случаях, когда это поддерживается, значение char выравнивает текстовое содержимое по символу, определенному в атрибуте char, и смещению, определенному в атрибуте charoff. Используйте свойство CSS text-align вместо этого атрибута, так как он устарел.

axis Устарело

Содержит список разделенных пробелами строк, каждая из которых соответствует атрибуту id группы ячеек, к которым относится ячейка данных.

bgcolor Устарело

Определяет цвет фона ячейки данных. Значение — HTML-цвет; либо 6-значный шестнадцатеричный код RGB, предваряемый '#', либо ключевое слово цвета. Другие значения CSS <color> не поддерживаются. Используйте свойство CSS background-color вместо этого атрибута, так как он устарел.

char Устарело

Ничего не делает. Изначально предназначался для указания выравнивания содержимого по символу ячейки данных. Типичные значения включают точку (.) при попытке выравнивания чисел или денежных значений. Если align не установлено в char, этот атрибут игнорируется.

charoff Устарело

Ничего не делает. Изначально предназначался для указания количества символов для смещения содержимого ячейки данных от символа выравнивания, указанного атрибутом char.

height Устарело

Определяет рекомендуемую высоту ячейки данных. Используйте свойство CSS height вместо этого атрибута, так как он устарел.

scope Устарело

Определяет ячейки, к которым относится заголовок (определенный в элементе <th>). Возможные перечисленные значения — row, col, rowgroup, и colgroup. Используйте этот атрибут только с элементом <th> для определения строки или столбца, для которого он является заголовком, так как этот атрибут устарел для элемента <td>.

valign Устарело

Указывает вертикальное выравнивание ячейки данных. Возможные перечисленные значения — baseline, bottom, middle, и top. Используйте свойство CSS vertical-align вместо этого атрибута, так как он устарел.

width Устарело

Определяет рекомендуемую ширину ячейки данных. Используйте свойство CSS width вместо этого атрибута, так как он устарел.

• Элемент <td> может использоваться только внутри элемента <tr>.
• При использовании атрибутов colspan и rowspan для охвата ячеек данных по нескольким столбцам и строкам, ячейки без этих атрибутов (со значением по умолчанию 1 ) автоматически подгоняются под свободные доступные места в структуре таблицы, охватывающие 1x1 ячейки, как показано на рисунке ниже:

  Примечание: Эти атрибуты не должны использоваться для перекрытия ячеек.

См. <table> для примера полной таблицы, в котором представлены общие стандарты и лучшие практики.

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

HTML

Некоторые строки таблицы (<tr> элементы) содержат ячейки заголовка (<th> элементы) и ячейки данных <td> элементы. Элемент <th>, являющийся первым потомком каждой строки, образует первый столбец таблицы, и каждый <th> предоставляет заголовок строки для ячеек данных в этой строке. Каждый соответствующий элемент <td> содержит данные, выровненные с соответствующим заголовком столбца и заголовком строки.

<table>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>AL fah</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Bravo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Charlie</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td>DELL tah</td>
  </tr>
</table>

CSS

Для стилизации таблицы и её ячеек используется несколько основных правил CSS. CSS селекторы атрибутов и псевдокласс :nth-of-type используются для чередования внешнего вида ячеек, что облегчает понимание и распознавание информации в таблице.

td,
th {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

tr:nth-of-type(odd) td {
  background-color: #eee;
}

tr th[scope="row"] {
  background-color: #d6ecd4;
}

Результат

Этот пример расширяет и улучшает базовую таблицу из предыдущего примера, добавив дополнительную ячейку «ABC».

HTML

Вводится дополнительная ячейка данных (элемент <td> ) в первой строке (<tr> элемент). Это создает четвертый столбец в таблице.

Используя атрибут rowspan, ячейка «ABC» охватывает первые три строки таблицы. Последние ячейки данных последующих строк охватывают по два столбца, что достигается с помощью атрибута colspan для правильного выравнивания в структуре таблицы. Обратите внимание, что в таблицу добавлена дополнительная строка (<tr> элемент) для иллюстрации этого.

<table>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>AL fah</td>
    <td rowspan="3">ABC</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Bravo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Charlie</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td colspan="2">DELL tah</td>
  </tr>
  <tr>
    <th scope="row">E</th>
    <td>Echo</td>
    <td colspan="2">ECK oh</td>
  </tr>
</table>

CSS

В CSS используются псевдоклассы :first-of-type и :last-of-type для выбора и стилизации добавленной ячейки данных «ABC».

tr:first-of-type td:last-of-type {
  width: 60px;
  background-color: #505050;
  color: #fff;
  font-weight: bold;
  text-align: center;
}

td,
th {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

tr:nth-of-type(odd) td {
  background-color: #eee;
}

tr th[scope="row"] {
  background-color: #d6ecd4;
}

Результат

Для более сложных взаимосвязей между ячейками данных (элементы <td> ) и ячейками заголовков (<th> элементы), использование элементов <th> с атрибутом scope может быть недостаточно для технологий辅助, особенно для программных читателей.

HTML

Для повышения доступности предыдущего примера и возможности озвучивания заголовков, связанных с каждой ячейкой данных программами чтения, например, можно использовать атрибут headers вместе с атрибутами id. Каждая ячейка заголовка строки (<th> элемент), связанная с ячейкой данных «ABC», то есть буквами «A», «B» и «C», получает уникальный идентификатор с помощью атрибута id. Ячейка данных «ABC» (элемент <td> ) затем использует эти значения id в виде списка, разделенного пробелами, для атрибута headers.

<table>
  <tr>
    <th id="a" scope="row">A</th>
    <td>Alfa</td>
    <td>AL fah</td>
    <td headers="a b c" rowspan="3">ABC</td>
  </tr>
  <tr>
    <th id="b" scope="row">B</th>
    <td>Bravo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th id="c" scope="row">C</th>
    <td>Charlie</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td colspan="2">DELL tah</td>
  </tr>
  <tr>
    <th scope="row">E</th>
    <td>Echo</td>
    <td colspan="2">ECK oh</td>
  </tr>
</table>

Результат

Хотя визуальный результат не изменился по сравнению с предыдущей таблицей, каждая ячейка данных (<td>) теперь явно связана со своей ячейкой заголовка строки (<th>).

• Учебник: HTML таблицы
• <caption>, <col>, <colgroup>, <table>, <tbody>, <tfoot>, <th>, <thead>, <tr>: Другие элементы, связанные с таблицами
• background-color: Свойство CSS для задания цвета фона каждой ячейки данных
• border: Свойство CSS для управления границами ячеек данных
• height: Свойство CSS для управления рекомендуемой высотой ячеек данных
• text-align: Свойство CSS для горизонтального выравнивания содержимого каждой ячейки данных
• vertical-align: Свойство CSS для вертикального выравнивания содержимого каждой ячейки данных
• width: Свойство CSS для управления рекомендуемой шириной ячеек данных
• :nth-of-type, :first-of-type, :last-of-type: Псевдоклассы CSS для выбора нужных ячеек данных