HTML - тег <tbody> определяет содержимое тела (набор строк) HTML-таблицы, создавая в ней отдельный семантический блок. Тег <tbody> используется вместе с тегами <thead> и <tfoot>, которые определяют верхний и нижний колонтитул таблицы соответственно.
Тег <tbody> - синтаксис и код
Тег <tbody> представлен парами. Содержимое записывается между открывающим (<tbody>) и закрывающим (</tbody>) тегами.
Пример кода HTML таблиц с элементами <thead>, <tbody> и <tfoot>:
<table>
<thead>
<tr>
<th>Месяц</th>
<th>Экономия</th>
</tr>
</thead>
<tbody>
<tr>
<td>Январь</td>
<td>10000 ₽</td>
</tr>
<tr>
<td>Февраль</td>
<td>5000 ₽</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Итого:</td>
<td>15000 ₽</td>
</tr>
</tfoot>
</table>
| Месяц |
Экономия |
| Январь |
10000 ₽ |
| Февраль |
5000 ₽ |
| Итого: |
15000 ₽ |
Определение и использование
- HTML - тег
<tbody> используется для группировки содержимого тела в таблице HTML.
- Элемент
<tbody> используется вместе с элементами <thead> и <tfoot> для указания каждой части таблицы (тело, заголовок, нижний колонтитул).
Браузеры могут использовать эти элементы для прокрутки тела таблицы независимо от верхнего и нижнего колонтитула. Кроме того, при печати большой таблицы, занимающей несколько страниц, эти элементы позволяют печатать верхний и нижний колонтитулы таблицы вверху и внизу каждой страницы.
Тег <tbody> необходимо использовать в следующем контексте:
- в качестве дочернего элемента <table>.
- после любых элементов <caption>, <colgroup> и <thead>.
✪ Рекомендация: элементы <thead>, <tbody> и <tfoot> по умолчанию не влияют на макет таблицы. Однако вы можете использовать CSS для стилизации этих элементов.
★
Примечание: внутри элемента
<tbody> должен быть один или несколько тегов
<tr>.
Поддержка <tbody> браузерами
 |
Поддерживает |
 |
Поддерживает |
 |
Поддерживает |
 |
Поддерживает |
 |
Поддерживает |
Еще примеры
Пример оформления <thead>, <tbody> и <tfoot> с помощью CSS:
<html>
<head>
<style>
thead {color: green;}
tbody {color: yellow;}
tfoot {color: red;}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Месяц</th>
<th>Экономия</th>
</tr>
</thead>
<tbody>
<tr>
<td>Январь</td>
<td>10000 ₽</td>
</tr>
<tr>
<td>Февраль</td>
<td>5000 ₽</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Итого:</td>
<td>15000 ₽</td>
</tr>
</tfoot>
</table>
</body>
</html>
| Месяц |
Экономия |
| Январь |
10000 ₽ |
| Февраль |
5000 ₽ |
| Итого: |
15000 ₽ |
Атрибуты
Тег <tbody> также поддерживает глобальные атрибуты в HTML
Атрибуты событий
Тег <tbody> также поддерживает атрибуты событий в HTML
Связанные страницы
Руководство по HTML: таблицы HTML
Настройки CSS по умолчанию
Большинство браузеров отображают элемент tbody со следующими значениями по умолчанию:
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.
