- •3.1. Структура простейшей таблицы
- •Заголовок таблицы
- •Параметры отображения таблицы
- •Параметры отображения строк таблицы
- •Параметры отображения ячеек. Слияние ячеек
- •Ячейки заголовков
- •3.3. Структурирование таблицы
- •Группировка строк
- •Описание и группировка столбцов
- •1. Атрибуты элементов td и th.
- •Особенности задания ширины столбцов
1. Атрибуты элементов td и th.
2. Атрибуты элемента TR.
3. Атрибуты элемента COL.
4. Атрибуты элемента COLGROUP.
5. Атрибуты элементов THEAD, TFOOT, TBODY.
6. Атрибуты элемента TABLE.
Приведенный список отражает приоритет, с которым используются значения каждого атрибута HTML?элементов, описывающих данные таблицы. Проще всего это пояснить на примере 7.9.
Пример 3.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>
Напоследок рассмотрим, как отразится наличие групп столбцов на отображении таблицы браузером. Можно дополнить таблицу из примера 3.7 группировкой столбцов следующим образом (оставлены только части текста HTML?документа, отличные от приведенного в примере 3.7) (пример 3.10).
Пример 3.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>
Теперь таблица примет окончательный вид, показанный на рис. 3.8.
Рис. 3.8. Таблица со сгруппированными столбцами и строками