Группировка столбцов.

Группировать можно не только строки, но и столбцы таблицы с помощью тегов < col> и/или < colgroup> данные теги позволяют определить основные параметры столбцов таблицы с помощью следующих атрибутов:

· width - Ширина столбца в процентах или пикселях.

· align - Выравнивает текст в ячейке:

o left - по левому краю.

o right - по правому краю.

o center - по центру.

o justify - по левому и правому краю.

· valign - Выравнивает текст в ячейке по вертикали:

o top - по верхнему краю.

o middle - по центру.

o bottom - по нижнему краю.

o baseline - по базовой линии.

· bgcolor - Цвет фона ячейки.

· span - Количество столбцов, к которым следует применять параметры.

Давайте сгруппируем колонки нашей пробной таблицы про энергетическую ценность продуктов питания, она у нас состоит из пяти столбцов, значит, после тега < table> следует написать, что-то типа:

< col width=" 140" bgcolor=" #deb887" >
< col width=" 100" bgcolor=" #faebd7" >
< col width=" 100" bgcolor=" #faebd7" >
< col width=" 100" bgcolor=" #faebd7" >
< col width=" 60" bgcolor=" #f5f5dc" >

Для каждой колонки свой тег < col> с указанными параметрами, где первый тег это описание левой колонки таблицы. второй тег - группирует вторую колонку и далее по порядку..

Обратите внимание, что в нашей таблице вторая, третья и четвертая колонки имеют одинаковые параметры width=" 100" bgcolor=" #faebd7" так вот чтобы не прописывать каждую одинаковую колонку отдельно можно воспользоваться атрибутом span, который указывает какое количество последующих колонок имеет идентичные параметры. В нашем случае запись приобретёт следующий вид:

< col width=" 140" bgcolor=" #deb887" >
< col span=" 3" width=" 100" bgcolor=" #faebd7" >
< col width=" 60" bgcolor=" #f5f5dc" >

Таким образом мы указали, что три колонки, начиная со второй, имеют одинаковую ширину и цвет фона. Представьте, если бы таких колонок было штук пятьдесят? как бы мы облегчили код.

Ну а вот собственно рабочий пример наших стараний:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Группировка столбцов< /title>
< /head>
< body>
< table width=" 500" border=" 1" cellpadding=" 3" cellspacing=" 0" >
< caption> < b> Энергетическая ценность продуктов питания: < /b> < /caption>
< col width=" 140" bgcolor=" #deb887" >
< col span=" 3" width=" 100" bgcolor=" #faebd7" >
< col width=" 60" bgcolor=" #f5f5dc" >
< thead title=" Шапка" >
< tr>
< th> Продукт< /th> < th> Белки< /th> < th> Жиры< /th> < th> Углеводы< /th> < th> ккал< /th>
< /tr>
< /thead>
< tbody align=" left" title=" Энергетическая ценность продуктов питания" >
< tr>
< th> Хлеб ржаной< /th> < td> 4, 7< /td> < td> 0, 7< /td> < td> 49, 8< /td> < td> 214< /td>
< /tr>
< tr>
< th> Молоко< /th> < td> 2, 8< /td> < td> 3, 2< /td> < td> 4, 7< /td> < td> 58< /td>
< /tr>
< tr>
< th> Картофель< /th> < td> 2< /td> < td> 0, 1< /td> < td> 19, 7< /td> < td> 83< /td>
< /tr>
< tr>
< th> Свинина< /th> < td> 11, 4< /td> < td> 49, 3< /td> < td> 9< /td> < td> 489< /td>
< /tr>
< /tbody>
< tfoot align=" left" title=" Итого: " >
< tr>
< th> Итого: < /th> < td> 20, 9< /td> < td> 53, 3< /td> < td> 83, 2< /td> < td> 844< /td>
< /tr>
< /tfoot>
< /table>
< /body>
< /html>

Тег < colgroup> практически идентичен тегу < col> и имеет точно такие же атрибуты, так наш выше изложенный пример мог бы иметь такой вид:

< colgroup width=" 140" bgcolor=" #deb887" >
< colgroup span=" 3" width=" 100" bgcolor=" #faebd7" >
< colgroup width=" 60" bgcolor=" #f5f5dc" >

Никакой заметной разницы мы бы не увидели. Однако, некоторые отличия всё же есть.. Во-первых, < colgroup> может служить емкостью тля тегов < col>, конструкция такая:

< colgroup>
< col>
< /colgroup>

Во-вторых, если бы мы к тегу < table> применили атрибут rules со значением groups (об этом атрибуте речь пойдёт ниже) эффект будет достигнут только при использовании < colgroup>.

Больше никакой разницы между этими тегами нет.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> colgroup< /title>
< /head>
< body>
< table border=" 1" >
< colgroup bgcolor=" #deb887" align=" left" >
< col span=" 3" width=" 20" >
< /colgroup>
< colgroup bgcolor=" #faebd7" align=" center" >
< col span=" 2" width=" 40" >
< col width=" 60" >
< /colgroup>
< colgroup bgcolor=" #f5f5dc" align=" right" >
< col width=" 20" >
< col width=" 30" >
< col width=" 50" >
< /colgroup>
< tr>
< td> 20< /td> < td> 20< /td> < td> 20< /td> < td> 40< /td> < td> 40< /td> < td> 60< /td> < td> 20< /td>

< td> 30< /td> < td> 50< /td>
< /tr>
< tr>
< td> 20< /td> < td> 20< /td> < td> 20< /td> < td> 40< /td> < td> 40< /td> < td> 60< /td> < td> 20< /td>

< td> 30< /td> < td> 50< /td>
< /tr>
< tr>
< td> 20< /td> < td> 20< /td> < td> 20< /td> < td> 40< /td> < td> 40< /td> < td> 60< /td> < td> 20< /td>

< td> 30< /td> < td> 50< /td>
< /tr>
< tr>
< td> 20< /td> < td> 20< /td> < td> 20< /td> < td> 40< /td> < td> 40< /td> < td> 60< /td> < td> 20< /td>

< td> 30< /td> < td> 50< /td>
< /tr>
< /table>
< /body>
< /html>

Обратите внимание, что в этом примере колонки таблицы поделены на три группы с помощью < colgroup>, в этих группах мы указали цвет фона и способ выравнивания, а ширину колонок мы задаём с помощью тегов < col>, которые находятся внутри контейнеров < colgroup>.

Как и в случае с группировкой строк, колонки группируются с основной целью дальнейшего воздействия на них через стили или скрипты.