Тег <colgroup>: оформление группы колонок таблицы
Colgroup описывает группу столбцов таблицы для некоторых настроек представления. Он не заменяет ячейки, строки и смысловые заголовки данных.
Назначение
Colgroup описывает группу столбцов таблицы для некоторых настроек представления. Он не заменяет ячейки, строки и смысловые заголовки данных.
Как это работает
Разместите colgroup после caption и перед группами строк. Внутри можно перечислить col; атрибут span у col обозначает число охваченных колонок. Набор действующих CSS-свойств для колонок ограничен.
Пример
<style>.schedule{border-collapse:collapse}.schedule td,.schedule th{padding:.6rem;border:1px solid #9caf9f}.schedule .time-column{background:#e8f4ec}</style>
<table class="schedule"><caption>Учебный план</caption>
<colgroup><col><col class="time-column"></colgroup>
<thead><tr><th scope="col">Тема</th><th scope="col">Минуты</th></tr></thead>
<tbody><tr><th scope="row">HTML</th><td>20</td></tr><tr><th scope="row">CSS</th><td>25</td></tr></tbody></table>Что должно получиться
Фон второй колонки выделяет время. Настройки рамок и отступов применены непосредственно к ячейкам, поэтому их результат не зависит от ошибочного ожидания наследования через col.
Граница применения и частая ошибка
Ячейки не являются потомками col в дереве DOM. Поэтому color, padding или text-align на колонке не стоит использовать как универсальный способ оформить её содержимое. Собственный фон ячеек может перекрыть фон колонки.
Самостоятельная проверка
Добавьте фон ко всем td и сравните результат. Затем задайте выравнивание второй колонки селектором ячеек. Объясните, почему видимая принадлежность к столбцу не означает вложенность элементов в DOM.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.