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> ... </tfoot>
  <tbody>
    <tr>
      <td> ... </td>
    </tr>
  </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> поддерживает также глобальные атрибуты и атрибуты событий.


✓	✓	✓	✓	✓

✓

HTML тег <tbody>

Синтаксис

Пример

Результат

Атрибуты

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

Практикуйте свои знания