HTML <tbody> тег

  • Предыдущая страница <table>
  • Следующая страница <td>

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

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

<tbody> элементы вместе с <thead> и <tfoot> элементы结合起来, чтобы определить каждую часть таблицы (текст, заголовок, подзаголовок).

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

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

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

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

пример

пример 1

HTML-таблица, содержащая элементы <thead>, <tbody> и <tfoot>:

<table>
  <thead>
    <tr>
      <th>Месяц</th>
      <th>Сбережения</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Январь</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Февраль</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>итого</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Попробуйте сами

пример 2

Использование CSS для установки стиля <thead>, <tbody> и <tfoot>:

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
  граница: 1 пиксель твердой черной линии;
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Месяц</th>
      <th>Сбережения</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Январь</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Февраль</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>итого</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Попробуйте сами

пример 3

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

<table style="width:100%">
  <thead>
    <tr>
      <th>Месяц</th>
      <th>Сбережения</th>
    </tr>
  </thead>
  <tbody style="text-align:right">
    <tr>
      <td>Январь</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Февраль</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Попробуйте сами

пример 4

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

<table style="width:50%;">
  <tr>
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tbody style="vertical-align:bottom">
    <tr style="height:100px">
      <td>Январь</td>
      <td>￥3400</td>
    </tr>
    <tr style="height:100px">
      <td>Февраль</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Попробуйте сами

Глобальные свойства

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

Свойства событий

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

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

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

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

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка
  • Предыдущая страница <table>
  • Следующая страница <td>