=> Главная База Знаний HTML 7.3. Структурирование таблицы


7.3. Структурирование таблицы

7.3. Структурирование таблицы

Кроме рассмотренных ранее возможностей по манипулированию таблицами, HTML поддерживает разбиение таблицы на логически цельные части: группы строк и столбцов. Для отдельных частей таблицы можно устанавливать общие параметры отображения данных, которые автоматически применяются браузером при отображении таблицы. Кроме того, в некоторых случаях структурирование таблицы позволяет сделать возможным отображение таблицы по частям по мере ее загрузки (если, конечно, это поддерживается браузером). Последняя возможность очень пригодится при использовании таблиц для формирования дизайна HTML‑документа.

Группировка строк

В любой добавляемой в HTML‑документ таблице можно выделить три логически цельных части: шапка, тело таблицы и «футер» (нижняя часть таблицы, footer). Эти части состоят из строк, то есть строки таблицы можно сгруппировать в шапку, тело и футер.

Рассматриваемые части таблицы задаются следующим образом: шапка обозначается HTML‑элементом THEAD ( и ), тело задается элементом TBODY ( и ), а футер – элементом TFOOT ( и ). Все закрывающие теги являются необязательными. Внутри этих HTML‑элементов (между задающими их тегами) помещаются строки, относящиеся к соответствующим частям таблицы (пример 7.6).

Пример 7.6. Задание частей таблицы

Первая строка шапки...Вторая строка шапки...Строка данных......Строка футера...

Данные таблицы задаются с использованием элементов TH и TD. В приведенном примере закрывающие теги элементов THEAD, TBODY и TFOOT можно опустить. Задавая различные значения атрибутам align, valign, bgcolor в открывающих тегах рассматриваемых HTML‑элементов, можно управлять отображением сразу всех ячеек той или иной части таблицы.

Любая таблица может содержать несколько частей, обозначенных элементом TBODY. Нужно также отметить, что принадлежность строк к телу таблицы подразумевается по умолчанию, то есть если в таблице есть строки, перед определением которых в тексте HTML‑документа не было ни , ни , то такие строки считаются заданными внутри элемента TBODY.

Чтобы продемонстрировать использование группировки строк таблицы на практике, можно модифицировать таблицу из примера 7.4 (пример 7.7).

Пример 7.7. Группировка строк таблицыГруппировка строк таблицы

Доходы от продаж за второе полугодие XXXXгода
Филиал\Период3 квартал4 квартал
ИюльАвгустСентябрьОктябрьНоябрьДекабрь
Филиал 1123123323233323453231423323212243673
Филиал 2223523225243314423212445373812274673
Филиал 3183123186834323453231423323212243673
Филиал 4125163334343123553167423254412132367
Всего:654932106965310848828427141274648894386

Таблица, задаваемая в примере 7.7, выглядит так, как показано на рис. 7.6.

Рис. 7.6. Таблица со сгруппированными строками

Чтобы подчеркнуть отделение частей таблицы друг от друга, задано отображение границ только между группами строк и столбцов (см. атрибут rules элемента TABLE). В приведенной таблице сгруппированы лишь строки, поэтому и отображаются только горизонтальные границы.

Описание и группировка столбцов

Помимо группировки строк таблицы, в HTML присутствуют элементы, позволяющие определять столбцы и формировать группы столбцов: HTML‑элементы COL и COLGROUP. Если элементы COL или COLGROUP используются, то они должны следовать до элементов, группирующих строки таблицы (или до первой строки данных при отсутствии явной группировки строк). Сначала будет рассмотрено использование элемента COL.

Итак, HTML‑элемент COL задается одиночным тегом . Этот элемент позволяет установить общие параметры отображения всех ячеек, входящих в столбец или столбцы, заданием следующих атрибутов:

• align – задает горизонтальное выравнивание текста ячеек столбца (столбцов), может принимать значения left, right, center или justify;

• valign – задает вертикальное выравнивание текста ячеек столбца (столбцов), может принимать значения top, bottom, middle или baseline;

• bgcolor – задает цвет фона ячеек столбца (столбцов);

• width – позволяет указать ширину столбца (столбцов);

• span – задает количество столбцов, к которым применяются параметры, заданные в описанных выше атрибутах (по умолчанию имеет значение 1).

Использование элемента COL не позволяет создавать группы столбцов – для этого используется HTML‑элемент COLGROUP. Однако использование элемента COL значительно облегчает настройку внешнего вида таблицы, позволяя задавать одинаковые настройки для нескольких столбцов одновременно. Например, чтобы создать таблицу, показанную на рис. 7.7, пришлось бы задавать значения атрибутов bgcolor почти для всех ячеек таблицы.

Рис. 7.7. Раскрашенная таблица

При использовании элемента COL все гораздо проще (пример 7.8).

Пример 7.8. Задание параметров отображения столбцовИспользование элемента COL

Доходы от продаж за второе полугодие XXXXгода
Филиал\Период3 квартал4 квартал
ИюльАвгустСентябрьОктябрьНоябрьДекабрь
Филиал 1123123323233323453231423323212243673
Филиал 2223523225243314423212445373812274673
Филиал 3183123186834323453231423323212243673
Филиал 4125163334343123553167423254412132367
Всего:654932106965310848828427141274648894386

В приведенном примере, кроме задания цвета столбцов, указание значения left атрибута align для первого столбца избавило от необходимости задавать для первой ячейки каждой строки выравнивание текста по левому краю, как это было в предыдущих примерах.

Обратите внимание, что в примере 7.8 также использовалось задание цвета двух первых и последней строки при помощи атрибута bgcolor элемента TR. В этом и подобных случаях при отображении каждой ячейки браузеры выбирают параметры в следующем порядке.

1. Атрибуты элементов TD и TH.

2. Атрибуты элемента TR.

3. Атрибуты элемента COL.

4. Атрибуты элемента COLGROUP.

5. Атрибуты элементов THEAD, TFOOT, TBODY.

6. Атрибуты элемента TABLE.

Приведенный список отражает приоритет, с которым используются значения каждого атрибута HTML‑элементов, описывающих данные таблицы. Проще всего это пояснить на примере 7.9.

Пример 7.9. Приоритеты элементов при отображении ячеек

Ячейка 1Ячейка 2

В данном случае ячейка с текстом Ячейка 1 будет иметь желтый фон, выравнивание по правому краю, ширину 300 пикселов. Ячейка с текстом Ячейка 2 будет отображаться аналогично первой, но с зеленым фоном.

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

......

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

Теперь, после достаточно долгого изучения HTML‑элемента COL, рассмотрим, как можно создавать группы столбцов таблицы с использованием элемента COLGROUP. Элемент COLGROUP задается парными тегами и (закрывающий тег необязателен). Он поддерживает тот же набор атрибутов, что и элемент COL.

Элемент COLGROUP может одновременно с группировкой задавать одинаковые параметры отображения всех столбцов группы аналогично тому, как это делается с использованием элемента COL. Однако если требуется задать различные значения атрибутов для разных столбцов группы, то нужно включить внутрь элемента COLGROUP описания всех столбцов таблицы с помощью элементов COL.

Например, если нужно создать группу из десяти столбцов, имеющих одинаковую ширину 30, а также одинаковые остальные параметры, то это можно сделать так:

или

или

...

В первом случае использовалась возможность задания параметров всех столбцов группы через установление соответствующих значений атрибутов элемента COLGROUP. Во втором случае внутри группы были явно определены десять столбцов. Использование третьего варианта в данном примере является нерациональным, хотя и допустимым.

Без явного определения столбцов не обойтись в том случае, если нужно включить в группу столбцы с различными параметрами отображения (например, с различным выравниванием). Допустим, нужно создать группу из десяти столбцов: выравнивание первого столбца левое, со второго по восьмой – правое, девятого и десятого – по центру. Группу столбцов наиболее кратко можно задать следующим образом:

Напоследок рассмотрим, как отразится наличие групп столбцов на отображении таблицы браузером. Можно дополнить таблицу из примера 7.7 группировкой столбцов следующим образом (оставлены только части текста HTML‑документа, отличные от приведенного в примере 7.7) (пример 7.10).

Пример 7.10. Группировка столбцовГруппировка строк и столбцов таблицы

......
Доходы от продаж за второе полугодие XXXXгода
Филиал 1...
Филиал 2...
Филиал 3...
Филиал 4...
Всего:...

Теперь таблица примет окончательный вид, показанный на рис. 7.8.

Рис. 7.8. Таблица со сгруппированными столбцами и строками

Особенности задания ширины столбцов

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

Дело в том, что самой трудной задачей при отображении таблицы является определение ширины как таблицы в целом, так и каждого столбца таблицы, а также определение количества столбцов в ней. Если ширина и количество столбцов не указаны явно, то браузер вынужден дожидаться загрузки всей таблицы, после чего определяется количество ячеек в самой длинной строке – количество столбцов. Ширина каждого столбца выбирается такой, чтобы поместить содержимое самой широкой ячейки этого столбца.

Чтобы браузер мог начать отображение таблицы по частям, он должен до получения первой строки с данными ячеек обладать сведениями о количестве и абсолютной (в пикселах) ширине каждого столбца, о созданных группах столбцов. Для этого нужно определить все столбцы с использованием COL или COLGROUP, а также указать ширину таблицы и ее столбцов так, чтобы абсолютные значения могли быть однозначно определены, например:

...

В этом случае точно известно, что таблица, содержащая два столбца, будет шириной 300 пикселов. На первый столбец приходится 30 пикселов и, соответственно, на второй – оставшиеся 270.

Можно также задавать для таблицы и ее столбцов процентную ширину, но это нужно делать внимательно, чтобы, зная размер окна браузера, можно было всегда однозначно определить точную ширину каждого столбца.