<<

стр. 5
(всего 11)

СОДЕРЖАНИЕ

>>

<IMG usemap=image>
б) <МАР name=image>

</МАР>

<IMG usemap=#image>

Гипертекстовые ссылки 129
в) <МАР name=image>
•••

</МАР>

<IMG usemap=limage src=image.jpg>
г) <МАР name=image>

</MAP>

<IMG src=image.jpg|image>
д) <МАР name=image>

</MAP>

<A href=image> <IMG src=image.jpg>




Глава 9
<| 3Q
Глава 10

Табличный дизайн
В этой главе...

f Для чего нужны таблицы
4 Из чего состоят таблицы
4 Пример табличного дизайна
4 Горизонтальное выравнивание
4 Вертикальное выравнивание
4 Размеры таблицы
4 Размеры ячеек
f Внутренние отступы
* Рамки
4 Частичное отображение рамок
Ф Фон таблицы и ячеек
f Слияние ячеек
4 Заголовок таблицы
4 Заголовки строк и столбцов
* Группировка ячеек



Для чего нужны таблицы
Один из ответов на этот вопрос очевиден: для представления информации в
табличном виде. Но — только один.
Если вам кажется, что большинство Web-страниц обходится без таблиц, проведите
несложный эксперимент. Скачайте штук пять наиболее симпатичных вам страниц и
откройте их, например в MS Word. Примерно в трех случаях из пяти у страницы об-
наружится невидимый "скелет" - - сложная сетка из крупных и мелких ячеек
(рис. 10.1). Уберите его — и содержимое страницы собьется в бесформенную кучу.
Если вы заглянете в HTML-код этих страниц, то, очень может быть, придете в
состояние священного трепета перед сверхчеловеками, которые могут такое на-
писать и, главное, потом не только они могут разобраться в написанном, но это
еще и работает*.
Сегодня; б «но-нр« 2003 > . понедельник


Г Интернет Г ТовапыЛслуги Г мегаэнциклоледия Г Ноеости/события



Вход (авторизация)

Вся, лада нсвостеи
ПОПУ споотивнпм

15:34 Болапьшиш - потенциальные
15:24 fnai»fcu ПРОКУРОР столицы стапа жертвой грабителей
15:03 Футбол Лтгчжлс тлгм-лп г I1ГН




пижпи
а IS e-SW» Advert Ще-Styie
Advert
В. X
мта ч^т. Доски обьявлвьИЙТс, :}ОЫИЧ-СЛ ШПанщщ Кэтап г Рейтинги
Г

Новое iM k,Ml>,

TOOF-NT3 ^,™сти!Г1ьная шопа^ртяи ГТоёпода степям КМ поп •алы ftTOJb ОШ i
откые Элосовь.е ИС^УССТ о г-'айотаЖаоьегЛШййе>ютеоы;Ичтепнр
КИШКИ Мушка Нта/Тюнина Нешюшшль Ли ешествия Кино CHGDT Стпомтепьст Л i
ргалрктия Афиша Анешоты ОтаытаЛВ-прого» W3 КООССЕОРД ИгшФотогап^оеяГе РЗС«ОП;




ГЛАВНЫЕ НОВОСТИ ДНЯ
Лидер
Россия вводит новые деньги • Бпзта йжулииРобеотс погасили
"Маски-шоу*:
Сенсации: космос-2СОЗ




1в:4в Шесть аазрикэнских стран вступили на ТРОПУ СПОРТИВНОЙ "эой

15:34 Болельщики - потенциальные алкоголики

16:24 Главный ПРОУ^ЗОП етодиаы стала жертвой

15ЛЗ ФУТВол. Яор»1мк пплпигяп г [\Г.КА




Рис. 10.1. У многих Web-страниц есть невидимый "скелет" — табличная структура
Если вас бросило в жар — выпейте стакан чистой холодной воды, если в хо-
лод — крепкого чая или кофе. Но настоящее лекарство от священного трепета
делается из здравого смысла, логики и практического опыта. Первые два ингре-
диента у вас наверняка есть, а последний, как известно, приходит со временем.
Начиная прямо с этого момента.




132 Глава 10
Из чего состоят таблицы
Ответ на этот вопрос смехотворно прост: из ячеек. Ну да, из прямоугольных ячеек,
в которые что-нибудь вписано или врисовано. Тем, кто имел дело с электронными
таблицами или таблицами в электронных текстовых документах, такие ячейки отлич-
но знакомы. Поскольку ячейки прямоугольные, то они образуют горизонтальные ря-
ды, именуемые строками, и вертикальные ряды, именуемые столбцами. Частенько
красоты ради две, три и больше ячеек "сливают" в одну, а внутрь ячеек, кроме обыч-
ного текста и фафики, вставляют новые таблицы. Вот после этого и начинается тот
кошмар, который вы видели на Web-страницах, открытых в Word.
Следующий вопрос немного посложнее. Нарисовать плоскую таблицу на пло-
ской "странице" Word — пара пустяков. Нужно только задать количество строк и
столбцов и подрегулировать их ширину. Но как быть с HTML-кодом, где объекты,
выводимые на экран броузера, описываются последовательно? Не можем же мы, в
самом деле, рисовать в Notepad двумерную таблицу! Как же ее закодировать?
Вот именно так — последовательно. По очереди, ячейку за ячейкой, строку за
строкой, как если бы мы "разобрали" таблицу и вытянули ее в одну длинную цепоч-
ку. На рис. 10.2 приведен код простейшей таблицы из двух строк и двух столбцов.




Первая строка, первый столбец
</TD>
<TD>
Первая строка, второй столбец
</TD>
</TR>
<TR>
<TD>
Вторая строка, первый столбец
</TO>
<TD>
Вторая строка, второй столбец
</TD>
</TR>
</T«BLE> n—,-=,




] D:\My docs\DWLECT\HtmlTuM^TESTHTMLhtml



Первая строка, Первая строка,
первый столбец [второй столбец
• Вторая строка,
Вторая строка,
; второй столбец 1
первый столбец


Рис. 10.2. Код простейшей таблицы, состоящей
из двух строк и двух столбцов



133
Табличный дизайн
Как видим, HTML-структура, описывающая таблицу, состоит из трех основ-
ных элементов.
* Дескриптора <TABLE>, внутри которого заключена вся таблица. Этот деск-
риптор описывает параметры таблицы в целом.
» Дескрипторов <TR> (от английского Table Row — строка таблицы), внутри
которых заключены строки. Каждый такой дескриптор описывает пара-
метры соответствующей строки.
* Дескрипторов <TD> (от английского Table Data — данные, или содержи-
мое таблицы), внутри которых заключено содержимое ячеек. Каждый та-
кой дескриптор описывает параметры отдельной ячейки.
Как вы уже, вероятно, заметили, текст в ячейках разбивается на строки
в зависимости от ширины окна броузера. Это не всегда желательно, так
как может сильно изменить вид всей страницы. В таких случаях исполь-
зуют параметр nowrap, запрещающий автоматический переход на новую
строку в данной ячейке:
<TD nowrap> He переходить на новую строку! </TD>
Однако последствия применения этого параметра не всегда приятны:
для просмотра длинных строк посетителям придется пользоваться гори-
зонтальной прокруткой, а это очень нежелательно.


Пример табличного дизайна
Рассмотрим подробнее эти дескрипторы на примере.
Предположим, нам нужно решить простейшую дизайнерскую задачку: постро-
ить начальную Web-страницу сайта, где сверху написано название фирмы, справа
на большом поле — последние новости, а слева — узкий столбик ссылок на дру-
гие страницы сайта.
Как с помощью таблицы разбить поле Web-страницы на две колонки, в пра-
вой из которой находится список новостей, в левой — список ссылок?
Первое, что приходит в голову: сверху крупно и красиво пишем заголовок, а
дальше идет таблица 2xN — два столбца и N строк, где N — количество ссылок
или новостей, в зависимости от того, чего больше. Для этого нам вполне подой-
дет код, представленный на рис. 10.2, в котором изменено только количество
строк и содержимое ячеек (рис. 10.3).
Да, примерно так... Но только без рамок. Откуда они взялись?
Из "образцовой" таблицы, которую мы скопировали, не особо задумываясь
над содержанием ее отдельных частей. А напрасно: внешний вид таблицы опре-
деляется ее параметрами. В данном случае параметр border в дескрипторе
<TABLE> — явно лишний. Если его удалить, исчезнет и рамка (рис. 10.4).




Глава 10
134
<H1 align=сеп1ег>Наование ФИрны</Н1>
<TftBLE border=
<TR>
<TD>
<a href=page1. Мв>Первая ссылка</а>
</TD>
<TD>
Первая новость
</TD>
<TR>
<TD>
<a href:page2.htn>BTOpafl ссыпка</а>
</TD>
<TD>
Вторая новость. Все. Белые новостей нет.
</TD>
</TR>
<TD>
<а href=page2.ht«>TpeTbfl ссыпка</а>
</TD>
<TD> <!-- пустая ячейка --> </TD>
k/TR>
/TfiBLE>



D:\Mydocs\DIALECT\HtmlTutor\TESTHTMLhtml




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




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


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




135
Табличный дизайн
<Н1 align^center-ХНазвание *ирны</Н1>




Название фирмы
Первая новость
Вторая новость. Все. Больше
новостей нет.




Рис. 10.4. Для того чтобы не было рамки, удалите
параметр border=l


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

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



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


136 Глава 10
<TABLE align=right>

</TABLE>
<1>Мы всегда рады видеть Вас у нас!</1>
К сожалению, такой прием ненадежен: стоит пользователю изменить
размер окна броузера, и весь дизайн "съезжает", как талый снег с кры-
ши, вплоть до полного безобразия (рис. 10.5).




D:\My docs\DLALECT\HtmlTutor\TESTHTMUtrnl




Название фирмы
Мы всегда Первая ссылка Первая новость
рады Вторая ссылка Вторая новость. Все. Больше новостей нет. т
ей ть ас Третья ссылка _,
,__,,„„„




Название фирмы
Первая новость
Вторая новость. Все.
Больше новостей нет




Рис. 10.5. Сбоку от таблицы можно поместить текст. Но осторожно: стоит из-
менить размер окна, и весь дизайн "поплывет"
А как задать выравнивание содержимого ячеек? Параметр align дескриптора
<TABLE>, мы уже знаем, здесь не поможет. Но ведь этот параметр универсальный:
кроме <TABLE>, он используется в дескрипторах <Р>, <IMG>... Почему бы не вос-
пользоваться им в качестве параметра ячейки? И, действительно, такой подход
срабатывает: параметр align внутри дескриптора <TD> определяет выравнивание
текста относительно ячейки (рис. 10.6).
Таким образом, мы можем использовать уже знакомые нам значения парамет-
ра align — left, right и justify, — для того чтобы выравнивать содержимое
ячейки таблицы по левому или правому краю либо по центру.


137
Табличный дизайн
а!1дп:свп1ег>Наэвание »ирны</Н1>
<TftBLE>
<TR>
<TD> <f 1</B> </TD>
<TD ЯЯ!ШЯЯЯ8> <В>Новости</В> </TD>
</TR>
<TR>
<TD>
<a


D:\My docs\DWLECWtmlTutoATHS7HTMLhtm!




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


Рис. 10.6. Параметр align внутри дескриптора опре-
деляет выравнивание текста относительно ячейки

Но ячеек много. Как быть, если в выравнивании нуждается целая строка или
столбец? Конечно, можно, поплевав на ладони, аккуратно вставить соответст-
вующие параметры в каждую ячейку. Но до чего же это скучно!
Что касается строк, то здесь имеется простое и логичное решение: вместо
описания способа выравнивания в каждой отдельной ячейке задать его для всей
строки в дескрипторе <TR>:
<TR align=center> . . </TR>
.
Что же касается столбцов, то здесь задача решается несколько сложнее: снача-
ла нужно сгруппировать ячейки, а потом описать общие для них параметры (см.
раздел "Группировка ячеек").
Что произойдет, если для всей таблицы задан один тип выравнивания,
а для ячейки — другой? Здесь действует общее правило для одноимен-
ных параметров: если значение параметра, определенного для всей
таблицы в дескрипторе <TABLE>, не совпадает со значением такого же
параметра в дескрипторе <TR>, то для данной строки используется па-
раметр, определенный в дескрипторе <TR>. Аналогичным образом, если
значение параметра для некоторой ячейки отличается от значения та-
кого же параметра для содержащей ее строки или для всей таблицы, то
приоритет имеет значение, заданное в дескрипторе ячейки. Например,

Глава 10
138
в коде на рис. 10.7 содержимое всей таблицы выравнивается по левому
краю, в первой строке — по центру и в последней ячейке первой стро-
ки — по правому краю.


<TftBLE border*! align=left>
<TR align=center>
<TD>no центру</ТО>
<TD>no центру</ТО>
<TD align=right>no правому кран|с/ТО>
</TR>
<TR>
<TD>no левому краю</ТО>
<TD>no левому краю</ТВ>
<TD>no левому крвю</ТО>
</TR>
<TR>
<TD>no левому крвю</ТО>
<TD>no левому краю</ТО>
<TD>no левому краю</ТО>
</TR>
</TflBLE>




ino левому
1по левому Ino левому
|краю_ (краю
[краю
|по левому ||по левому Jno левому
{краю Цкраю Цкраю


Рис. 10.7. При определении одноименных пара-
метров приоритет имеют параметры ячейки, за-
тем — и строки всей таблицы


Вертикальное выравнивание
А нельзя ли немножко укоротить код в рассмотренном выше примере, но так,
чтобы вид страницы при этом не изменился? Ведь, в сущности, нам нужна таб-
лица, состоящая всего из одной строки с двумя ячейками: в левой ячейке — ко-
лонка ссылок, в правой — колонка новостей (рис. 10.8).
И все бы неплохо, но между колонкой новостей и заголовком появился
странный зазор. Откуда он взялся?
Разумеется, это не "глюки" броузера или недосмотр разработчиков. Просто по
умолчанию содержимое табличной ячейки выравнивается вертикально по центру
так, чтобы расстояние от текста до верхней и нижней границ было одинаковым.
Пока ячейки были маленькие, это не было заметно. Но стоило появиться круп-
ной ячейке с небольшим количеством текста внутри — и все изменилось.


139
Табличный дизайн
HI аН9п=сеп1ег>Наэванив *ирмы</Н1>
TABLE>
<TR>
<TD> <В>Ссыгжи</В> </TD>
<TD align=center> <В>Новости</В> </TD>
</TR>
<TR>
<TD>
<a href=page1.М>>Первая ссыпка</а>
<p><a href=pag92.htm>Bropafl ссылка</а>
<p><a href=pag«2.htni>Tp*Tbfl ссыпка</а>
</TD>
<TD>
Первая новость
<р>Вторая новость. Все. Белые новостей нет.




D:\Mydocs\DIALECTVItmrTutoATESTHTMLhtml




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


Рис. 10.8. Количество ячеек можно сократить, но тогда ко-
лонка новостей странно смещается вниз

Как поправить дело? Нужно изменить режим вертикального выравнивания, оп-
ределив явно значение параметра valign. В частности, для выравнивания содержи-
мого ячейки по верхнему краю нужно присвоить ему значение top (рис. 10.9).
Вертикальное выравнивание... Несмотря на то, что это вещь вполне логичная
и естественная, мы с ним сталкиваемся впервые. До сих пор речь шла только о
выравнивании объекта — будь то текст или рисунок — только по горизонтали. И
это понятно: необходимость вертикального выравнивания относительно окна
броузера возникает сравнительно редко. Но относительно ячейки таблицы это
приходится делать сплошь и рядом.
Какие еще есть варианты вертикального выравнивания? Конечно, по нижнему
краю и по середине ячейки. Им соответствуют значения bottom и middle парамет-
ра valign. Впрочем, последнее значение не обязательно указывать явно: оно ис-
пользуется по умолчанию. Кроме того, есть еще один способ вертикального вы-

Глава 10
140
равнивания, которому соответствует параметр baseline. Это выравнивание первых
строк текста по базовой линии шрифта — воображаемой линии, на которой
"стоят" буквы, так что вниз "свешиваются" только подстрочные элементы.


Фирны</н1>
<TftBLE>
<TR>
<TD> <В>Ссылки</В> </TD>
<TD align=center> <В>Новости</В> </TD>
</TR>
<TR>
<TD>
<a href=page1 .htmXlepeafl ссылка</а>
<p><a href=page2.htm>BTopaa ссыпка</а>
<p><a href = раде2.Ыя>Третья ссыпка</а>
</TD>
<TD
Первая новость
<р>Вторая новость. Вс». Больше новостей нет
</TD>
</TR>
C/TflBLE> мвмишж гмв




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




Рис. 10.9. Для выравнивания содержимого ячейки по верх-
нему краю нужно присвоить параметру valign значение top

Часто тот или иной способ вертикального выравнивания применяется для всех
ячеек в строке таблицы. Для того чтобы упростить себе работу и сократить код, мож-
но определить параметр valign для всей строки, поместив его в дескриптор <TR>:
<TR valign=top>
<TD>

</TD>
</TR>




141
Табличный дизайн
Размеры таблицы
Для того чтобы вид страницы не так сильно зависел от размеров окна броузе-
ра, в дескрипторе <TABLE> задают минимальную ширину и высоту таблицы. Для
этого используются параметры width и height, соответственно. У вас возникло
ощущение "дежа вю"? Отлично! Значит, вы помните, что точно такие параметры
и в аналогичных целях использовались... где?
Правильно, в дескрипторе <IMG> (см. главу 8). Только в таблицах возможности
применения этих параметров гораздо богаче. Как и в случае с изображениями,
габариты задаются как в абсолютных значениях (в пикселях), так и в относитель-
ных (в процентах от ширины окна).
Способ верстки Web-страниц, при котором размеры таблиц задаются в
процентах, иногда называют "резиновым" дизайном за то, что при из-
менении размеров окна такие страницы как бы растягиваются или сжи-
маются, сохраняя основные пропорции.




Название фирмы
Название
Мы всегда рады видеть Первая
Первая но
фирмы
Вас у нас! ссылка
Вторая HOI
Вторая Все. Болы
Мы Первая Первая
ссылка
новостей \
I НОВОСТЬ
Третья рады Вторая
ссылка видеть новость.
[Все.
1 Больше
новостей
нет.




Рис. 10.10. Если офаничить таблицу половиной окна, для текста слева оста-
ется больше места. Но такое решение по-прежнему далеко от радикального
Например, чтобы избежать неприятной ситуации, показанной на рис. 10.5,
можно ограничить ширину таблицы, скажем половиной окна, заменив первую
строчку кода на такую:
<TABLE align=right width=50%>

142 Глава 10
Впрочем, эта мера действенна только до определенной степени. Можно сузить
окно так, чтобы в левой части осталось по одному слову в каждой строке, и слова
все равно будут "налезать" на таблицу (рис. 10.10). Что тогда делают Web-
дизайнеры? Тяжело вздыхают и... строят новую таблицу, побольше, чтобы впи-
сать строптивый кусок текста в ее левый столбец.


Размеры ячеек
Как и многие другие параметры HTML, width и height являются универсаль-
ными: определяют аналогичные свойства похожих объектов. Нетрудно догадаться,
что размеры табличных ячеек задаются тоже с их помощью. Причем эти размеры,
так же как и другие, могут быть абсолютными (в пикселях) или относительными
(в процентах от ширины таблицы).
Обычно, если это важно, размеры ячеек указывают в процентах. Тогда при
изменении размеров окна броузера таблица будет пропорционально "растя-
гиваться" или "сжиматься". Если же задать размеры в пикселях, то в слишком
большом окне рядом с такой таблицей останется много пустого места, что выгля-
дит неаккуратно, а в слишком маленьком окне таблица не поместится, что при-
ведет к появлению горизонтальной прокрутки. А, как мы уже знаем, текст, не
помещающийся в окне по горизонтали, очень неудобно читать.
Например, что нужно сделать, чтобы в нашем примере правый столбец был
втрое шире левого? Правильно, присвоить ячейкам правого столбца значение па-
раметра width, равное 75%. Или ячейкам левого столбца — 25% (рис. 10.11). Теперь,
как бы мы ни растягивали окно броузера, левый столбец всегда будет занимать
только четверть его ширины.

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

Можно ли задать, например, высоту всей строки в дескрипторе <TR>,
"сэкономив" на этом немного сил и сократив код? Нет, нельзя. Ширина
и высота ячеек определяются только в дескрипторах, описывающих са-
ми ячейки либо их группы (см. раздел "Группировка ячеек").




Табличный дизайн 143
а119п=с»г>4»г>Наэвание »ирны</Н1>
<TflBLE>
<TR>
<TD> <В>Ссылки</В> </ТО>
<TD align=center> <В>Новости</В> </TD>
</TR>
<TR>
<TD I'llJIJlU-l-V/b
<a href = page1 .Мг»Первая ссылка</а>
<p><a href=page2.htm>BTopafl ссылка</а>
<p><a href=page2.htin>TpeTbfl ссылка</а>
</TD>
<TD ualign=top>
Первая новость
<р>Вторая новость. Все. Болы* новостей нет.
</TD>
</TR> 3 D \My docs\DIALECT\lllrr
|</TflBLE>

mmm
3 DAMydtjcs\DIALECT\Htmrrirtoi\TESTHTML.html




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


Рис. 10.11. Теперь, когда параметру width присвоено зна-
чение 25%, ячейка ссылок всегда будет занимать по ширине
четверть таблицы, независимо от ширины окна броузера




Внутренние отступы
А это что такое? Первый вид отступов вам, вероятно, знаком, так как использу-
ется в таблицах, которые встречаются в электронных текстовых документах. Это
расстояние между границей ячейки и границей текста. Оно измеряется в пикселях
и определяется параметром cellpadding. He начинать же текст прямо от рамки! Это
неаккуратно. Здесь нужен некоторый отступ. Только в том случае, если рамка не-
видима, можно себе позволить сделать это расстояние нулевым. И то не всегда.
Второй вид отступов вам, скорее всего, встретится впервые. Для того чтобы
понять, что это такое, нужно внимательно присмотреться к Web-таблицам. Обра-
тите внимание: на самом деле, в отличие от других, знакомых вам, таблиц, их
рамки двойные — каждая ячейка как бы заключена в собственное "окошко". Ме-

144 Глава 10
жду соседними "окошками" обычно имеется некий зазор. Его величина регули-
руется параметром cellspacing — опять же, в пикселях. Например, если присво-
ить таблице параметры cellspacing=40 и cellpadding=25, то отступ между ячейками
составит 40, а между границей ячеек и текстом — 25 пикселей (рис. 10.12).




D.\My doc«\DIALECTWmrrutoi\TESTHTML.html




Первая строка, Первая строка,
первый столбец второй столбец



Вторая строка,
Вторая строка,
первый столбец второй столбец




Рис. 10.12. Отступы между границами ячеек регулируются параметром
cellspacing, а от границы ячейки до ее содержимого — параметром cellpadding


Рамки
Какие могут быть свойства у рамки таблицы? Здесь все очень просто: толщина и
цвет. С параметром, "ответственным" за первое свойство, мы уже знакомы: это пара-
метр border, и он определяет толщину рамки в пикселях. Все ясно? Вроде бы... Но
давайте проведем эксперимент: что получится, если присвоить ему значение, скажем
15? По идее, не должно получиться ничего особо интересного: что мы, таблицу с тол-
стой рамкой не видели, что ли? Вот и нет: результат выходит весьма любопытный
(рис. 10.13). Внешняя рамка действительно толстая, а вот нижняя так и осталась тон-
кой. Почему? Потому что параметр border определяет толщину только внешней рамки.

Как мы уже убедились, если параметра border не указывать, то и рамки
у таблицы не будет. Вообще никакой. Этим последним обстоятельством
мы воспользовались в примере на рис. 10.4. И любой, кто провел в In-
ternet больше получаса, подтвердит, что мы здесь далеко не первопро-
ходцы: Web-дизайнеры пользуются этой особенностью очень широко.



145
Табличный дизайн
(TABLE
<TR>
<TD>
Первая строка, первый стопбец
</TD>
<TD>
П.р
</TD>
<TR>
<TD>

</TD>
<TO>
Bropi
Первая строка, первый (Первая строка, второй
</TD>
</TR>
столбец Цстолбец
</TftBLE>
Вторая строка, первый Вторая строка, второй
лбец столбец


Рис. 10.13. Параметр border определяет толщину внешней рамки
Цвет рамки тоже приподнесет нам сюрприз. Как вы думаете, сколько пара-
метров нужно, чтобы его описать? Один? Предположим. Действительно, такой
параметр есть: bordercolor. По умолчанию рамка черно-серая. Попробуем заме-
нить ее цвет, например, на зеленый:
<TABLE border=15 bordercolor=green>
Если вы забыли, как в HTML задается цвет, загляните в главу 4, где
описывается параметр color.



<TBBLE border:15
<TR>
<TD border=5)
Первая строка, первый столбец
</ТО
<TD>
П«
</ТС
<TR>
<TD>
DAMy doct\plALECT\Hlmn'uloi\TESTHTIvlLhlml




Первая строка, первый Первая строка, второй
столбец столбец
Е>торая строка, первый Вторая строка, второй
толбец столбец


Рис. 10.14. Если определить цвет рамки, используя единственный
параметр bordercolor, исчезнет эффект "выпуклости" (см. рис. 10.13)
Что получилось? Рамка и впрямь зазеленела, как молодая травка. Но — обратите
внимание — исчезла свойственная ей выпуклость (рис. 10.14). Это естественно: ведь

146 Глава 10
эффект "выпуклости" обеспечивается разницей цветов верхне-левой и нижне-
правой частей рамки. Для того чтобы изменить один из этих цветов, "не трогая"
другой, используются параметры bordercolordark и bordercolorlight. Несмотря на
свои названия, в переводе с английского означающие "темный цвет рамки" и
"светлый цвет рамки", эти параметры никак не связаны с насыщенностью цвета.
Параметр bordercolordark определяет цвет нижнего правого, a bordercolorlight -
верхнего левого углов рамки. Например, если написать <TABLE border=15 bordercol-
orlight=red bordercolordark=blue>, получится некое подобие боксерского ринга.

Упоминания о светлом и темном цветах в названиях параметров border-
colordark и bordercolorlight появились благодаря тому, что по умолчанию
верхний левый угол таблицы светлее нижнего правого: таблица как будто
освещена, причем источник света находится в верхнем левом углу окна.

А как же с рамками отдельных ячеек? Можно ли отменить их отображение,
задать цвет или толщину?
К сожалению, здесь наши возможности гораздо скуднее. Толщина внутренних
рамок является фиксированной. Зато цвет можно задавать для каждой строки и
ячейки в отдельности, как с помощью параметра bordercolor, так и по отдельным
"углам" с помощью параметров bordercolorlight и bordercolordark.

Если в ячейке ничего нет, то рамки вокруг нее тоже не будет, как ни
старайтесь. Для того чтобы ячейка выглядела пустой, но имела рамку,
нужно "положить" в нее нечто невидимое. Как правило, такими
"невидимыми" объектами являются неразрывный пробел snbsp; или
прозрачный GIF-файл размером 1x1 пиксель (см. главу 8).


Частичное отображение рамок
Итак, если мы хотим получить рамку, нужно использовать параметр border,
если не хотим — просто пропускаем его. А если хотим, но не везде? Например,
как быть, если мы хотим оставить видимыми только вертикальные границы яче-
ек, как между газетными столбцами?
В дескрипторе <TABLE> есть два параметра, позволяющие "поиграться" с ото-
бражением разных частей рамок. К сожалению, они работают не во всех броузе-
рах: это стандарт Internet Explorer. За отображение рамок отдельных ячеек (при
этом внешняя рамка отображается всегда) "отвечает" параметр rules, а за ото-
бражение разных частей внешней рамки — параметр frame. Эти параметры при-
нимают следующие предопределенные значения.
Если параметр rules принимает значение попе, то отображается только внешняя
рамка таблицы. Границы между ячейками становятся невидимыми. Если нужно,
чтобы, кроме того, были видны еще и границы между строками, используем пара-
метр rows, а если — между столбцами, то — cols (рис. 10.15). Обратите внимание,
что все это имеет смысл только при ненулевом значении параметра border. Если
ширина рамки равна нулю, то границ видно не будет. Если же присвоить параметру

Табличный дизайн 147
frame значение all, то, независимо от значения border, границы всех ячеек будут
видимы. Наконец, с помощью значения groups можно заключить в рамку группы
ячеек. О том, как создать такую группу, читайте в разделе "Группировка ячеек".




Первая строка,
Первая строка,
второй столбец
[первый столбец
Вторая строка, Вторая строка,
первый столбец второй столбец




__
^docs\D! Г^П-ГГмГ»




<TflBLE border=10
<TR>



ИО 6р,„„0« tSP»Ht ?«•««
Из




J ^Mydocs\DWl.EC1V-«mlTutoATESTHTUL.hlml J



Первая строка, Первая строка,
|первый столбец второй столбец
Вторая строка, Вторая строка,
[первый столбец второй столбец


Рис. 10.15. Различные варианты использования параметра rules

148 Глава 10
Учитывая тот факт, что параметр border "понимают" все броузеры, чего
нельзя сказать о параметре rules, вряд ли стоит использовать значение
rules=all вместо border=l.

При использовании параметра frame подразумевается, что рамка таблицы сущест-
вует. Поэтому указывать параметр border не обязательно. Для того чтобы оставить
рамку только слева от ячеек, нужно присвоить параметру frame значение Ihs, спра-
ва — rhs, по обеим сторонам — vsides. Если же нам требуются горизонтальные разде-
лители, то нужно воспользоваться значением above (над ячейками), below (под ячей-
ками) или hsides (сверху и снизу ячеек). Наконец, значение void позволяет добиться
оригинального эффекта: если значение параметра border указано явно и не равно ну-
лю, становятся видны только границы между ячейками, но не рамка вокруг всей таб-
лицы (рис. 10.16). По умолчанию же используются значения border или box. Результат
их использования одинаков и ничем не отличается от простого border=l.




Первая строка, Первая строка,
первый столбец второй столбец
Вторая строка,
|Вторая строка,
второй столбец
(первый столбец




Первая строка,
Первая строка,
первый столбец второй столбец
Вторая строка,
Вторая строка,
первый столбец второй столбец




абличный дизайн 149
:\My docs\DIALEtnV-«mrrutaATESTHTML hlml



Первая строка,
Первая строка,
первый столбец второй столбец
Вторая строка, Вторая строка,
второй столбец
<и первый столбец



Рис. 10.16. Различные варианты использования параметра frame

Обратите внимание: поскольку эти параметры относятся ко всей таблице, то
они определяются только в дескрипторе <TABLE> и не могут быть переопре-
делены во внутренних дескрипторах таблицы для отдельных строк и ячеек.


Фон таблицы и ячеек
Наконец, нужно как-то описать фон ячеек. Если фоном служит обычная од-
нотонная заливка, то ее цвет определяется параметром bgcolor. Значением этогс
параметра является код цвета — такой же, как при определении цвета шрифте
(см. главу 4).
А как быть, если хочется "подложить" под текст ячейки более сложный фон
например, с переходами цвета или узором? В Internet такие страницы встречают-
ся сплошь и рядом. Для любых видов фоновой заливки, кроме однородного две
та, используются готовые графические файлы, которые "подключаются" i
HTML-странице с помощью параметра background.

Если вы хотите освежить свои знания о графических файлах, исполь
зуемых в Web-дизайне, перечитайте главу 8.


Выбирая фон для таблицы, нужно учитывать следующую особенность. Чт(
произойдет, если изображение окажется больше, чем нужно? Скорее всего, в*
сами можете ответить на этот вопрос: ничего хорошего — просто часть карта ню
окажется "обрезанной". А что будет, если картинка меньше области, занимаемо]
таблицей? Здесь мнения тех, кто хотел бы надеяться на лучшее, могут разделить
ся. Те, кто имеет в виду использование небольших повторяющихся изображени
в виде узора, скажут, что картинка размножится на манер того, как это делается
"обоях" Windows. Те, кто предпочитает использовать одно большое фоновое изо
бражение для всей таблицы, предположат, что оно растянется. Увы, таких опти


150 Глава 1
мистов ждет разочарование: если изображение, используемое в качестве фона для
таблицы HTML, оказывается меньше той области, для которой оно предназначе-
но, броузер всегда пытается "размножить" его на манер мозаики.

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

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


I аНдп=с*п1ег>Наэвание ФирньК/Н1>
<TflBLE bpR

<TD>
<BXFONT со1ог=иЬН»>Ссыпки</ТОМТХ/В> </TO>
<TD align=center>
<BXFONT color = uhit»>HoBoc™</FONTX/B> </TD>
</TR>
<TR>
<TD ui
<a h


В D:\Mydocs\DIALECT\HtmrTutortTESTHTMLhtml
</TD>
<TD ua

Название фирмы
Пере
<p>B
</TD>


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




Рис. 10.17. Фон, заданный для ячеек строки, не рас-
пространяется на промежутки между ячейками




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




Я'
Кто в центре? ^ " " Кто в центре?




Рис. 10.18. Эти варианты дизайна получены с
помощью таблиц

Для слияния двух соседних ячеек в одной строке используется параметр rowspan,
а для слияния смежных ячеек одного столбца — параметр rowspan. Оба эти пара-
метра указываются в дескрипторе <TD> объединенной ячейки. Их значениями явля-
ются целые числа, обозначающие количество объединяемых ячеек (рис. 10.19).




152 Глава 10
(table border:1>
Ctr>
(td BBH»IJB|ffi align=center><b>BbicOKafl ячейка</ЬХ/1д>
<td>06bHHaa ячейка<ла>
(/tr>
(tr>




ALECT\HtmlTutor\3.h



Обычная
1 ячейка
Высокая
ячейка Обычная
ячейка




<table border=1>
<tr>
<td ЯЯНЯЯЯЯ аНдп:сеп1егХЬ>1нрокая fl4eHKa</b></td>
</tr>
<tr>
fl4efiKa</td>
fl4eiiKa</td>
fl4efiKa</td>
</tr>
</table>




Широкая ячейка
Обычная [Обычная ЦОбычная
ячейка !ячейка Пячейка


Рис. 10.19. Использование параметра colspan со значением
3 позволяет объединить три ячейки по горизонтали, а пара-
метра rowspan со значением 2 — две ячейки по вертикали

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




Табличный дизайн 153
Заголовок таблицы
В нашем примере для заголовка страницы использован логический дескриптор
<Н1>. Но при желании его можно включить в структуру таблицы — в качестве за-
головка — с помощью дескриптора <CAPTION> (рис. 10.20).




<TR bgcolor-black>
<TD>
<BXFONT color=Mhite>Ccuni«t</FONT></e> </TO>
<TD align=center>




<TD ui
nepi

Название фирмы
<p>(
</TD>
</TR>
/TftBLE>
Ссылки Новости
Педвая Первая новость
ссылка
Вторая новость. Все. Больше
Вторая новостей нет.
ссылка




Рис. 10.20. Если в основе дизайна HTML-страницы лежит
таблица, ее заголовок может играть роль названия страницы

Зачем это может понадобиться?
Во-первых, всегда приятно, когда некий виртуальный объект обладает всеми атри-
бутами своего реального прототипа. Ведь у обычных "бумажных" таблиц почти всегда
есть если не надпись, так подпись. Во-вторых, если некий заголовок является неиз-
менным спутником именно этой таблицы, то гораздо лучше жестко "связать" их,
чтобы случайно не потерять при очередном копировании. Наконец, в-третьих, деск-
риптор <САШОМ> позволяет описать — к сожалению, не полностью — положение за-
головка относительно таблицы. Надеюсь, вы обратили внимание на то, что в HTML-
коде на рис. 10.20 отсутствует параметр выравнивания заголовка по центру. Тем не
менее, заголовок расположен именно по центру. Это происходит потому, что такой
режим выравнивания используется в дескрипторе <CAPTION> по умолчанию. Если же
мы захотим изменить режим выравнивания, то нам следует задать значение параметра
align явно: left (по левому краю) или right (по правому краю). Кроме того, если
присвоить параметру align значение bottom, надпись переместится вниз, под таблицу.


154 Глава 10
А как же в этом случае задать горизонтальное выравнивание? Действительно,
если параметру align уже присвоено значение top или bottom, мы не можем при-
своить ему второе — left, right или center.
Поэтому для задания вертикального выравнивания лучше использовать второй
параметр дескриптора <CAPTION> — valign. Этот параметр имеет всего два значе-
ния — top и bottom. Они определяют положение заголовка соответственно над
или под таблицей.

Заголовки строк и столбцов
У многих таблиц есть "шапки" — заголовки строк и столбцов, оформление
которых чем-то отличается от остальной таблицы. Например, в нашем примере
роль такой шапки играют надписи "Ссылки" и "Новости". Несмотря на то, что
они имеют одинаковое форматирование, мы кодировали это форматирование в
каждой ячейке отдельно:
<TABLE>
<TR>
<TD align=centerxB>CcbuiKH</BX/TD>
<TD align=center><B>HoBOCTH</B></TD>
</TR>

</TABLE>
Но если "заголовочных" ячеек слишком много, то такое занятие может и на-
доесть. Конечно, выравнивание по центру можно вынести в дескриптор <TR>:
<TABLE>
<TR align=center>
<ТПхв>Ссылки</ВХ/то>
<TDXB>HOBOCTH</BX/TD>
</TR>

</TABLE>
Так уже лучше. Но, во-первых, к полужирному шрифту это не относится. А,
во-вторых, как быть, если "шапка" затрагивает не только первую строку таблицы,
но и, например, левый столбец?
Для того чтобы разметка таблиц не была слишком утомительна, в HTML пре-
дусмотрены специальные дескрипторы для "заголовочных" ячеек — <ТН> (от table
header — "заголовок таблицы"). Дескриптор <ТН> полностью подобен дескриптору
<TD>, за исключением того, что его содержимое обычно выводится полужирным
шрифтом и выравнивается по центру (рис. 10.21). Поэтому дескрипторы <ТН>
можно использовать в любом месте таблицы вместо дескрипторов <TD>, а вовсе не
обязательно только для верхней строки или левого столбца.
Конечно, возможности форматирования дескриптора <TD> небогаты. На-
пример, он ничем не поможет нам, если мы захотим выделить "шапку"
так, как показано на рис. 10.20. Зато благодаря использованию дескрипто-
ра <TD> можно значительно сократить код, упростить работу и, главное,
обеспечить единообразие всех подобных элементов дизайна страницы.

Табличный дизайн 155
TftBLE>
CflPTION> <Н1>Наэвани» »ирны</Н1> </CflPTION>
<TR>




И D:\My docs\DIALECT\HtmrTutoi\TESTHTMLhtml
<TD ив
Пере
Название фирмы
<р>В
</TD>
</TR>
</TflBLE>
Новости
Ссылки
Первая Первая новость
ссылка
Вторая новость. Все. Больше
Вторая новостей нет.
ссылка
Третья
ссылка


Рис. 10.21. Дескрипторы заголовков <тн> отличаются от деск-
рипторов ячеек <TD> только тем, что их содержимое отобража-
ется полужирным шрифтом и выравнивается по центру ячейки


Группировка ячеек
Эта идея с ячейками-заголовками выглядит какой-то незрелой... Ведь "шапки"
таблиц — это зачастую целые массивы ячеек — строки, столбцы или еще большие
группы. Соответственно, было бы логичнее описывать свойства всей группы, а не
каждой ячейки в отдельности.
Некоторые свойства строки можно описать с помощью параметров дескрипто-
ра <TR>. Но как быть со столбцами? Предположим, что мы хотим отформатиро-
вать одни столбцы так, а другие — иначе. Пример? Пожалуйста. Предположим,
что мы хотим на странице, изображенной на рис. 10.21, ввести третий столбец с
датами новостей, причем ссылки должны выравниваться по центру, а новости с
датами — располагаться на фоне другого цвета.
Конечно, все это можно сделать, введя соответствующие параметры каждой ячей-
ки. Если не полениться. И нигде не ошибиться. Но гораздо удобнее и красивее опи-
сать свойства всего столбца. Для этого в HTML существуют следующие конструкции.
Свойства группы из нескольких смежных столбцов описываются дескрипто-
ром <COLGROUP>. Например, для того чтобы первый столбец таблицы выравнивался
по центру, в то время как остальные выравниваются по левому краю, нужно на-
писать такой код:

156 Глава 10
<TABLE>
<COLGROUP align=center>
<!-- содержимое таблицы -->
</TABLE>
Дескрипторы, описывающие свойства группы столбцов, обычно разме-
щаются в начале таблицы.

А как быть, если требуется распространить форматирование на несколько
столбцов? Конечно, можно выделить каждому из них по персональному дескрип-
тору <COLGRDUP>:
<TABLE>
<COLGROUP align=center> <!-- форматирование первого столбца -->
<COLGROUP align=center> <!-- форматирование второго столбца ˜>
<!-- содержимое таблицы -->

</TABLE>
Но до чего же это неизящно! Лучше воспользоваться специальным параметром
дескриптора <COLGROUP> для объединения столбцов — span. Например, код <COLGROUP
span=2 align=center> описывает группу из двух столбцов с выравниванием по цен-
тру. Как вы уже, вероятно, поняли, мы, строго говоря, могли бы в рассмотренном
выше примере указать span=l, но не стали этого делать: зачем лишний раз услож-
нять код, когда это значение все равно подразумевается по умолчанию?
Похоже, с форматированием первых нескольких столбцов мы разобрались. Но
как сообщить броузеру, что как раз начальные столбцы нужно пропустить и из-
менить форматирование, например, второго и третьего столбов таблицы? Ведь в
HTML, в отличие от электронных таблиц, не существует нумерации строк и
столбцов. Действительно, это, пожалуй, недоработка. Приходится пойти на хит-
рость: поставить дескриптор <COLGROUP> без параметров форматирования, указав
лишь, сколько столбцов нужно "пропустить":
<COLGROUP зрап=л> <!— пропустить л столбцов -->
<COLGROUP параметра следующей группы столбцов >
Какие еще параметры, кроме горизонтального выравнивания, можно присво-
ить группе ячеек с помощью дескриптора <COLGROUP>? Оказывается, их не так уж
много. Это вертикальное выравнивание (параметр valign), ширина и высота яче-
ек (width и height) и цвет фона (bgcolor). Значения этих параметров и правила их
присваивания такие же, как для дескрипторов ячеек <TD>.
Теперь, вооружившись всеми этими знаниями, мы можем наконец сгруппиро-
вать ячейки нашего примера так, как собирались: выровнять ссылки по центру,
добавить столбец с датами новостей и "подложить" под новости вместе с датами
фон другого цвета. Предлагаю вам решить эту задачу самостоятельно, а потом
сверить результат с рис. 10.22.




Табличный дизайн 157
<COLGROUP align=center>
<COL6ROUP span=2 bgcolor:lightblu»t>
<TR>
<ТН>Ссыпки</ТН>
<ТН>Новости</ТН>
<TH>Snbep:</TH>
</TR>
<TR>
<TD> <a href=page1,Ь1я>Первая ссыпка</а> </TD>
<TO> Первая новость </TD>
<TD> 81.81.61 </TD>
</TR>
<TR>
<TD> <a href=page2.htm>BTOpaa ссыпка</а> </TD>
<TD> Вторая новость. Be». Бопьше новостей нет. </TD>
<TD> 82.62.62 </TD>
</TR>
<TR>
<TD> <a href=page2.htn>TpeTbfl ссылка</а> </TD>
<TD> Snbep; </TD>
<TD> Snbsp; </TD>
</TR>




Название фирмы

<<

стр. 5
(всего 11)

СОДЕРЖАНИЕ

>>