Шрифт:
Без явного определения столбцов не обойтись в том случае, если нужно включить в группу столбцы с различными параметрами отображения (например, с различным выравниванием). Допустим, нужно создать группу из десяти столбцов: выравнивание первого столбца левое, со второго по восьмой – правое, девятого и десятого – по центру. Группу столбцов наиболее кратко можно задать следующим образом:
<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>
Теперь таблица примет окончательный вид, показанный на рис. 7.8.
Рис. 7.8. Таблица со сгруппированными столбцами и строками
Особенности задания ширины столбцов
В начале главы было сказано, что структурирование может позволить браузеру не дожидаться загрузки всей таблицы, а отображать ее частями по мере получения данных. Теперь пришло время уточнить, какие параметры и как должны быть заданы для того, чтобы браузер мог начать рисовать таблицу по частям.
Дело в том, что самой трудной задачей при отображении таблицы является определение ширины как таблицы в целом, так и каждого столбца таблицы, а также определение количества столбцов в ней. Если ширина и количество столбцов не указаны явно, то браузер вынужден дожидаться загрузки всей таблицы, после чего определяется количество ячеек в самой длинной строке – количество столбцов. Ширина каждого столбца выбирается такой, чтобы поместить содержимое самой широкой ячейки этого столбца.
Чтобы браузер мог начать отображение таблицы по частям, он должен до получения первой строки с данными ячеек обладать сведениями о количестве и абсолютной (в пикселах) ширине каждого столбца, о созданных группах столбцов. Для этого нужно определить все столбцы с использованием COL или COLGROUP, а также указать ширину таблицы и ее столбцов так, чтобы абсолютные значения могли быть однозначно определены, например:
<TABLE width = 300>
<COLGROUP>
<COL width = 30>
<COL width = "*">
</COLGROUP>
<COLGROUP width = 50 span = 4>
...
</TABLE>
В этом случае точно известно, что таблица, содержащая два столбца, будет шириной 300 пикселов. На первый столбец приходится 30 пикселов и, соответственно, на второй – оставшиеся 270.
Можно также задавать для таблицы и ее столбцов процентную ширину, но это нужно делать внимательно, чтобы, зная размер окна браузера, можно было всегда однозначно определить точную ширину каждого столбца.
7.4. Использование таблиц для формирования дизайна HTML-документа
Ранее были рассмотрены возможности использования таблиц только по своему прямому назначению – для группировки данных. Теперь пришло самое время рассказать о применении таблиц для формирования дизайна HTML-документов. Здесь перед автором документа открываются поистине огромные возможности: точное позиционирование и упорядочивание элементов страницы, создание областей переменной или постоянной ширины и многие другие возможности, позволяющие сделать документ не только информативным, но и приятным глазу пользователя, удобным в использовании.
Использование таблиц в данном ключе будет рассмотрено на примере создания страницы, дизайн которой целиком на них основан. Создаваемая страница будет иметь элементы, расположенные так, как показано на рис. 7.9, и будет как бы электронной копией этой главы.
Рис. 7.9. Расположение элементов страницы
Для реализации задуманного можно использовать две таблицы. Первая таблица (пусть внешняя) имеет два столбца и две строки. Во вторую ячейку первой строки таблицы нужно поместить вложенную таблицу, содержащую одну строку из двух ячеек: для названия раздела и для рисунка-логотипа (см. рис. 7.9). В первой ячейке второй строки внешней таблицы помещаются гиперссылки на файлы примеров из этой главы книги, а во вторую ячейку помещается собственно текст.
С учетом всего вышеизложенного можно написать следующий HTML-документ (пример 7.11).
<HTML>
<HEAD>
<TITLE>Страница, построенная на таблицах</TITLE>
</HEAD>
<BODY>
<TABLE width = "100%">
<COL width = 100 align = left valign = top bgcolor = yellow>
<COL width = "*" align = justify valign = top>
<TR>
<TD bgcolor = white>
<TD>
<TABLE width = "100%">
<COL width = "*" align = center>
<COL width = 57> <!–Столбец растягивается по ширине изображения–>
<TR>
<TD bgcolor = yellow><H1>7. Таблицы</H1>
<TD><IMG src = "7.11.html.files/logo.jpg">
</TABLE>
<TR>
<TD> <!–В первом столбце помещаются гиперссылки на примеры–>
<A href = "7.1.html">Пример 7.1</A>
<A href = "7.2.html">Пример 7.2</A>
<A href = "7.3.html">Пример 7.3</A>
<A href = "7.4.html">Пример 7.4</A>
<A href = "7.5.html">Пример 7.5</A>
<A href = "7.6.html">Пример 7.6</A>
<A href = "7.7.html">Пример 7.7</A>
<A href = "7.8.html">Пример 7.8</A>
<A href = "7.9.html">Пример 7.9</A>
<A href = "7.10.html">Пример 7.10</A>
<TD> <!–Весь текст помещается в одной ячейке таблицы–>
Таблицы в том виде, в котором они реализованы в HTML,
являются замечательным средством упорядочивания данных.
Кроме группировки информации, таблицы являются чрезвычайно полезными при разработке дизайна HTML-документа.
В данном разделе рассмотрены оба способа использования таблиц.
Но для начала разберемся с тем, как добавлять таблицы в HTML-документ, а также рассмотрим возможности,
предоставляемые HTML для работы с таблицами.
<H2>Структура простейшей таблицы</H2>
Таблица в HTML представляется множеством ячеек, которые заключены в строки. Совокупность же всех строк и образует целую таблицу. Для обозначения таблицы используется HTML-
элемент TABLE, который задается парными обязательными тегами <TABLE> и </TABLE>.
Строки таблицы задаются HTML-элементом TR (парные теги
<TR> и </TR>, закрывающий тег необязателен).
Ячейки в простейшем случае задаются HTML-элементом TD (парные теги <TD> и </TD>, закрывающий тег необязателен).
</TABLE>
</BODY>
</HTML>