2.12. Таблицы
Таблицы — эффективное средство форматирования данных Web-страницы. Основное удобство в том, что броузер берет на себя заботу о прорисовке рамки таблицы. Размер рамки может быть автоматически согласован с размером окна просмотра в броузере и, разумеется, с размером находящихся в ячейках таблицы строк текста и рисунков. Кроме этого, таблицы позволяют решать чисто дизайнерские задачи: выравнивать части страницы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением и т. д. При создании таблиц используется принцип вложения: внутри основного элемента таблицы TABLE создается ряд элементов, определяющих строки TR, а внутри этих элементов размещаются элементы для описания каждой ячейки в строке TD или TH.Для того чтобы разобраться в структуре существующей таблицы или создать новую таблицу, необходимо помнить, что последовательность элементов описывает таблицу сверху вниз и справа налево. Например, если после элемента TABLE мы находим элемент TR, это означает, что начинается описание новой строки таблицы. Все, что будет указано за этим элементом, будет размещено в одной строке (справа налево). Вся информация должна быть распределена по ячейкам. После того как встретится новый элемент TR, начнется описание следующей строки, и так далее, до конца таблицы (тега </TABLE>).
<TABLE> </TABLE>
Внешний элемент таблицы. Он позволяет задавать общие свойства таблицы и отделяет структуру таблицы от остальной части Web-страницы. Большинство атрибутов могут использоваться и в других элементах таблицы.Таблицу можно выровнять по горизонтали при помощи атрибута align:
align="left" — влево;
align="center" — по центру;
align="right" — вправо.
Ширину таблицы можно задать точно, в пикселах, или в процентном отношении к ширине страницы в окне броузера. Например:
width=720
width=75%
Для управления видом рамки используются два атрибута. Броузер создает изображение рамки, имитируя ее трехмерность (выпуклость) при помощи различия в освещенности граней. На рамке можно различить фронтальную и боковую наклонную грани (рис. 2.14).
Рис. 2.14. Фрагмент таблицы «в разрезе»
Шириной боковой грани управляет атрибут:border=ширина
При задании нулевого значения для этого атрибута рамка исчезает совсем.
Для каждой ячейки создается своя рамка, поэтому минимальная ширина рамки в данном случае не может быть меньше двух пикселов. Между линиями рамки имеется зазор, величину которого определяет атрибут:
cellspacing=ширина
Если значение этого атрибута равно нулю, рамка получается тонкой, заостренной. В противном случае зазор воспринимается как фронтальная грань рамки или пустое пространство, сквозь которое можно увидеть фон страницы.
Если ячейке таблицы отсутствуют данные, то часть рамки вокруг этой ячейки не прорисовывается броузером. В таких пустых ячейках целесообразно помещать символ неразрывного пробела. Многие гипертекстовые редакторы сразу после создания таблицы записывают в каждую ячейку символ .
По умолчанию рамка имеет серый цвет. Для задания другого цвета необходимо использовать два атрибута, которые определят оттенки темной и светлой граней рамки:
bordercolordark="цвет1"
bordercolorlight="цвет2"
При использовании атрибута
bordercolor="цвет"
рамка является одноцветной и кажется плоской. Ее минимальная толщина при задании border=1 — два пиксела.
Для всех ячеек таблицы можно задать размер пустого пространства, окружающего данные в ячейках:
cellpadding=число_пикселов
или
cellpadding="15%"
Задание этого атрибута делает ячейки больше. Между рамкой таблицы и данными всегда сохраняется определенное расстояние, чтобы было удобно читать текст.
Для всей таблицы или для отдельных ячеек может быть задан цвет фона:
bgcolor="цвет"
bgcolor=#RRGGBB
Вместо одного цвета допускается использовать рисунок:
background="файл"
Атрибуты bgcolor и background можно использовать с любыми элементами таблицы, кроме элемента CAPTION.
Атрибут frame (используемый только для элемента TABLE) позволяет задать вид рамки вокруг таблицы:
frame="параметр"
Существуют следующие стандартные параметры:
void — рамка отсутствует;
above — верхняя сторона рамки;
below — нижняя сторона рамки;
hsides — части рамки сверху и снизу;
vsides — части рамки слева и справа;
lhs — левая часть рамки;
rhs — правая часть рамки;
border или box — рамка показана полностью.
Разумеется, если атрибут frame не использован, рамка вокруг таблицы выводится целиком.
Атрибут rules определяет вид сетки таблицы внутри, то есть между ячейками. Он тоже имеет много параметров:
none — сетка отсутствует;
groups — сетка вокруг групп ячеек;
rows — горизонтальные линии между строками;
cols — вертикальные линии между колонками;
all — обычная сетка.
Существует атрибут комментария к таблице. Его текст не выводится на экран и может воспроизводиться только специальными программными средствами (например, программой-синтезатором речи):
summary="текст_комментария"
Допустимые стандартные атрибуты: id, class, lang, dir, title, style, атрибуты событий.
<CAPTION> </CAPTION>
Элемент для задания заголовка таблицы. Несмотря на то, что этот элемент должен располагаться между тегом <TABLE> и первым тегом <TR>, заголовок выводится на экране вне рамки таблицы. Этот элемент используется редко, потому что подобную надпись можно создать при помощи текстовых элементов. Положением заголовка можно управлять:align="top" — заголовок над таблицей;
align="bottom" — заголовок под таблицей;
align="left" — заголовок вверху и выровнен влево;
align="right" — заголовок вверху и выровнен вправо.
Другие атрибуты: id, class, lang, dir, title, style, атрибуты событий.
Выравнивание данных в ячейках таблицы
Существует набор атрибутов, предназначенных для выравнивания данных в ячейках таблиц. Атрибут align позволяет выравнивать данные в ячейках по горизонтали. Он принимает следующие значения:left — выравнивание влево;
right — выравнивание вправо;
center — центрирование.
Атрибут valign позволяет выравнивать текст по вертикали. Значения могут быть такие:
top — выравнивание по верхнему краю ячейки;
bottom — выравнивание по нижнему краю ячейки;
middle — выравнивание по центру;
baseline — выравнивание по первой строке.
Для примера можно продемонстрировать использование значения baseline в строке таблицы:
<TR valign="baseline"> <TD>Строка 1<BR>Строка 2 </TD>
<TD>Ячейка 2</TD></TR>
Здесь первая ячейка содержит две строки текста, а вторая — одну. С помощью атрибута valign строки «Строка 1» и «Ячейка 2» будут расположены на одном уровне.
<TR>
Элемент, создающий строку таблицы. Он может не иметь конечного тега. Строка заканчивается там, где начинается следующая, то есть следующий элемент TR. Внутри элемента располагаются элементы TH и TD, определяющие одиночные ячейки. Для выравнивания содержимого всех ячеек в строке можно использовать хорошо известный нам атрибут align и присваивать ему значения left, center и right.Кроме этого, содержимое ячеек можно выравнивать по вертикали:
valign="top" — по верхнему краю;
valign="middle" — по центру;
valign="bottom" — по нижнему краю.
Другие допустимые атрибуты: id, class, lang, style, dir, title, char, charoff, атрибуты событий.
<TH>
Элемент ячейки, которая является заголовком столбца или строки таблицы. Этот элемент должен располагаться внутри элемента TR. Ячейка-заголовок отличается от обычной тем, что броузер выводит текст внутри нее выделенным (как правило, полужирным) шрифтом. Для элемента ячейки предусмотрено много атрибутов.Если в ячейку введено большое количество текста, броузер разбивает его на строки так, чтобы сохранить требуемую конфигурацию таблицы. Конфигурацию может определять заданная фиксированная ширина таблицы, необходимость согласовать размер таблицы и области просмотра, заданная ширина ячейки. При помощи атрибута nowrap (он не имеет параметров) можно запретить форматирование текста. В этом случае в ячейке будет создана одна строка, а таблица может уйти за край окна.
Атрибуты rowspan и colspan позволяют создавать ячейки, которые в несколько раз больше других ячеек таблицы. Иными словами, ячейки в таблице можно объединять.
При задании атрибута
rowspan=n
и условии, что n>1, соответствующая ячейка займет не одну, а n строк, и, соответственно, будет иметь размер в n раз больший, чем обычная ячейка данного столбца.
Аналогично, при помощи атрибута colspan можно создавать ячейки, расположенные сразу в нескольких столбцах.
Известный атрибут align может использоваться и для одной ячейки. Он может принимать значения left, center и right. По умолчанию для элемента TH используется центрирование текста.
Для элемента TH можно использовать атрибут valign таким же образом, как и для элемента TR.
Размеры ячеек можно задавать численно (в пикселах или процентах):
width=ширина
height=высота
<TD>
Этот элемент определяет обычную ячейку таблицы. Для него могут быть использованы те же атрибуты, что и для элемента TH.Оба элемента — TH и TD — могут не иметь конечных тегов. При больших размерах таблицы это дает существенное уменьшение объема файла Web-страницы. Функцию конечного тега выполняет следующий элемент, который определяет структуру таблицы.
Рис. 2.15. Пример таблицы
На рис. 2.15 показан код таблицы, а на рис. 2.16,а — ее внешний вид. Первая строка таблицы содержит объединенную ячейку (использован атрибут colspan). Текст, расположенный после элементов TD, представляет собой содержимое ячейки. Таблица может форматироваться автоматически (если не заданы атрибуты) с учетом объема данных в ячейках, при этом броузер старается минимизировать размеры таблицы.
Рис. 2.16. Пример таблицы: а — со сплошной рамкой; б — с двойной рамкой
Если задать значение атрибута cellspacing больше нуля, то сплошная рамка превратится в двойную (рис. 2.16,а).Группы строк: <THEAD>, <TFOOT> и <TBODY>
Строки таблицы можно объединять в группы. Для этого предусмотрен элемент заголовка THEAD, элемент «тела таблицы» TBODY и элемент нижней секции строк TFOOT. В каждом блоке может присутствовать любое количество строк (элементов TR). Эти три элемента могут использоваться как с конечными тегами, так и без них. На рис. 2.17 видно, что независимо от расположения секций, строки заголовка размещаются первыми, а строки секции — TFOOT внизу. Данные элементы групп дают возможность определения дополнительных стилей.
Рис. 2.17. Таблица с группами строк (HTML-код и внешний вид)
При использовании этих элементов надо придерживаться следующих правил:— в каждой таблице можно использовать по одному элементу THEAD и TFOOT, но несколько элементов TBODY;
— все блоки должны содержать одинаковое количество колонок.
Группы колонок: <COLGROUP> и <COL>
Элемент COLGROUP позволяет создавать группы колонок с одинаковыми свойствами. Общий шаблон использования этого элемента выглядит следующим образом:<COLGROUP атрибуты_ группы_колонок>
<COL атрибуты_колонки_в_группе>
... другие элементы <COL>...
</COLGROUP>
Каждый элемент COLGROUP позволяет задать общие свойства для определенного числа колонок, задаваемого атрибутом span. Можно также использовать дополнительный элемент COL для указания свойств одной колонки. Тогда часть свойств будет совпадать для всех колонок, относящихся к одному элементу COLGROUP, а часть может отличаться. В таблице могут быть определены свойства любого количества колонок, и если реальных колонок будет меньше, то некоторые (последние) определения окажутся невостребованными. Это не является ошибкой. Для задания свойств могут использоваться те же самые атрибуты, что и для других элементов таблицы.
Пример таблицы показан на рис. 2.18. Для первой колонки создан отдельный элемент COLGROUP, который задает ширину 30 пикселов и белый цвет фона. Три следующие колонки объединены в группу. Для них с помощью атрибута style заданы фоновый цвет «darkgray», белый цвет текста, полужирное начертание символов. Но для первых двух колонок (span=2) этой группы задана ширина 35 пикселов, а для последней ширина составляет 60 пикселов. Для последней колонки создан элемент COLGROUP, который определяет фоновый цвет «aliceblue», и для этой же колонки создан элемент COL, который задает ширину 50 пикселов.
Рис. 2.18. Таблица с элементами COLGROUP и COL
Существует несколько правил использования элементов.— Элементы COLGROUP и COL только задают свойства ячеек, а сами ячейки создаются при помощи элементов TR, TD, TH.
— В смысле описания свойств элемент COLGROUP обладает более высоким приоритетом, нежели элементы COL.
— Элементы COL располагаются внутри элементов COLGROUP.
— В таблице могут присутствовать несколько элементов COLGROUP.
— Если число колонок в одном таком элементе задается при помощи атрибута span, использовать в нем элементы COL не следует. Если же элементы COL внутри данного элемента COLGROUP существуют, то атрибут span игнорируется, а число колонок в группе определяется числом элементов COL.
— Для отдельных элементов COL можно вводить собственные атрибуты span.
Отметим, что аналогичного элемента для группировки строк не существует, а общие свойства ячеек, входящих в строку, задаются в элементе TR.
Примеры использования таблиц
Таблица с заголовками строк и столбцов
При необходимости можно создать заголовки и для столбцов, и для строк:<TABLE border=1 cellspacing=0 cellpadding=4>
<CAPTION> Заголовок таблицы </CAPTION>
<TR><TH bgcolor="aliceblue">
<TH bgcolor="aliceblue">Заголовок 1
<TH bgcolor="aliceblue">Заголовок 2
<TR><TH bgcolor="aliceblue">Заголовок 3
<TD>Ячейка 1
<TD>Ячейка 2
<TR><TH bgcolor="aliceblue">Заголовок 4
<TD>Ячейка 3
<TD>Ячейка 4
</TABLE>
Эта таблица показана на рис. 2.19. Обратите внимание: несмотря на то, что левая верхняя ячейка не используется, для нее задан цвет фона так же, как и для других ячеек-заголовков. Это необходимо сделать для того, чтобы рамка таблицы в этом месте была правильно прорисована.
Рис. 2.19. Таблица с заголовками строк и столбцов
Таблица с объединенными ячейками
В некоторых случаях возникает необходимость объединения ячеек. Тогда можно использовать атрибуты rowspan и colspan, как показано в этом примере:<TABLE border=1 cellspacing=0 cellpadding=4>
<TR><TH rowspan=2> <TH colspan=2>Заголовок 1
<TR><TH>Заголовок 1.1<TH>Заголовок 1.2
<TR><TH>Заголовок 2<TD>Ячейка 1<TD>Ячейка 2
<TR><TH>Заголовок 3<TD>Ячейка 3<TD>
</TABLE>
Эта таблица изображена на рис. 2.20. Обратите внимание, что в ячейке, не содержащей текста, помещен символ неразрывного пробела , чтобы сетка таблицы была правильно прорисована.
Рис. 2.20. Таблица с объединенными ячейками
Атрибуты rowspan и colspan могут использоваться совместно в элементе TD. В этом случае в одну ячейку объединяются ячейки из нескольких столбцов и нескольких строк. Пример такой таблицы показан на рис. 2.21. Она создана при помощи следующего кода:<TABLE border=1 cellspacing=0 cellpadding=4>
<TR>
<TH>Заголовок 1</TH>
<TH>Заголовок 2</TH>
<TH>Заголовок 3</TH>
</TR>
<TR>
<TD rowspan=3 colspan=2 align="center" valign="middle">Ячейка 1</TD>
<TD>Ячейка 2</TD>
</TR>
<TR><TD>Ячейка 3</TD></TR>
<TR><TD>Ячейка 4</TD></TR>
<TR><TD colspan=3 align="center">Ячейка 5</TD></TR>
</TABLE>
Для больших ячеек, если в них мало текста, целесообразно использовать выравнивание надписи как по горизонтали (атрибут align), так и по вертикали (атрибут valign).
Рис. 2.21. Другой вариант таблицы с объединенными ячейками
Оформление Web-страницы
С точки зрения Web-дизайна таблица является очень удобным элементом для размещения всей информации Web-страницы. Обычно используется невидимая таблица (с атрибутом border=0).Первый подход заключается в том, что вся информация помещается в таблицу фиксированной ширины (720 пикселов в расчете на разрешение мониторов 800x600 или 940 пикселов в расчете на разрешение мониторов 1024x768) с выравниванием по центру.
Второй подход заключается в использовании таблицы с атрибутом width=100%. В таблице создаются две или три колонки. Данные в левых ячейках выравниваются влево, а данные в правых ячейках — вправо. В этом случае независимо от разрешения экрана информация распределяется оптимальным образом.
В тех случаях, когда структура таблицы достаточно сложна, можно использовать вложение таблиц. В этом случае одна из таблиц размещается вместо данных одной из ячеек. Для облегчения процесса конструирования можно создавать таблицы по отдельности, а затем переносить те, которые должны быть расположены внутри, при помощи буфера обмена.
Кнопка
Таблицу из одной ячейки можно использовать в качестве кнопки или элемента меню. В следующем примере заданы цвета объемной рамки:<TABLE border=2 cellspacing=0 cellpadding=3
bordercolorlight=#50B0F0 bordercolordark=#205888
bgcolor="#EAEAEF">
<TR>
<TD><A href="http://адрес">Текст ссылки</A></TD>
</TR>
</TABLE>
Меню
Предыдущий пример можно усложнить, создав меню из двух пунктов на основе таблицы:<TABLE cellpadding=3 cellspacing=0 border=1
bordercolorlight=#50B0F0 bordercolordark=#205888
bgcolor="#EAEAEF">
<TR>
<TD onMouseOver='this.style.backgroundColor="#FFAD5F"'
onMouseOut='this.style.backgroundColor=""' >
<A href="page1.htm">Пункт меню 1</A></TD>
<TD onMouseOver='this.style.backgroundColor="#FFAD5F"'
onMouseOut='this.style.backgroundColor=""' >
<A href="page2.htm">Пункт меню 2</A></TD>
</TR>
</TABLE>
Здесь в код таблицы дополнен атрибутами событий для замены фона ячейки при наведении мыши. Когда указатель мыши покидает ячейку, возвращается фон по умолчанию — в данном случае прозрачный. На рис. 2.22 показан внешний вид меню.
Рис. 2.22. Пример меню на основе таблицы
Мозаичный рисунок
Иногда возникает необходимость разбить рисунок на несколько частей (например, одну часть мозаики можно сделать анимационной). В этом случае при помощи таблицы можно обеспечить точную подгонку фрагментов друг к другу. В этом примере рисунок размером 220(200 пикселов разбит на четыре части:<TABLE border=0 cellspacing=0 cellpadding=0>
<TR>
<TD><img src="pict11.jpg" width="110" height="100"></TD>
<TD><IMG src="pict12.jpg" width="110" height="100"></TD>
</TR>
<TR>
<TD><IMG src="pict21.jpg" width="110" height="100"></TD>
<TD><IMG src="pict22.jpg" width="110" height="100"></TD>
</TR>
</TABLE>
На рис. 2.23,а показан вариант со значением атрибута cellspacing=2, а на рис. 2.23,б — со значением атрибута cellspacing=0. В зависимости от определенных дизайнерских задач можно использовать разные варианты.
Рис. 2.23. Составной рисунок
Для того чтобы между частями рисунка не было зазоров и смещения, необходимо выполнить ряд условий:— значения атрибутов border, cellspacing и cellpadding должны быть равны нулю;
— необходимо использовать конечные теги ячеек таблицы </TD>;
— в ячейках таблицы не должно быть пробелов, символов и лишних элементов, должен остаться только элемент IMG;
— в элементах IMG должны быть заданы атрибуты width и height.
Стихотворный текст
В стихотворном тексте строфы должны располагаться по центру страницы, а строки должны быть выровнены влево. Для того чтобы добиться этого эффекта при любом размере окна броузера, удобно использовать таблицу, как показано в примере ниже.<CENTER>
<FONT color="blue"><H3>Интернет</H3></FONT>
<P> </P>
<TABLE border=0>
<TR><TD><FONT size=4 color="blue">
Есть надежная примета:<BR>
Если нету Интернета,<BR>
Значит будет сладок сон<BR>
И свободен телефон.<BR>
</FONT>
</TR>
</TABLE>
</CENTER>
Каждая строфа помещается в отдельную ячейку таблицы. Строки должны завершаться элементом BR. Для того чтобы отформатировать текст, можно использовать соответствующие элементы (например, FONT) или создать стиль для элемента TABLE или элемента CENTER. Например, можно определить цвет текста с помощью атрибута:
style="color: цвет"
В каждой ячейке можно добавить элемент абзаца P для того чтобы строфы были отделены друг от друга.
Если стихотворение не имеет названия, в заголовке обычно помещают три звездочки. После текста можно разместить три горизонтальные линии разной длины (элементы HR). Все эти детали должны находиться внутри элемента CENTER.
Оптимизация размера кода таблицы
При больших размерах таблицы (например, если она содержит прайс-лист) ее теги занимают значительную долю в общем объеме HTML-файла. Нетрудно подсчитать, что в таблице размером 500 строк на 5 столбцов только конечные теги занимают 15000 байт. При генерации таблиц часто используются атрибуты align, style и другие, что приводит к еще большему увеличению объема. Web-страница получается достаточно большой и долго загружается. В то же время не вся информация является необходимой. Если таблица создается программным способом, целесообразно:— исключить конечные теги </TD>, </TH>, </TR>;
— максимально использовать настройки форматирования по умолчанию и атрибуты элемента TABLE, а в необходимых случаях примерять CSS;
— исключить необязательные пробелы (например, в начале строк).
© TEKCT.RU, А. Гончаров, 2007-2022
|
|