Рис. 2. Простейшая табличная верстка веб-страницы: рамок таблицы не должно быть видно

Да, примерно так (рис. 2). Но только без рамок.

Откуда они взялись? Из "образцовой" таблицы, которую мы скопировали, не особо задумываясь над значениями отдельных частей. А напрасно: внешний вид таблицы определяется ее параметрами. В данном случае параметр border в теге <TABLE> - явно лишний. Если его убрать, исчезнет и рамка.

Вообще, параметры таблицы делятся на три группы: для всей таблицы, для строки и для отдельной ячейки.

Параметры таблицы

Выравнивание

Ну как же без него! Что бы мы ни делали на странице, атрибут align неотвязно нас преследует. Впрочем, лично я на него не в претензии: очень помогает в самых разных случаях. А то, что он везде одинаков, помогает еще больше.

В теге <TABLE> атрибут align "отвечает" за выравнивание таблицы относительно краев окна браузера (или ячейки другой, большей таблицы, внутрь которой она вставлена). Если таблица не занимает всей ширины отведенного ей пространства, то она:

• прижимается к левому краю, если align=left;
• прижимается к правому краю, если align=right;
• выравнивается по центру, если align=center.

Куда девается свободное место справа, слева и по бокам от таблицы, соответственно?

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

<TABLE align=right>
 ...
</TABLE>
<FONT color=brown><I>Мы всегда рады видеть Вас у нас!</I></FONT>

Габариты

Для того чтобы вид страницы не так сильно зависел от размеров окна браузера, в теге <TABLE> задают минимальную ширину и высоту таблицы при помощи параметров width и height, соответственно. Есть два способа задать габариты: абсолютный (в пикселях) и относительный (в процентах от ширины окна). Последний способ верстки веб-страниц (когда размеры таких объектов, как рисунки и таблицы, задаются в процентах) иногда называют "резиновым" дизайном - за то, что при изменении размеров окна такие страницы как бы растягиваются или сжимаются, сохраняя основные пропорции. Так, чтобы избежать описанной выше неприятной ситуации, можно ограничить ширину таблицы, например, половиной окна, заменив первую строчку кода на такую:

<TABLE align=right width=50% border=1>

Внутренние размеры

Таких размеров у таблицы два. Первый - это расстояние между границей ячейки и границей текста. Оно измеряется в пикселях и определяется параметром cellpadding. Не начинать же текст прямо от рамки! Это неаккуратно. Здесь нужен некоторый отступ. И только в том случае, если рамка невидима, можно себе позволить сделать это расстояние нулевым. И то не всегда.

Второй размер… Для того чтобы понять, что это такое, нужно внимательно присмотреться к веб-таблицам. Обратите внимание: на самом деле их рамки двойные - каждая ячейка как бы заключена в собственное "окошко". Между соседними "окошками" обычно остается некий зазор. Вот его-то ширина и определяется параметром cellspacing - опять же, в пикселях. Например, если присвоить нашей таблице параметры

<TABLE border=1 cellspacing=40 cellpadding=25>

то отступ между ячейками составит 40, а между границей ячеек и текстом - 25 пикселей.

Рамки

У рамки веб-таблицы две характеристики: толщина и цвет. Толщина задается в пикселях при помощи параметра border, причем в теге <TABLE> этот параметр определяет толщину внешней рамки (рис. 3):

<TABLE border=15>

Рис. 3. На самом деле рамка двумерная

Здесь сразу бросаются в глаза две особенности. Во-первых, рамка "трехмерная". А во-вторых, если параметра border не указывать вовсе, то и рамки у таблицы не будет. Вообще никакой. Этим последним обстоятельством мы воспользовались в примере на рис. 2. И любой, кто провел в интернете больше получаса, подтвердит, что мы здесь далеко не первопроходцы…

За цвет рамки "отвечает" несколько параметров. Почему? А вот посмотрим. Предположим, что в нашем распоряжении есть всего один параметр для цвета рамки - bordercolor. По умолчанию рамка черно-серая. Попробуем заменить ее цвет, например, на зеленый:

<TABLE border=15 bordercolor=lightgreen>

Рис. 4. Что получится, если покрасить рамку в зеленый цвет?

<TABLE border=15 bordercolorlight=red bordercolordark=blue>

Рис. 5. Раскраска рамки в два цвета

Сокрытие рамок

Итак, если мы хотим рамку, нужно указать параметр border, если не хотим - не следует его указывать… А если хотим, но не везде? Например, как быть, если нужно отобразить только вертикальные границы, как между газетными столбцами?

За отображение разных частей внешней рамки таблицы "отвечает" параметр frame, а за отображение рамок отдельных ячеек (при этом внешняя рамка отображается всегда) - параметр rules. Их значения приведены в таблицах 1 и 2, соответственно.

Таблица 1. Значения параметра frame

Цвет внутренней части

Наконец, нужно как-то описать фон ячеек. Это делается при помощи параметров bgcolor и background. Здесь они используются точно так же, как и в теге <BODY> , только распространяются не на всю страницу, а только на содержимое тега <TABLE>: bgcolor определяет цвет фона в формате #RRGGBB, а параметр background ссылается на файл с фоновым изображением, обычно в формате JPG или GIF.

Заголовок таблицы

В нашем примере для заголовка страницы использован логический тег <H1>. Но при желании ее структуру можно сделать еще строже - определить название фирмы как заголовок таблицы при помощи тега <CAPTION>:

<TABLE>
<CAPTION>
<H1 align=center> <FONT color=slateblue> Название фирмы </FONT> </H1>
</CAPTION>
 ...
</TABLE>

Зачем бы это могло понадобиться?

Ну, во-первых, вообще приятно, когда некий виртуальный объект обладает всеми атрибутами своего реального прототипа. Ведь у обычных, "бумажных" таблиц почти всегда есть если не надпись, так подпись.

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

Наконец, в-третьих, тег <CAPTION> позволяет описать - к сожалению, не полностью - положение заголовка относительно таблицы (табл. 3). Например, для того чтобы у таблицы справа внизу была подпись, нужно написать такой код:

<TABLE>
<CAPTION align=right valign=bottom>
Подпись под таблицей
</CAPTION>
 ...
</TABLE>

Параметры ячеек

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

Так и сделаем:

<TABLE>
<CAPTION>
<H1 align=center> <FONT color=slateblue> Название фирмы </FONT> </H1>
</CAPTION>
<TR>
<TD>
 <A href=page1.htm>Первая ссылка</A>
 <P><A href=page2.htm>Вторая ссылка</A>
 <P><A href=page2.htm>Третья ссылка</A>
</TD>
<TD>
 Первая новость
 <P>Вторая новость. Все. Больше новостей нет.
</TD>
</TR>
</TABLE>

И все бы неплохо, но между списком новостей и заголовком появился странный зазор.

Откуда он взялся? Что в нем находится?

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

Для того чтобы поправить дело, достаточно указать для этой ячейки вертикальное выравнивание по верхней кромке:

<TD valign=top>
 Первая новость
 <P>Вторая новость. Все. Больше новостей нет.
</TD>

Какие еще есть параметры у ячейки? Большинство из них повторяет параметры таблицы, с той лишь разницей, что их "полномочия" не идут дальше тега </TD> (табл. 4). Поэтому, вместо того чтобы подробно описывать их еще раз, рассмотрим только особенно интересные моменты.

Перенос строки

Как вы уже, вероятно, заметили, текст в ячейках обычно разбивается на строки - в зависимости от ширины окна браузера. Это не всегда желательно, так как может сильно изменить вид всей страницы. В таких случаях используют параметр nowrap, запрещающий автоматический переход на новую строку в данной ячейке:

<TD nowrap>
Не переходить на новую строку!
</TD>

Однако последствия применения этого параметра не всегда приятны: для просмотра длинных строк посетителям придется пользоваться горизонтальной прокруткой, а это очень нежелательно.

Обрамление

Если в ячейке ничего нет, то рамки вокруг нее тоже не будет, как ни старайтесь. Что нужно сделать, чтобы ячейка выглядела пустой, но имела рамку? "Положить" в нее нечто невидимое. Что именно? Как всегда, неразрывный пробел   или прозрачный GIF-файл размером 1x1 пиксель.

Габариты

Параметры width и height, как всегда, можно задавать в абсолютных единицах (пикселях) и в относительных (процентах). С первым вариантом вопросов не возникает. А вот как со вторым?

От чего берутся эти проценты? От ширины таблицы. А чтобы не возникало лишних вопросов при изменении размеров окна браузера, этот вариант возможен только тогда, когда в теге <TABLE> явно указан абсолютный соответствующий размер таблицы (высота или ширина).

Слияние ячеек

Вот, наконец, и он - один из самых интересных моментов в веб-таблицах: как создаются ячейки нестандартного размера, на несколько столбцов или несколько строк? Как, например, получаются эффекты вроде того, что показан на рис. 6?

Кто в центре?	Я!	Кто в центре?
Кто в центре?		Кто в центре?

Рис. 6. На самом деле это - таблица с объединенными ячейками

Для слияния ячеек используются параметры colspan и rowspan тега <TD>. Их значениями являются целые числа, обозначающие количество ячеек, объединяемых по вертикали и по горизонтали, соответственно. Например, такая ячейка займет два столбца:

<TD colspan=2> широкая ячейка </TD>

а такая - три строки:

<TD rowspan=3> высокая ячейка </TD>

Просто? Как сказать... Для того чтобы представить "в уме", как такой код будет выглядеть в браузере, приходится как следует напрячь воображение. А для более сложных конструкций его попросту не хватает. Поэтому сплошь и рядом дизайнеры создают таблицы в визуальных редакторах наподобие MS FrontPage, а потом долго "чистят" код... Хотите знать, как выглядит код примера на рис. 6? Что ж, вот его код:

<BODY bgcolor=aqua>
<TABLE cellpadding=5 align=center>
<TR>
 <TD>Кто в центре?</TD>
 <TD rowspan=2><FONT size=5 color=red><B>Я!</B></FONT></TD>
 <TD>Кто в центре?</TD>
</TR>
<TR>
 <TD>Кто в центре?</TD>
 <TD>Кто в центре?</TD>
</TR>
</TABLE>
</BODY>

Заголовки

У многих таблиц есть "шапки" - заголовки строк и столбцов, оформление которых чем-то отличается от остальной таблицы. Например, в нашем примере столбцы таблицы можно было бы озаглавить так: "Ссылки" и "Новости" (рис. 7).

 

Ссылки	Новости
Первая ссылка Вторая ссылка Третья ссылка	Первая новость Вторая новость. Все. Больше новостей нет.

Рис. 7. Таблица с заголовками

Как это закодировать? Нет ничего проще, - скажете вы. Вот так, например:

<TD align=center><B>Ссылки</B></TD>
<TD align=center><B>Новости</B></TD>

Действительно, такой код работает. Но для "шапки" есть специальный логический тег - <TH> (от Table Header - "табличный заголовок"). Используя его, вы сохраните единообразие всех подобных элементов дизайна на сайте. Тег <TH> полностью подобен тегу <TD>, за исключением того, что его содержимое обычно выводится полужирным шрифтом и выравнивается по центру. Поэтому теги <TH> можно использовать не только для "заглавных" строк и столбцов, но и в середине таблицы, в качестве "подзаголовков":

А как изменится наш пример, если воспользоваться этим тегом? Почти не изменится. Только код первой строки станет значительно короче:

<TH>Ссылки</TH>
<TH>Новости</TH>

Группировка ячеек

Эта идея с заголовками выглядит какой-то недозрелой... Рассыпчатой, что ли. Ведь "шапки" таблиц обычно представляют собой цельные массивы ячеек - строки, столбцы или еще большие группы. Соответственно, было бы логичнее описывать свойства всей группы, а не каждой ячейки в отдельности.

Некоторые свойства строки можно описать при помощи параметров тега <TR> (см. табл. 4). Но как быть со столбцами?

Предположим, мы хотим в таблице из нескольких строк одни столбцы отформатировать так, а другие - иначе. Пример? Пожалуйста. Введем в нашем "рабочем" примере третий столбец с датами новостей и поставим условие: ссылки должны быть на более светлом фоне и выравниваться по центру, а новости вместе с датами - выравниваться по левому краю.

Конечно, все это можно сделать, введя соответствующие параметры каждой ячейки. Если не полениться. И нигде не ошибиться.

Но гораздо удобнее и красивее описать свойства всего столбца. Для этого в HTML существуют следующие конструкции.

Свойства нескольких соседних столбцов описываются тегом <COLGROUP> (см. табл. 4). Скольких именно? Это определяется специальным параметром - span. Например,

<COLGROUP span=2 align=left>

Но как сообщить браузеру, что это второй и третий столбцы таблицы? Ведь в HTML нумерации строк и столбцов не существует. Приходится сообщать браузеру, сколько столбцов нужно "пропустить":

<COLGROUP span=n> <!-- пропустить n столбцов -->
<COLGROUP [параметры группы столбцов] >

Но только не в нашем случае (рис. 8). Ведь нам нужно задать фон для первого столбца. В результате код будет выглядеть так:

<TABLE>
<COLGROUP align=center bgcolor=cornsilk>
<COLGROUP span=2 align=left>
<TR>
 <TH>Ссылки</TH>
 <TH>Новости</TH>
</TR>
<TR>
<TD>
 <a href=page1.htm>Первая ссылка</a>
</TD>
<TD>
 Первая новость
</TD>
<TD>
 01.01.01
</TD>
</TR>
<TR>
<TD>
 <a href=page2.htm>Вторая ссылка</a>
</TD>
<TD>
 Вторая новость. Все. Больше новостей нет.
</TD>
<TD>
 02.02.02
</TD>
</TR>
<TR>
<TD>
 <a href=page2.htm>Третья ссылка</a>
</TD>
</TR>
</TABLE>

Рис. 8. Группировка ячеек

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

Для этого внутри тега <COLGROUP> используется тег <COL>, описывающий параметры отдельного столбца:

<COLGROUP span=2 align=left>
<COL valign=top>
<COL valign=bottom>
<COLGROUP>

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

  Таблица 4. Параметры таблицы, строк и ячеек

Параметр	Значения	Описание	<TABLE>	<TR>	<COL>, <COLSPAN>	<TD>, <TH>
align	left	горизонтальное выравнивание: влево, вправо и по центру, соответственно	+	+	+	+
	right
	center
valign	top	вертикальное выравнивание по верхнему краю, по центру и по нижнему краю, соответственно	-	+	+	+
	middle
	bottom
width	% или пикс.	минимальная ширина	+	-	+	+
height	% или пикс.	минимальная высота	+	+	+	+
border	пикс.	ширина рамки. По умолчанию рамка отсутствует	+	-	-	-
bordercolor	#RRGGBB	цвет всей рамки (если определен параметр border)	+	+	-	+
bordercolordark	#RRGGBB	цвет нижней и правой границ рамки (если определен параметр border)	+	+	-	+
bordercolorlight	#RRGGBB	цвет верхней и левой границ рамки (если определен параметр border)	+	+	-	+
cellspacing	пикс.	расстояние между рамками ячеек	+	-	-	-
cellpadding	пикс.	расстояние между рамкой и содержимым ячейки	+	-	-	-
bgcolor	#RRGGBB	цвет фона	+	+	+	+
background	URL	фоновый рисунок	+	-	-	+
frame	см. табл. 1	варианты обрамления	+	-	-	-
rules	см. табл. 2		-	-	-	+
nowrap	-	запрет автоматического перехода на новую строку	-	-	-	+
colspan	целое число	количество объединенных столбцов	-	-	-	+
rowspan	целое число	количество объединенных строк	-	-	-	+
span	целое число	количество столбцов в группе	-	-	+	-

Елена ПОЛОНСКАЯ, e_polons@comizdat.com

До следующего выпуска!
Елена Полонская, редактор "К+П"
www.cp.comizdat.com

Перепечатка материалов этой рассылки разрешается только по согласованию с редакцией журнала "Компьютеры+Программы"