В статье об Объединении ячеек и строк в таблице мы рассматривали, как совместить 2 и более столбцов или строк с помощью атрибутов colspan и rowspan.
Но также можно создать группы строк, используя теги <thead>, <tbody>, <tfoot>, и группы столбцов с помощью тегов <col> и <colgroup>. В основном их стоит применять для упрощения css-форматирования таблицы.
Создание групп строк тегами <thead>, <tfoot>, <tbody>
В любой таблице чаще всего будет присутствовать "шапка" и "подвал", т.е. верхняя заголовочная часть таблицы и нижняя завершающая. Чаще всего они будут различаться, но, если таблица большая, "шапка" и "подвал" могут дублировать друг друга.
Для определения верхней части таблицы служат теги <thead></thead>. Вы можете заключить в него любое количество строк. Располагаться эти теги должны в верхней части таблицы, до тега <tbody>, но после тегов <caption> и <colgroup>, если они присутствуют в таблице. В браузере блок <thead></thead> будет всегда расположен сверху.
За нижнюю часть таблицы отвечает блок <tfoot></tfoot>. Аналогично <thead></thead> он размещается в верхней части таблицы, до тега <tbody>, но при этом будет выведен браузером всегда внизу. Довольно часто этот блок дублирует содержимое <thead>.
После блоков <thead></thead> и <tfoot></tfoot> может быть несколько блоков <tbody></tbody>, которые отвечают за тело таблицы, т.е. основные ее строки. Имеет смысл делить их на несколько групп <tbody></tbody>, если ваша таблица представляет собой, например, длинный прайс с различными группами товаров. Тогда каждую такую группу товаров можно выделить, скажем, цветом фона, назначив для нее какой-либо класс.
По умолчанию, у этих элементов имеются такие стили:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | tfoot { display: table-footer-group; } thead { display: table-header-group; } tbody { display: table-row-group; } thead, tfoot, tbody { vertical-align: middle; border-color: inherit; } |
HTML 4.01 эти теги имели такие атрибуты: align, valign, char, charoff. Имейте ввиду, что ни один из атрибутов HTML 4.01 не поддерживается в HTML5, т.к. они могут быть заменены css-форматированием.
Имеет смысл использовать объединение по строкам для больших таблиц вроде прайсов. Для маленьких можно обойтись назначением стилей для строк и ячеек.
Рассмотрим пример таблицы, в которой представлены цены для групп товаров (это только малая часть реальной таблицы из интернет-магазина). Код таблицы примерно таков (сокращен для удобочитаемости):
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | <table> <thead> <tr> <th>Производитель</th> <th>Артикул</th> <th>Название</th> <th>Цена, UAH</th> </tr> </thead> <tfoot> <tr> <th>Производитель</th> <th>Артикул</th> <th>Название</th> <th>Цена, UAH</th> </tr> </tfoot> <tbody> <tr> <td colspan="4">3D ручки</td> </tr> <tr> <td>Polaroid</td> <td>PL-2000-00</td> <td>3D ручка Polaroid PL-2000-00</td> <td>1583,10</td> </tr> <tr> <td>Polaroid</td> <td>PL-2002-00</td> <td>3D ручка Polaroid PL-2002-00</td> <td>1583,10</td> </tr> <tr> ... </tr> <tr> ... </tr> </tbody> <tbody> <tr> <td colspan="4">Action-камеры</td> </tr> <tr> <td>GoPro</td> <td>CHDHB-601-RW</td> <td>Экшн-камера GoPro Hero 7 White (CHDHB-601-RW)</td> <td>7418,94</td> </tr> <tr> <td>Sigma</td> <td>X-Sport C44 Bike</td> <td>Экшн-камера Sigma mobile X-Sport C44 Bike Black</td> <td>2066,69</td> </tr> <tr> ... </tr> <tr> ... </tr> <tr> ... </tr> </tbody> <tbody> <tr> <td colspan="4">GPS-навигаторы</td> </tr> <tr> <td>Globex</td> <td>GE512</td> <td>Авто GPS-Навигатор Globex GE512 Navitel</td> <td>2118,94</td> </tr> <tr> ... </tr> <tr> ... </tr> </tbody> </table> |
Ниже представлен CSS-код для такой таблицы.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | table { border: 2px solid #0058ff; border-collapse: collapse; width: 96%; max-width: 850px; margin: 10px auto; } thead,tfoot { background-color: #0058ff; color: #fff; } td,th { padding: 5px; border: 1px solid #0058ff; } tbody td[colspan] { text-align: center; font-size: 1.1em; font-weight: bold; background-color: #89abeb; } tbody:nth-child(odd) { background-color: #cde; } |
Сама таблица имеет такой внешний вид после применения стилей (открыть файл в новой вкладке):
Объединение по столбцам. Теги <col> и <colgroup>
Теги <thead>, <tfoot> и <tbody> хороши в том случае, когда необходимо выделить что-либо в таблице в виде горизонтальных блоков и отформатировать их. В случае же, если нужно управлять вертикальными блоками, т.е. столбцами, нужен другой подход, а именно использование тегов <col> и <colgroup>. Эти теги размещают после тега <caption> или сразу после тега <table>.
Тег <col> (от англ. column — колонка) подразумевает, что вы выполняете форматирование одного столбца. Этот тег можно использовать либо самостоятельно, либо внутри тега <colgroup>, который, собственно, и предназначен для группирования нескольких колонок. В HTML5 для <col> можно использовать только атрибуты style и span для объединения стилей для нескольких столбцов. Минусом является то, что в атрибуте style доступно только очень небольшое количество стилевых свойств, а именно: border, background, width, visibility. Остальные свойства не оказывают никакого действия на форматируемый столбец, хотя было бы неплохо задать, например, выравнивание по правому краю или сделать более жирным шрифт. Но увы - это недоступно для <col>.
Для примера используем ту же таблицу с ценами, несколько уменьшив ее ширину. Добавим тег <caption> и 4 тега <col> с несколько разными значениями доступных стилевых свойств:
| 1 2 3 4 5 | <caption>Таблица цен</caption> <col style="width: 100px; background-color: #cde; border-right: 1px solid #0058ff;"> <col style="width: 110px; background-color: #bbd5ef; border-right: 3px double #436cba;"> <col style="min-width: 30%; background-color: #9bc3eb; border-right: 3px dashed #436cba;"> <col style="width: 95px; background-color: #70a3d6;"> |
Вот такая таблица получилась в итоге (открыть в новой вкладке).
Интересно, что если заглянуть в Инспектор свойств браузера (F12 или Ctrl + Shift +I), то Chrome, например, самостоятельно добавит в разметку тег <colgroup>, оборачивающий все наши теги <col>. Это видно на скриншоте:
Объединение столбцов для форматирования атрибутом span в теге <col>
Рассмотрим еще один вариант использования тега <col>, но уже с атрибутом span. Этот атрибут говорит о том, что мы объединяем 2 и более колонки единым форматированием. Т.е. в таблице ниже у нас не одна, а 2 рядом стоящие колонки будут шириной в 100px каждая, с желтым цветом фона и двухпиксельной рамкой справа оранжевого цвета. Следующую колонку мы пропускаем - об этом свидетельствует пустой тег <col>, а последняя имеет похожие на первые 2 стилевые свойства.
| 1 2 3 | <col style="width: 100px; background-color: #f8c247; border-right: 2px solid #ff5800;" span="2"> <col> <col style="width: 95px; background-color: #f8c247; border-left: 2px solid #ff5800;"> |
Внешний вид таблицы смотрим ниже и в новой вкладке.
Тег <colgroup> имеет смысл использовать для оформления сразу нескольких столбцов. Внутри этого тега, как вы уже видели на скриншоте, можно размещать теги <col> с отличным друг от друга форматированием. Т.е. в атрибуте style тега <colgroup> можно описать общие правила для всех столбцов, которые подлежат форматированию, а во вложенных в <colgroup> тегах <col> - характерные для каждого отдельного столбца, если, разумеется, у них есть отличия. Сколько столбцов подлежат форматированию с помощью тега <colgroup> указывается цифрой в его атрибуте span. В <colgroup>, как и в <col> можно использовать только такие стилевые свойства: border, background, width, visibility.
Рассмотрим пример, в котором объединены средние столбцы таблицы в группу:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <table> <colgroup style="background-color: darkseagreen;"> <col style="background-color: #fff;"> <col span="8" style="border: 2px solid #08892f;"> <col style="background-color: #8fe38f; width: 80px;"> </colgroup> <thead> <tr> <th rowspan="2">Фамилия Имя</th> <th colspan="8">Задание</th> <th rowspan="2">Итого</th> </tr> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> <th>8</th> </tr> </thead> <tbody> <tr> <td>Андросов Владимир</td> <td>+</td> <td>+</td> <td>-</td> <td>-</td> <td>+</td> <td>-</td> <td>+</td> <td>+</td> <td>5</td> </tr> <tr> <td>Буряк Андрей</td> <td>+</td> <td>+</td> <td>+</td> <td>-</td> <td>+</td> <td>+</td> <td>-</td> <td>-</td> <td>5</td> </tr> <tr> <td>Волошенко Даниил</td> <td>+</td> <td>-</td> <td>+</td> <td>-</td> <td>+</td> <td>-</td> <td>+</td> <td>-</td> <td>4</td> </tr> ... </tbody> </table> |
В верхней части кода нас интересуют теги <colgroup> и вложенные в него <col>. Можно заметить, что всей группе столбцов задан зеленый цвет фона(style="background-color: darkseagreen;"), в первом <col> фон переопределяется, как белый, а затем 8 столбцов (именно столько задано в атрибуте span) имеют одинаковый border: 2px solid #08892f. Последний <col> в этой группе также имеет другой цвет фона и ширину в 80px.
CSS-свойства для этой таблицы таковы:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | table { border: 2px solid #08892f; border-collapse: collapse; width: 96%; max-width: 700px; margin: 10px auto; } td,th { padding: 7px; } tr {border: 2px solid #08892f;} td:last-child { text-align: center; font-weight: bold; color: #fff; } |
Обратите внимание, что именно в css заданы свойства для последнего столбца, выравнивающие текст по центру, задающие ему цвет и жирность. Причем сделано это для селектора ячеек (td), а псевдоэлемент :last-child показывает, что это именно последняя ячейка каждой строки.
Результат разметки + css-свойств получился таким (см. файл в новой вкладке):
Несколько переформатируем таблицу выше для нового примера и сделаем несколько групп для того, чтобы протестировать еще раз работу тега <colgroup>. В приведенном коде самый первый тег <col> не имеет никаких атрибутов, т.е. фактически форматирование для него соответствует заданному только css-правилами для таблицы. Далее идут 3 группы столбцов, форматирование которых определяют теги <colgroup>, имеющие стилевые свойства для фона и рамки и атрибут span, указывающий количество столбцов, подчиняющихся заданному форматированию.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <table> <col> <colgroup span="3" style="background-color: darkseagreen;border-left: 2px solid #08892f;"></colgroup> <colgroup span="3" style="background-color: #f5ff00;border-left: 2px solid #08892f;"></colgroup> <colgroup span="2" style="background-color: #25e2b6;border: 2px solid #08892f;"></colgroup> <thead> <tr> <th rowspan="3">Фамилия Имя</th> <th colspan="8">Задание</th> <th rowspan="3">Итого</th> </tr> <tr><th colspan="3">Группа 1</th><th colspan="3">Группа 2</th><th colspan="2">Группа 3</th></tr> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> <th>8</th> </tr> </thead> <tbody> <tr> <td>Андросов Владимир</td> <td>+</td> <td>+</td> <td>-</td> <td>-</td> <td>+</td> <td>-</td> <td>+</td> <td>+</td> <td>5</td> </tr> <tr> <td>Буряк Андрей</td> <td>+</td> <td>+</td> <td>+</td> <td>-</td> <td>+</td> <td>+</td> <td>-</td> <td>-</td> <td>5</td> </tr> ... </tbody> </table> |
CSS для этой таблицы взят полностью из предыдущего примера. Изменен только цвет текста последней ячейки каждой строки.
Пример работы тегов <colgroup> вживую (открыть в новой вкладке):
Теги col и colgroup были единственным вариантом назначения форматирования столбцов в HTML 4.01. Они поддерживали такие атрибуты, как align, char, charoff, span, valign, width, из которых актуальным остался только span, все остальные считаются в HTML5 устаревшими.
