HTML: Популярный самоучитель - Александр Чиртик

<TR align = right><TD align = left>Филиал 2<TD>223523<TD>225243

<TD>314423<TD>212445<TD>373812<TD>274673

<TR align = right><TD align = left>Филиал 3<TD>183123<TD>186834

<TD>323453<TD>231423<TD>323212<TD>243673

<TR align = right><TD align = left>Филиал 4<TD>125163<TD>334343

<TD>123553<TD>167423<TD>254412<TD>132367

</TABLE>

Внешний вид таблицы представлен на рис. 7.5.

Рис. 7.5. Таблица с объединенными ячейками

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

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

В этой главе говорится только о тексте внутри ячеек. Но это совсем не значит, что в ячейках таблиц могут содержаться только текстовые данные. Каждая ячейка таблицы может включать графику, внедренные объекты, списки, вложенные таблицы – практически все, что можно поместить в тело HTML‑документа. Именно возможность помещения в ячейки таблицы любых данных используется в примере описываемой в конце главы страницы, целиком построенной на использовании таблицы.

Ячейки заголовков

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

Чтобы избавиться от необходимости задания текста заголовочных ячеек вручную (да и для того, чтобы лучше структурировать содержимое HTML‑документа), можно использовать элемент TH. Этот HTML‑элемент задается парными тегами <TH> и </TH> (закрывающий тег необязателен). Использование TH аналогично использованию элемента TD. При этом не нужно заботиться о внешнем виде текста заголовочных ячеек: браузер автоматически выделит их содержимое.

Итак, для использования возможностей HTML‑элемента TH рассмотренный ранее пример 7.4 можно переписать следующим образом (многоточие – строки с данными, аналогичными из примера 7.4) (пример 7.5).

<TITLE>Применение ячеек заголовков</TITLE>

<TABLE align = center border = 3 bordercolor = black>

<CAPTION align = top><B>Доходы от продаж за второе полугодие XXXX

года</B></CAPTION>

<!–формирование первой строки шапки таблицы–>

<TR>

<TH rowspan = 2>ФилиалПериод

<TH colspan = 3>3 квартал

<TH colspan = 3>4 квартал

<!–формирование второй строки шапки (названия месяцев)–>

<TR>

<TH>Июль<TH>Август<TH>Сентябрь

<TH>Октябрь<TH>Ноябрь<TH>Декабрь

<!–далее следуют строки с данными (первая ячейка каждой строки – название филиала–>

...

</TABLE>

При обработке браузером приведенного HTML‑документа получится результат, аналогичный показанному на рис. 7.5.

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

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

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

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

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

<TABLE>

<THEAD>

<TR>Первая строка шапки...

<TR>Вторая строка шапки...

</THEAD>

<TBODY>

<TR>Строка данных...

...

</TBODY>

<TFOOT>

<TR>Строка футера...

</TFOOT>

</TABLE>

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

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

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

<TITLE>Группировка строк таблицы</TITLE>

<TABLE align = center border = 3 bordercolor = black rules = groups>

<CAPTION align = top><B>Доходы от продаж за второе полугодие XXXX

года</B></CAPTION>

<THEAD>

<!–формирование первой строки шапки таблицы–>

<TR>

<TH rowspan = 2>ФилиалПериод

<TH colspan = 3>3 квартал

<TH colspan = 3>4 квартал

<!–формирование второй строки шапки (названия месяцев)–>

<TR>

<TH>Июль<TH>Август<TH>Сентябрь

<TH>Октябрь<TH>Ноябрь<TH>Декабрь

<TBODY align = right>

<!–далее следуют строки с данными (первая ячейка каждой строки – название филиала–>

<TR><TD align = left>Филиал 1<TD>123123<TD>323233

<TD>323453<TD>231423<TD>323212<TD>243673

<TR><TD align = left>Филиал 2<TD>223523<TD>225243

<TD>314423<TD>212445<TD>373812<TD>274673

<TR><TD align = left>Филиал 3<TD>183123<TD>186834

<TD>323453<TD>231423<TD>323212<TD>243673

<TR><TD align = left>Филиал 4<TD>125163<TD>334343

<TD>123553<TD>167423<TD>254412<TD>132367

<TBODY align = right>

<!–Строка с итоговыми данными–>

<TR><TD align = left>Всего:<TD>654932<TD>1069653

<TD>1084882<TD>842714<TD>1274648<TD>894386

</TABLE>

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

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

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

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

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

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

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

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

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

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

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

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