HTML: Популярный самоучитель
Шрифт:
Использование элемента COL не позволяет создавать группы столбцов – для этого используется HTML-элемент COLGROUP. Однако использование элемента COL значительно облегчает настройку внешнего вида таблицы, позволяя задавать одинаковые настройки для нескольких столбцов одновременно. Например, чтобы создать таблицу, показанную на рис. 7.7, пришлось бы задавать значения атрибутов bgcolor почти для всех ячеек таблицы.
Рис. 7.7. Раскрашенная таблица
При использовании элемента COL все гораздо проще (пример 7.8).
<TITLE>Использование элемента COL</TITLE>
<TABLE align = center border = 3 bordercolor = black rules = groups>
<CAPTION align = top><B>Доходы от продаж за второе полугодие XXXX
года</B></CAPTION>
<!–Определение столбцов таблицы–>
<COL align = left bgcolor = green>
<COL span = 3 bgcolor = blue>
<COL span = 3 bgcolor = yellow>
<THEAD>
<!–формирование первой строки шапки таблицы–>
<TR bgcolor = magenta>
<TH rowspan = 2>Филиал\Период
<TH colspan = 3>3 квартал
<TH colspan = 3>4 квартал
<!–формирование второй строки шапки (названия месяцев)–>
<TR bgcolor = magenta>
<TH>Июль<TH>Август<TH>Сентябрь
<TH>Октябрь<TH>Ноябрь<TH>Декабрь
<TBODY align = right>
<!–далее следуют строки с данными (первая ячейка каждой строки – название филиала–>
<TR><TD>Филиал 1<TD>123123<TD>323233<TD>323453
<TD>231423<TD>323212<TD>243673
<TR><TD>Филиал 2<TD>223523<TD>225243<TD>314423
<TD>212445<TD>373812<TD>274673
<TR><TD>Филиал 3<TD>183123<TD>186834<TD>323453
<TD>231423<TD>323212<TD>243673
<TR><TD>Филиал 4<TD>125163<TD>334343<TD>123553
<TD>167423<TD>254412<TD>132367
<TBODY align = right>
<!–Строка с итоговыми данными–>
<TR bgcolor = red><TD>Всего:<TD>654932<TD>1069653
<TD>1084882<TD>842714<TD>1274648<TD>894386
</TABLE>
В приведенном примере, кроме задания цвета столбцов, указание значения left атрибута align для первого столбца избавило от необходимости задавать для первой ячейки каждой строки выравнивание текста по левому краю, как это было в предыдущих примерах.
Обратите внимание, что в примере 7.8 также использовалось задание цвета двух первых и последней строки при помощи атрибута bgcolor элемента TR. В этом и подобных случаях при отображении каждой ячейки браузеры выбирают параметры в следующем порядке.
1. Атрибуты элементов TD и TH.
2. Атрибуты элемента TR.
3. Атрибуты элемента COL.
4. Атрибуты элемента COLGROUP.
5. Атрибуты элементов THEAD, TFOOT, TBODY.
6. Атрибуты элемента TABLE.
Приведенный список отражает приоритет, с которым используются значения каждого атрибута HTML-элементов, описывающих данные таблицы. Проще всего это пояснить на примере 7.9.
<TABLE width = 300>
<THEAD align = center bgcolor = yellow>
<TR align = right>
<TD>Ячейка 1
<TD bgcolor = green>Ячейка 2
</THEAD>
</TABLE>
В данном случае ячейка с текстом Ячейка 1 будет иметь желтый фон, выравнивание по правому краю, ширину 300 пикселов. Ячейка с текстом Ячейка 2 будет отображаться аналогично первой, но с зеленым фоном.
Следует сказать несколько слов о возможностях задания значения атрибута width. Итак, значением атрибута может быть либо абсолютная ширина ячеек в пикселах, либо доля от ширины таблицы (в процентах), либо относительный или пропорциональный размер ячеек.
...
<COL width = "2*">
<COL width = "3*">
<COL width = "30%">
...
Кроме того, пусть таблица имеет ширину 100 пикселов. Сначала вычисляются процентные размеры, а потом пропорциональные, поэтому третий столбец таблицы будет иметь ширину 30. Оставшиеся 70 пикселов распределяются между первым и вторым столбцами в соотношении 2:3, то есть ширина этих столбцов получится равной 70 : 5 x 2 = 28 и 70 : 5 x 3 = 42 соответственно.
Теперь, после достаточно долгого изучения HTML-элемента COL, рассмотрим, как можно создавать группы столбцов таблицы с использованием элемента COLGROUP. Элемент COLGROUP задается парными тегами <COLGROUP> и </COLGROUP> (закрывающий тег необязателен). Он поддерживает тот же набор атрибутов, что и элемент COL.
Элемент COLGROUP может одновременно с группировкой задавать одинаковые параметры отображения всех столбцов группы аналогично тому, как это делается с использованием элемента COL. Однако если требуется задать различные значения атрибутов для разных столбцов группы, то нужно включить внутрь элемента COLGROUP описания всех столбцов таблицы с помощью элементов COL.
Например, если нужно создать группу из десяти столбцов, имеющих одинаковую ширину 30, а также одинаковые остальные параметры, то это можно сделать так:
<COLGROUP span = 10 width = 30>
или
<COLGROUP>
<COL span = 10 width = 30>
</COLGROUP>
или
<COLGROUP>
<COL width = 30>
<COL width = 30>
...
</COLGROUP>
В первом случае использовалась возможность задания параметров всех столбцов группы через установление соответствующих значений атрибутов элемента COLGROUP. Во втором случае внутри группы были явно определены десять столбцов. Использование третьего варианта в данном примере является нерациональным, хотя и допустимым.
Без явного определения столбцов не обойтись в том случае, если нужно включить в группу столбцы с различными параметрами отображения (например, с различным выравниванием). Допустим, нужно создать группу из десяти столбцов: выравнивание первого столбца левое, со второго по восьмой – правое, девятого и десятого – по центру. Группу столбцов наиболее кратко можно задать следующим образом:
<COLGOUP>
<COL align = left>
<COL span = 7 align = right>
<COL span = 2 align = center>
</COLGROUP>
Напоследок рассмотрим, как отразится наличие групп столбцов на отображении таблицы браузером. Можно дополнить таблицу из примера 7.7 группировкой столбцов следующим образом (оставлены только части текста HTML-документа, отличные от приведенного в примере 7.7) (пример 7.10).
<TITLE>Группировка строк и столбцов таблицы</TITLE>
<TABLE align = center border = 3 bordercolor = black rules = groups>
<CAPTION align = top><B>Доходы от продаж за второе полугодие XXXX
года</B></CAPTION>
<COLGROUP align = left>
<COLGROUP span = 3>
<COLGROUP span = 3>
<THEAD>
...
<TBODY align = right>
...
<TR><TD>Филиал 1...
<TR><TD>Филиал 2...
<TR><TD>Филиал 3...
<TR><TD>Филиал 4...
<TBODY align = right>
<TR><TD>Всего:...
</TABLE>