HTML тег <tbody>

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

Также для формирования структурных блоков в таблице могут быть использованы теги <thead> (заголовок) и <tfoot> (нижний колонтитул).

Элемент <tbody> располагается внутри тега <table> после элементов <caption>, <colgroup> (если таковые имеются), а также тега <thead>.

Для правильного отображения нижнего колонтитула в таблице элемент <tfoot> должен находиться перед элементом <tbody>.

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

Внутри элемента <table> можно использовать несколько тегов <tbody>.

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

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</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>месяц</th>
          <th>экономия</th>
        </tr>
      </thead>
      <tfoot style="background-color:grey;">
        <!-- <tfoot> помещается после <thead>, но отображается в нижней части таблицы. -->
        <tr>
          <td>общий</td>
          <td>1500</td>
        </tr>
      </tfoot>
      <tbody style="background-color:lightgrey;">
        <tr>
          <td>январь</td>
          <td>500</td>
        </tr>
        <tr>
          <td>февраль</td>
          <td>1000</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Результат

Атрибуты

Атрибут Значение Описание
align right
left
center
justify
char
Указывает способ выравнивания содержимого таблицы.
Не поддерживается в HTML5.
bgcolor bgcolor Определяет цвет фона ячеек, которые расположены внутри контейнера <tbody>.
Не поддерживается в HTML 5.
char character Указывает способ выравнивания содержимого элемента по заданному символу. Атрибут char используется только, если атрибут align = "char".
Не поддерживается в HTML 5.
charoff number Смещает содержимое ячеек относительно указанного символа. Используется, если атрибут align = "char".
Не поддерживается в HTML 5.
valign top
bottom
middle
baseline
Выравнивает содержимое внутри элемента по вертикали.
Не поддерживается в HTML 5.

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

Browser support




Related articles