<tbody>
- 25 января 2023
Тег <tbody>
используется для группировки основного содержимого в таблице. Он является дочерним тегом элемента <table>
и используется для отделения разделов заголовка и колонтитула от строк данных в таблице.
Синтаксис тега <tbody>
<table>
<tbody>
<tr>
<td>Строка 1, столбец 1</td>
<td>Строка 1, колонка 2</td>
</tr>
<tr>
<td>Строка 2, колонка 1</td>
<td>Строка 2, колонка 2</td>
</tr>
</tbody>
</table>
Спецификация HTML
Тег является частью спецификации HTML Living Standard.
Семантический или нет
Тег <tbody>
считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.
Примеры использования
Группировка строк таблицы:
<table>
<thead>
<tr>
<th>Имя</th>
<th>Возраст</th>
</tr>
</thead>
<tbody>
<tr>
<td>Серёжа</td>
<td>25</td>
</tr>
<tr>
<td>Саша</td>
<td>30</td>
</tr>
</tbody>
</table>
Добавление стиля к строкам таблицы:
<table>
<tbody>
<tr class="even">
<td>Строка 1, столбец 1</td>
<td>Строка 1, колонка 2</td>
</tr>
<tr class="odd">
<td>Строка 2, колонка 1</td>
<td>Строка 2, колонка 2</td>
</tr>
</tbody>
</table>
Использование вложенных тегов <tbody>
:
<table>
<tbody>
<tr>
<td>Строка 1, столбец 1</td>
<td>Строка 1, колонка 2</td>
</tr>
<tbody>
<tr>
<td>Строка 2, колонка 1</td>
<td>Строка 2, колонка 2</td>
</tr>
</tbody>
</tbody>
</table>
Для чего использовать тег <tbody>
- для группировки данных в HTML-таблицу;
- чтобы по-разному стилизовать строки таблицы: добавьте класс или
id
к тегам<tr>
внутри<tbody>
для применения стилей CSS; - чтобы добавить обработчик событий к строкам таблицы: добавьте обработчики событий в теги
<tr>
внутри<tbody>
для обработки взаимодействия с пользователем; - для чередования цветов строк: используйте CSS для добавления чередующихся цветов фона к строкам внутри
<tbody>
; - добавление атрибутов данных к тегам
<tr>
внутри<tbody>
для хранения дополнительных данных.
Атрибуты тега <tbody>
У тега нет специфических атрибутов.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
Тег <tbody>
можно использовать только как дочерний тег <table>
.
Нюансы
Если тег <tbody>
не используется, браузер автоматически создаст его для группировки тегов <tr>
внутри тега code><table> .
Поддержка браузеров
Тег <tbody>
поддерживается всеми основными веб-браузерами.
Актуальная информация — на сaniuse.
Альтернативные теги
Альтернативных тегов для тега <tbody>
не существует.
Чем заменить тег
Прямой замены тегу <tbody>
не существует.
Актуальность
Тег <tbody>
не является устаревшим.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023