W3docs
ru
Войти

HTML тег <tbody>

Тег <tbody> определяет основное содержимое HTML-таблицы. Используется вместе с <thead> и <tfoot>. Смотрите примеры.

Тег <tbody> определяет основное содержимое (набор строк) HTML-таблицы, создавая отдельный семантический блок внутри неё. Он используется вместе с тегами <thead> и <tfoot>, которые задают заголовок и подвал таблицы соответственно. Вместе эти три элемента делят таблицу на шапку, тело и подвал — что упрощает чтение разметки, её стилизацию и делает таблицу доступной для вспомогательных технологий.

Тег <tbody> должен быть дочерним элементом <table>, располагаться после <caption> и <colgroup> (если они есть) и после элемента <thead>. В HTML5 элемент <tfoot> может располагаться до или после элемента <tbody> — оба варианта допустимы, при этом <tfoot> всегда отображается внизу таблицы независимо от его позиции в исходном коде.

Зачем нужен <tbody>

Даже если вы никогда не пишете тег <tbody>, браузер создаёт его за вас. Когда вы помещаете строки <tr> непосредственно внутрь <table>, парсер автоматически оборачивает их в неявный <tbody>. Это имеет практические последствия:

  • CSS-селекторы. Из-за неявного <tbody> селектор-потомок вида table > tbody > tr соответствует строкам, даже если вы не писали этот тег, тогда как table > tr не соответствует ничему. Понимание этого помогает избежать ошибок вида «мой селектор не работает».
  • Группировка строк. Таблица может содержать несколько элементов <tbody>, что позволяет разделить длинную таблицу на логические секции (например, по году или категории), каждую из которых можно стилизовать и прокручивать независимо.
  • Скриптинг DOM. Каждый элемент <table> предоставляет коллекцию tBodies в JavaScript (table.tBodies[0]), что даёт прямой доступ к каждой группе тела без обхода дочерних узлов.
  • Печать. При печати длинной таблицы, занимающей несколько страниц, браузеры повторяют <thead> и <tfoot> на каждой странице, тогда как содержимое <tbody> перетекает со страницы на страницу.
Совет

Элементы <thead>, <tbody> и <tfoot> не влияют на макет таблицы по умолчанию. Используйте свойства CSS для настройки внешнего вида таблицы.

При печати документа элементы <thead> и <tfoot> будут определять информацию, которая может быть одинаковой или очень похожей на каждой странице многостраничной таблицы, тогда как содержимое тега <tbody> будет варьироваться от страницы к странице.

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

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

Синтаксис

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

HTML тег <tbody>

<table>
  <thead> ... </thead>
  <tfoot> ... </tfoot>
  <tbody>
    <tr>
      <td> ... </td>
    </tr>
  </tbody>
</table>

Пример HTML тега <tbody>:

HTML тег <tbody>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      th, td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%; margin:30px auto; border-collapse:collapse;">
      <thead style="background-color:#1c87c9; color:#fff;">
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tfoot style="background-color:grey;">
        <!-- <tfoot> is placed after <thead>, but is shown on the bottom of the table. -->
        <tr>
          <td>Total</td>
          <td>1500</td>
        </tr>
      </tfoot>
      <tbody style="background-color:lightgrey;">
        <tr>
          <td>January</td>
          <td>500</td>
        </tr>
        <tr>
          <td>February</td>
          <td>1000</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Попробуйте сами »

Результат

Пример tbody

Пример HTML тега <tbody> с тегами <thead> и <tfoot>:

HTML тег <tbody>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 60%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      thead {
        background-color: #8ebf42;
        color: #fff;
      }
      tbody {
        background-color: #f3ebeb;
      }
      tfoot {
        background-color: #ccc7c7;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666666;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>January</td>
          <td>1500</td>
        </tr>
        <tr>
          <td>February</td>
          <td>1000</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Total</td>
          <td>2500</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>
Попробуйте сами »

Пример нескольких элементов <tbody>

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 60%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666666;
        text-align: left;
      }
      thead {
        background-color: #1c87c9;
        color: #fff;
      }
      tbody:nth-of-type(odd) {
        background-color: #f3ebeb;
      }
      tbody:nth-of-type(even) {
        background-color: #e3f0fb;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>January</td>
          <td>500</td>
        </tr>
        <tr>
          <td>February</td>
          <td>1000</td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td>March</td>
          <td>750</td>
        </tr>
        <tr>
          <td>April</td>
          <td>1200</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Доступность

Элементы <tbody>, <thead> и <tfoot> помогают программам чтения с экрана передавать структуру таблицы. Для максимально доступной таблицы сочетайте их с ячейками заголовков, использующими атрибут scope, чтобы вспомогательные технологии могли сообщить, к какому заголовку относится ячейка с данными:

<table>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">January</th>
      <td>500</td>
    </tr>
  </tbody>
</table>

Используйте scope="col" для заголовков столбцов (как правило, внутри <thead>) и scope="row" для заголовков строк внутри тела таблицы.

Атрибуты

АтрибутЗначенияОписание
alignright left center justify charЗадаёт выравнивание содержимого внутри элемента <tbody>. Не поддерживается в HTML5
bgcolorbgcolorУстанавливает цвет фона строк внутри элемента <tbody>. Не поддерживается в HTML5.
charcharacterЗадаёт выравнивание содержимого внутри элемента <tbody> по символу. Используется только при атрибуте align="char". Не поддерживается в HTML5.
charoffnumberЗадаёт количество символов, на которое содержимое элемента <tbody> будет выровнено относительно символа, указанного в атрибуте char. Используется только при атрибуте align="char". Не поддерживается в HTML5.
valigntop bottom middle baselineЗадаёт вертикальное выравнивание содержимого внутри элемента <tbody>. Не поддерживается в HTML5.

Тег <tbody> также поддерживает глобальные атрибуты и атрибуты событий.

CSS-замены устаревших атрибутов

Перечисленные выше атрибуты оформления устарели в HTML5. Используйте вместо них CSS:

Устаревший атрибутCSS-замена
align="center"text-align: center;
valign="top"vertical-align: top;
bgcolor="#eee"background-color: #eee;

Как стилизовать HTML тег <tbody>

Обращайтесь к элементу <tbody> напрямую в вашей таблице стилей, чтобы задать телу таблицы собственный фон, границы и выравнивание ячеек:

tbody {
  background-color: #f3ebeb;
  border: 2px solid #1c87c9;
}

tbody td {
  text-align: center;
  vertical-align: top;
}

/* Zebra-stripe the body rows */
tbody tr:nth-of-type(even) {
  background-color: #e3f0fb;
}

Смотрите раздел стилизация таблиц с помощью CSS для получения дополнительных техник.

Практика

Практика
Что делает HTML тег tbody?
Что делает HTML тег tbody?
Was this page helpful?