HTML - тег <tbody>


Пример

HTML-таблица с элементами <thead>, <tbody> и <tfoot>:

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

Другие примеры «Попробуйте сами» ниже.


Определение и использование

Тег <tbody>используется для группировки основного содержимого в таблице HTML.

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

Браузеры могут использовать эти элементы для включения прокрутки тела таблицы независимо от верхнего и нижнего колонтитула. Кроме того, при печати большой таблицы, занимающей несколько страниц, эти элементы позволяют печатать верхний и нижний колонтитулы вверху и внизу каждой страницы.

Примечание . Внутри <tbody>элемента должен быть один или несколько тегов <tr> .

Тег <tbody>должен использоваться в следующем контексте: как дочерний элемент <table> , после любых элементов <caption> , <colgroup> и <thead> .

Совет: элементы <thead > <tbody>, и <tfoot> по умолчанию не влияют на макет таблицы. Однако вы можете использовать CSS для стилизации этих элементов (см. пример ниже)!


Поддержка браузера

Element
<tbody> Yes Yes Yes Yes Yes

Глобальные атрибуты

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


Атрибуты события

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



Дополнительные примеры

Пример

Стиль <thead>, <tbody> и <tfoot> с помощью CSS:

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}

table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

Пример

Как выровнять содержимое внутри <tbody> (с помощью CSS):

<table style="width:100%">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody style="text-align:right">
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

Пример

Как выровнять содержимое внутри <tbody> по вертикали (с помощью CSS):

<table style="width:50%;">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tbody style="vertical-align:bottom">
    <tr style="height:100px">
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr style="height:100px">
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

Настройки CSS по умолчанию

Большинство браузеров будут отображать <tbody>элемент со следующими значениями по умолчанию:

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}