Урок №2
[colgroup] - опции и значения КОЛОНКИ
Тег
<colgroup>, исходя из названия -
Группировка КОЛОНОК, предназначен для задания ширины и стиля одной или нескольких колонок таблицы. Этот тег позволяет уменьшить код таблицы за счет сокращения повторяющихся атрибутов, и при наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки. Обычно закрывающий тег не требуется.
Разница между свойствами тегов
<colgroup> и
<col> не очень велика и состоит в следующем:
<colgroup> позволяет объединять колонки в определенные группы, также, при добавлении атрибута
rules="groups" к тегу
<table>, браузер будет рисовать линию только между колонками, созданными с помощью
<colgroup>. В остальных случаях поведение колонок назначенных через элементы
<colgroup> и
<col> идентично. Поэтому мы выбрасываем из обихода тег
<col>.
Здесь нужно уяснить самое важное:
- Тег <colgroup> не обязательный параметр и если его не использовать, то браузер, по содержимому колонок, строк и ячеек, сам автоматически задаст ширину каждой колонке таблицы. Но часто бывает, когда вам необходимо строго выставить ширину и некоторые прочие характеристики каждой колонке именно так, а не иначе.
- При использовании этого тега, будет необходимо вставлять его столько раз, сколько в таблице намечается колонок, т.е. вставляем этот тег прямо друг за другом столько раз, сколько имеем столбцов в таблице. Так же, в каждом данном теге необходимо указать опцию ширины столбца в пикселях или в процентах.
- Теги закрывать не обязательно, поэтому он всегда встраивается сразу после открытия основного тега таблицы <table>, перечисляя каждую колонку. Однако в BB-коде он по любому будет закрываться, что не запрещается, но внутри тега, между его открытием и следом закрытием, никакие данные не вставляются. Тег только открывается, к нему пишутся опции и он тут же закрывается.
- Если в таблице следом друг за другом идут одинаковые по ширине и оформлению колонки, то этим тегом можно сразу за один раз объединить эти колонки в одну группу по стилю оформления. Делается это через опцию span со значением количества объединяемых единым оформлением колонок.
Пример синтаксиса:
Допустим, мы рисуем таблицу с 7-ю колонками и 4-мя строчками. 1-я колонка у нас основная под "
Наименование товара", следующие 5 колонок все одинаковые под "Количество завоза товара" каждый день рабочей недели, а последняя 7-я колонка пошире под общее количество.
Таким образом, синтаксис у нас будет такой:
[table="width='650' cellpadding='2' cellspacing='0' border='1' rules='groups'"]
[colgroup="width='200'"][/colgroup]
[colgroup="span='5' align='center' width='70'"][/colgroup]
[colgroup="width='100' align='center'"][/colgroup]
[tr="bgcolor='#00ff00'"]
[td=""][B]Наименование товара[/B][/td]
[td=""][B]Пн[/B][/td]
[td=""][B]Вт[/B][/td]
[td=""][B]Ср[/B][/td]
[td=""][B]Чт[/B][/td]
[td=""][B]Пт[/B][/td]
[td=""][B]ИТОГО[/B][/td]
[/tr]
[tr=""]
[td=""][B]Футболка трикотаж[/B][/td]
[td=""]3[/td]
[td=""]5[/td]
[td=""]2[/td]
[td=""]7[/td]
[td=""]1[/td]
[td=""]18[/td]
[/tr]
[tr=""]
[td=""][B]Джинсы Levi's[/B][/td]
[td=""]2[/td]
[td=""]3[/td]
[td=""]1[/td]
[td=""]1[/td]
[td=""]2[/td]
[td=""]9[/td]
[/tr]
[tr=""]
[td=""][B]Шнурки для ботинок[/B][/td]
[td=""]20[/td]
[td=""]36[/td]
[td=""]12[/td]
[td=""]16[/td]
[td=""]40[/td]
[td=""]124[/td]
[/tr]
[/table]
Вот так эта таблица выглядет:
| Наименование товара | Пн | Вт | Ср | Чт | Пт | ИТОГО |
| Футболка трикотаж | 3 | 5 | 2 | 7 | 1 | 18 |
| Джинсы Levi's | 2 | 3 | 1 | 1 | 2 | 9 |
| Шнурки для ботинок | 20 | 36 | 12 | 16 | 40 | 124 |
Собственно, как мы видим, вертикальным бордюром отделена только 1-ая и последняя колонки, т.к. 5 колонок посередине мы сгруппировали
colgroup="span='5' с одинаковой шириной 70 пикселей и отцентрировали. А так как в теге [table] мы указали border='1' и указали
rules='groups', поэтому бордюрами обозначились не все ячейки, а только сгруппированные. То есть, внутри группы бордюр не применяется.
Хотя Опера моя всё-таки отображает
бледные бордюрчики в сгруппированных колонках, но разные браузеры трактуют это каждый по своему.
Рассмотрим, какие доступны опции (или атрибуты) для тега
[colgroup=""]:
Опции или Атрибуты
Атрибут | Значение | Определение |
align | left
center
right
justify | Выравнивание таблицы по левому краю
Выравнивание таблицы по центру
Выравнивание таблицы по правому краю
Выравнивание по левому и правому краю |
char | Символ | Атрибут char заставляет выравниваться содержимое колонки по заданному символу. Эта возможность может пригодиться для выравнивания колонки дробных чисел по точке или запятой. Работает только в том случае, если значение атрибута align установлено как char |
charoff | Любое целое положительное или отрицательное число | Если атрибут align установлен как char, а для атрибута char в качестве значения задан символ, то с помощью атрибута charoff можно смещать содержимое ячейки влево или вправо относительно заданного символа. Так, charoff='3' означает, что браузер должен сместить содержимое ячейки на три символа вправо, а charoff='-3' — сместить на три символа влево. |
span | Целое число | Определяет число колонок, к которым будут применяться заданные характеристики. Если этот атрибут отсутствует, то тег <colgroup> работает для одной колонки. Допускается применять атрибут span к нескольким колонкам и таким образом формировать группы колонок с одинаковыми характеристиками. |
valign | baseline
bottom
middle
top | Выравнивание по базовой линии
Выравнивание по нижнему краю
Выравнивание по середине
Выравнивание по верхнему краю строки |
width | Значение в пикселах или процентах | Задает ширину колонки. Если общая ширина содержимого превышает указанную ширину, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в колонке находятся изображения, атрибут width будет проигнорирован, и новая ширина колонки будет вычислена на основе ее содержимого. |