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

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

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

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

align Устаревший

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

bgcolor Устаревший

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

char Устаревший

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

charoff Устаревший

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

valign Устаревший

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

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

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

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

HTML

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

<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 в примере, где задан background-color для элемента <tbody> и используется 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: #fff;
}

Результат

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

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

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: #fff;
}

Результат

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