Тег <tbody>: основная группа строк таблицы
Tbody группирует основные строки с данными. Явная запись этой группы делает структуру таблицы понятнее и помогает писать предсказуемые CSS-селекторы и запросы JavaScript.
Назначение
Tbody группирует основные строки с данными. Явная запись этой группы делает структуру таблицы понятнее и помогает писать предсказуемые CSS-селекторы и запросы JavaScript.
Как это работает
В одной таблице допустимы несколько последовательных tbody для отдельных групп. Браузер при разборе HTML может добавить tbody вокруг строк автоматически, поэтому реальный DOM иногда отличается от краткой исходной разметки.
Пример
<style>tbody+tbody{border-top:3px solid #467957}table{border-collapse:collapse}td,th{padding:.5rem}</style>
<table><caption>Этапы практики</caption><thead><tr><th scope="col">Этап</th><th scope="col">Задание</th></tr></thead><tbody><tr><th scope="row">Подготовка</th><td>Создать файл</td></tr></tbody><tbody><tr><th scope="row">Проверка</th><td>Открыть страницу</td></tr></tbody></table>Что должно получиться
Две группы данных разделены рамкой, но остаются частями одной таблицы с общей шапкой. Селектор соседних tbody не затрагивает первую группу.
Граница применения и частая ошибка
Tbody не создаёт видимый заголовок группы автоматически. Не вставляйте между группами произвольный div: содержимое table имеет специальные правила разбора. Визуальный разделитель не заменяет понятные подписи, если группировка важна для чтения.
Самостоятельная проверка
Посмотрите дерево элементов и найдите оба tbody. Затем в учебной копии уберите явный tbody у простой таблицы и сравните исходник с DOM. Объясните, почему селектор table > tr может ничего не найти.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.