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

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

Попробуйте

<table>
  <caption>
    Alien football stars
  </caption>
  <thead>
    <tr>
      <th scope="col">Player</th>
      <th scope="col">Gloobles</th>
      <th scope="col">Za'taak</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">TR-7</th>
      <td>7</td>
      <td>4,569</td>
    </tr>
    <tr>
      <th scope="row">Khiresh Odo</th>
      <td>7</td>
      <td>7,223</td>
    </tr>
    <tr>
      <th scope="row">Mia Oolong</th>
      <td>9</td>
      <td>6,219</td>
    </tr>
  </tbody>
</table>

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

th[scope="col"] {
  background-color: #505050;
  color: white;
}

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

td {
  text-align: center;
}

tr:nth-of-type(even) {
  background-color: #eeeeee;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

Атрибуты

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

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: либо шестизначный шестнадцатеричный код 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) автоматически размещаются в свободных местах структуры таблицы, занимающих ячейки размером 1 × 1, как показано на следующем рисунке:

  

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

Примеры

Полный пример таблицы с описанием распространённых стандартов и рекомендаций см. в разделе <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: #eeeeee;
}

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

Результат

Объединение столбцов и строк

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

HTML

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

С помощью атрибута 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

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

tr:first-of-type td:last-of-type {
  width: 60px;
  background-color: #505050;
  color: white;
  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: #eeeeee;
}

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 для выбора нужных ячеек данных