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. Итак, значением атрибута может быть либо абсолютная ширина ячеек в пикселах, либо доля от ширины таблицы (в процентах), либо относительный или пропорциональный размер ячеек. Для задания пропорционального размера используется запись вида width = "i*", где i является целым положительным числом ("*" интерпретируется как "1*"). Рассмотрим, каким образом по пропорциональному размеру определяется абсолютный размер. Пусть есть столбцы, заданные в следующем виде:

...

<COL width = "2*">

<COL width = "3*">

<COL width = "30%">

...

Кроме того, пусть таблица имеет ширину 100 пикселов. Сначала вычисляются процентные размеры, а потом пропорциональные, поэтому третий столбец таблицы будет иметь ширину 30. Оставшиеся 70 пикселов распределяются между первым и вторым столбцами в соотношении 2:3, то есть ширина этих столбцов получится равной 70 : 5 × 2 = 28 и 70 : 5 × 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).

Пример 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...
-= 71 =-
Регистрация.
Забыли пароль?
Логин
Пароль
Запомнить меня