<tbody> Элемент тела таблицы HTML

Элемент <tbody> HTML включает в себя набор строк таблицы (элементов <tr>), указывая, что они составляют тело (основную часть данных) таблицы.

Попробуйте

<table>
  <caption>
    Council budget (in £) 2018
  </caption>
  <thead>
    <tr>
      <th scope="col">Items</th>
      <th scope="col">Expenditure</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Donuts</th>
      <td>3,000</td>
    </tr>
    <tr>
      <th scope="row">Stationery</th>
      <td>18,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Totals</th>
      <td>21,000</td>
    </tr>
  </tfoot>
</table>

thead,
tfoot {
  background-color: #2c5e77;
  color: white;
}

tbody {
  background-color: #e4f0f5;
}

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;
}

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

td {
  text-align: center;
}

Атрибуты

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

Устаревшие атрибуты

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

align

Задаёт горизонтальное выравнивание каждой ячейки тела таблицы. Возможные перечислимые значения: left, center, right, justify и char. Если поддерживается, значение char выравнивает текстовое содержимое по символу, заданному атрибутом char, и со смещением, заданным атрибутом charoff. Вместо этого используйте CSS-свойство text-align, поскольку этот атрибут устарел.

bgcolor

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

char

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

charoff

Задаёт количество символов, на которое содержимое ячейки тела таблицы смещается относительно символа выравнивания, заданного атрибутом char.

valign

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

Примечания по использованию

• Элемент <tbody> располагается после элементов <caption>, <colgroup> и <thead>.
• Если элементы <tr> указаны как непосредственные дочерние элементы <table> (описание случаев, когда это допустимо, см. в разделе «Пропуск тегов» технического описания), браузер добавит в разметку элемент <tbody>, который включает их в себя. Поэтому CSS-селекторы, такие как table > tr, не выберут эти элементы. См. также пример «Не указывать тело таблицы».
• В одной таблице разрешено использовать несколько элементов <tbody>, если они идут подряд. Это позволяет разделить строки (элементы <tr>) больших таблиц на секции, каждую из которых при желании можно форматировать отдельно. Если в разметке эти элементы не идут подряд, браузеры исправят эту ошибку автора и обеспечат отображение элементов <thead> и <tfoot> соответственно первыми и последними в таблице.
• Вместе со связанными элементами <thead> и <tfoot> элемент <tbody> предоставляет полезную семантическую информацию и может использоваться при отображении на экране или при печати. Указание таких групп содержимого таблицы также предоставляет важную контекстную информацию вспомогательным технологиям, включая программы чтения с экрана и поисковые системы.
• При печати документа с многостраничной таблицей элементы <thead> и <tfoot> обычно содержат информацию, которая остаётся одинаковой или очень похожей на каждой странице, тогда как содержимое элемента <tbody> обычно различается от страницы к странице.
• Если таблица отображается на экране (например, в окне), размер которого недостаточен для показа всей таблицы, пользовательский агент может позволить пользователю прокручивать содержимое блоков <thead>, <tbody>, <tfoot> и <caption> отдельно друг от друга в пределах одного родительского элемента <table>.

Примеры

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

Не указывать тело таблицы

В этом примере показано, что браузер автоматически включает элементы <tr> в элемент <tbody>, если строки не вложены в элемент группировки таблицы (<tbody>, <tfoot> или <thead>) и, как в этом примере, являются непосредственными дочерними элементами <table>.

HTML

Здесь создаётся очень простая таблица с несколькими строками таблицы (элементами <tr>), содержащими данные об учащихся (элементы <td>).

<table>
  <tr>
    <td>3741255</td>
    <td>Jones, Martha</td>
    <td>Computer Science</td>
    <td>240</td>
  </tr>
  <tr>
    <td>3971244</td>
    <td>Nim, Victor</td>
    <td>Russian Literature</td>
    <td>220</td>
  </tr>
  <tr>
    <td>4100332</td>
    <td>Petrov, Alexandra</td>
    <td>Astrophysics</td>
    <td>260</td>
  </tr>
</table>

CSS

Обратите внимание на CSS в примере: для элемента <tbody> задано свойство background-color, а tbody используется как часть дополнительного CSS-селектора. Также наличие элемента <tbody> в DOM можно проверить с помощью инструментов разработчика браузера.

tbody {
  background-color: #e4f0f5;
}

tbody > tr > td:last-of-type {
  width: 60px;
  text-align: center;
}

Результат

Базовая структура тела таблицы

В этом примере расширяется и дополняется простая таблица из предыдущего примера.

HTML

Мы добавляем заголовок таблицы (элемент <thead>) и явно используем элемент <tbody>, чтобы разделить таблицу на семантические секции. Заголовок таблицы содержит заголовки столбцов (элементы <th>). Элемент <tbody> представляет секцию тела таблицы, в которой содержится несколько строк (элементов <tr>) с основными данными таблицы — информацией о каждом учащемся.

Использование таких групп содержимого таблицы и семантической разметки полезно не только для визуального представления (с помощью стилей CSS) и предоставления контекстной информации вспомогательным технологиям. Кроме того, явное использование элемента <tbody> помогает браузеру создать нужную структуру таблицы и избежать нежелательных результатов.

<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
      <th>Major</th>
      <th>Credits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>Computer Science</td>
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>Russian Literature</td>
      <td>220</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>Astrophysics</td>
      <td>260</td>
    </tr>
  </tbody>
</table>

CSS

CSS почти не изменился по сравнению с предыдущим примером, за исключением базового оформления заголовка таблицы, чтобы заголовки столбцов отличались от данных в её теле. Как и в предыдущем примере, для оформления ячеек тела таблицы используется tbody селектор типа.

tbody {
  background-color: #e4f0f5;
}

tbody > tr > td:last-of-type {
  text-align: center;
}

thead {
  border-bottom: 2px solid rgb(160 160 160);
  background-color: #2c5e77;
  color: white;
}

Результат

Несколько секций тела таблицы

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

Использование нескольких элементов <tbody> позволяет создавать группы строк в таблице. У каждого тела таблицы может быть одна или несколько строк заголовка. Однако в таблице может быть только один элемент <thead>! Поэтому для создания заголовков внутри каждого <tbody> можно использовать <tr> с элементами <th>.

HTML

В таблицу из предыдущего простого примера добавляются новые учащиеся. Вместо того чтобы указывать специальность каждого учащегося в каждой строке, учащиеся сгруппированы по специальностям. Обратите внимание: каждая специальность заключена в отдельный блок <tbody>. Первая строка (элемент <tr>) служит заголовком блока: в ней указано название специальности внутри элемента <th>, который использует атрибут colspan, чтобы растянуть заголовок на все три столбца таблицы. Каждая из остальных строк в <tbody> соответствующей специальности представляет одного учащегося.

<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
      <th>Credits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="3">Computer Science</th>
    </tr>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>240</td>
    </tr>
    <tr>
      <td>4077830</td>
      <td>Pierce, Benjamin</td>
      <td>200</td>
    </tr>
    <tr>
      <td>5151701</td>
      <td>Kirk, James</td>
      <td>230</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3">Russian Literature</th>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>220</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3">Astrophysics</th>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>260</td>
    </tr>
    <tr>
      <td>8892377</td>
      <td>Toyota, Hiroko</td>
      <td>240</td>
    </tr>
  </tbody>
</table>

CSS

Большая часть CSS не изменилась. Однако добавлен немного более сдержанный стиль для ячеек заголовка, находящихся непосредственно внутри <tbody> (в отличие от ячеек в <thead>). Этот стиль применяется к заголовкам, обозначающим соответствующую специальность в каждой секции таблицы.

tbody > tr > th {
  border-top: 2px solid rgb(160 160 160);
  border-bottom: 1px solid rgb(140 140 140);
  background-color: #e4f0f5;
  font-weight: normal;
}

tbody {
  background-color: whitesmoke;
}

thead {
  background-color: #2c5e77;
  color: white;
}

• Узнайте: основы таблиц HTML
• <caption>, <col>, <colgroup>, <table>, <td>, <tfoot>, <th>, <thead>, <tr>: другие элементы, связанные с таблицами
• background-color: CSS-свойство для задания цвета фона каждой ячейки тела таблицы
• border: CSS-свойство для управления границами ячеек тела таблицы
• text-align: CSS-свойство для горизонтального выравнивания содержимого каждой ячейки тела таблицы
• vertical-align: CSS-свойство для вертикального выравнивания содержимого каждой ячейки тела таблицы