Поиск

Таблицы стилей

Таблицы являются очень удобным средством форматирования данных на Web странице. Основное удобство заключается в том, что броузер берет на себя заботу о прорисовке рамки таблицы. Размер рамки может быть автоматически согласо ван с размером окна просмотра в броузере и, разумеется, с размером находящихся в ячейках таблицы строк текста и рисунков. Кроме того, таблицы позволяют решать чисто дизайнерские задачи: выравнивать части страницы друг относительно дру га, размещать рядом рисунки и текст, управлять цветовым оформлением и т. д. При создании таблиц используется принцип вложения: внутри основного элемен та таблицы (TABLE) создается ряд элементов, определяющих строки (TR), а внутри этих элементов размещаются элементы для описания каждой ячейки в строке (ТО,ТН). Чтобы разобраться в структуре существующей таблицы или создать новую таб лицу, необходимо помнить, что последовательность элементов описывает табли цу сверху вниз и справа налево. Например, если после элемента TABLE указан эле мент TR, это означает, что начинается описание новой строки таблицы. Все, что расположено за этим элементом, будет размещено в одной строке (справа налево). Это может быть последовательность элементов TD (ячеек), другая таблица и т. д. После того как встретится новый элемент TR, начнется описание следующей стро ки, и т. д. до конца таблицы (тега </table>).

<TABLE> </table>

Внешний элемент таблицы. Он позволяет задавать общие свойства таблицы и отделяет структуру таблицы от остальной части Webстраницы. Рассмотрим ат рибуты этого элемента. Большинство атрибутов могут использоваться и в других элементах таблицы.

Таблицу можно выровнять по горизонтали при помощи атрибута align:

align="left" — влево;
align="center" по центру;
align=" right" — вправо.

Ширину таблицы можно задать точно в пикселах или в процентном отношении к ширине страницы в окне броузера. Например:

width=400
width=50%

Для управления видом рамки используются два атрибута. Дело в том, что броузер создает изображение рамки, имитируя ее трехмерность (выпуклость) при помо щи различия в освещенности граней. На рамке можно различить фронтальную и боковую наклонную грани (рис. 3.9).

Шириной боковой грани управляет атрибут:

border=шрина

При задании нулевого значения для этого атрибута рамка исчезает совсем. Шириной фронтальной грани управляет атрибут:

cellspecing=ширина

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

cellpaddingчисло пикселов
или
cellpadding="15%"

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

bgсо1оr="Цвет"
bgсо1оr=#RRGGBB;

Вместо цвета допускается использовать рисунок:

background="Файл"

Атрибуты bgcolor и background можно указывать и с другими элементами табли цы, кроме элемента CAPTION.
Атрибут frame (используемый только для элемента TABLE) позволяет задать вид рамки таблицы:

frame="параметр"

Существуют следующие стандартные параметры

void — рамка отсутствует;
above — верхняя сторона рамки;
below — нижняя сторона рамки;
hsides — части рамки сверху и снизу;
vsides — части рамки слева и справа;
Ihs — левая часть рамки;
rhs — правая часть рамки;
border или box — рамка показана полностью.

Разумеется, если атрибут frame отсутствует, рамка вокруг таблицы выводится целиком. Атрибут rules определяет вид сетки таблицы внутри, то есть между ячейками. Он тоже имеет несколько параметров:

none — сетка отсутствует;
groups — сетка вокруг групп ячеек;
rows — горизонтальные линии между строками;
cols — вертикальные линии между колонками;
all — обычная сетка.

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

summary='Te/ccr комментария"

Допустимые стандартные атрибуты: id, class, lang, dir, title, style, атрибуты со бытий.

<CAPTION> </caption>

Элемент для задания заголовка таблицы. Несмотря на то что этот элемент рас полагается внутри элемента TABLE, заголовок выводится на экране вне рамки таб лицы (см. рис. 3.9). Положением заголовка можно управлять:

align="top" — заголовок над таблицей;
align="bottom" — заголовок под таблицей;
align="left" — заголовок вверху и выровнен влево;
align=" r i g h t " — заголовок вверху и выровнен вправо.

Другие атрибуты: id, class, lang, dir, title, style, атрибуты событий.
Выравнивание данных в ячейках
Существует набор атрибутов, предназначенных для выравнивания данных в ячейках таблиц. Атрибут align позволяет выравнивать данные в ячейках по гори зонтали. Он принимает следующие значения:

left — выравнивание влево;
right — выравнивание вправо;
center — центрирование.

Атрибут v a l i g n позволяет выравнивать текст по вертикали. Значения могут быть такие:

top — выравнивание по верхнему краю ячейки;
bottom — выравнивание по нижнему краю ячейки (не всегда работает);
center — выравнивание по центру;
baseline — выравнивание по первой строке.

Для примера можно продемонстрировать использование значения baseline:

<TR valign="baseline"> <ТО>Строка 1<Ьг>Строка 2 <ТО>Ячейка 2

Здесь первая ячейка содержит две строки текста, а вторая — одну. С помощью ат рибута valign строки Строка 1 и Ячейка 2 будут расположены на одном уровне.

<TR>

Элемент, создающий строку таблицы. Он не имеет конечного тега. Строка закан чивается там, где начинается следующая, то есть следующий элемент TR. Внутри элемента располагаются элементы ТН и TD, определяющие одиночные ячейки. Для выравнивания содержимого всех ячеек в строке можно использовать хорошо из вестный нам атрибут align и присваивать ему значения l e f t , center и right. Кроме этого, содержимое ячеек можно выравнивать по вертикали:

valign="top" по верхнему краю;
valign="center" по центру;
valign="bottom" — по нижнему краю.

Другие допустимые атрибуты: id, class, lang, style, d i r , title, char, c h a r o f f , атри буты событий.

<тн>

Элемент ячейки, которая является заголовком столбца или строки таблицы. Этот элемент должен располагаться внутри элемента TR. Ячейказаголовок отличается от обычной тем, что броузер выводит текст внутри нее выделенным (как правило, полужирным) шрифтом. Для элемента ячейки предусмотрено несколько атрибутов. Если в ячейку введено большое количество текста, броузер разбивает его на стро ки так, чтобы сохранить требуемую конфигурацию таблицы. Конфигурацию мо жет определять заданная фиксированная ширина таблицы, необходимость со гласовать размер таблицы и области просмотра, заданная ширина ячейки. При помощи атрибута nowrap (он не имеет параметров) можно запретить форматиро вание текста. В этом случае в ячейке будет создана одна строка, а таблица может уйти за край окна.

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

При задании атрибута
rowspan=n
и условии, что п>1,
соответствующая ячейка займет не одну
а n строк, и, соответ ственно, будет иметь размер в n раз больший, чем обычная ячейка данного столбца.

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

Хорошо известный нам атрибут align используется и для одной ячейки. Он мо жет принимать значения left (выравнивание по левому краю), center (выравни вание по центру) и right (выравнивание по правому краю). Обычно по умолча нию используется выравнивание влево. Элемент ТН в этом смысле — исключение. Он обеспечивает центрирование текста, если атрибут align отсутствует. Для элемента ТН можно указать атрибут valign таким же образом, как и для эле мента TR.

Размеры ячеек можно задавать точно:

width=ширина
height=высота
<TD>

Этот элемент определяет обычную ячейку таблицы. Для него допустимы те же атрибуты, что и для элемента ТН.

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

<TABLE border=4 cellspacing=3>
<CAPTION> Заголовок таблицы </caption>
<TR><TH bgcolor="yellow">3аголовок 1
<TH>bgcolor="yellow">3аголовок 2
<ТРхТО>Ячейка 1
<ТО>Ячейка 2
<ТНхТО>Ячейка 3
<ТО>Ячейка 4
</table>

Из примера видно, что первая строка таблицы содержит только ячейкизаголов ки. Внешний вид таблицы показан на рис. 3.9. Текст, расположенный после элемен тов TD, представляет собой содержимое ячейки. Таблица может форматироваться автоматически (если не заданы атрибуты) с учетом объема данных в ячейках. Последний пример можно несколько усложнить. При необходимости можно создать заголовки как для столбцов, так и для строк:

<TABLE border=4 cellspacing=3>
<CAPTION> Заголовок таблицы </caption>
<TR><TH bgcolor="yellow">
<TH bgcolor="yellow">3aronoBOK 1
<TH bgcolor="yellow">3arcmoBOK 2
<TR><TH bgcolor="yellow">3arcmoBOK 3
<ТО>Ячейка 1
<ТО>Ячейка 2
<TR><TH Ьдсо1ог="уе11о«">3аголовок 4
<ТО>Ячейка 3
<ТО>Ячейка 4
</table>

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

Еще один пример таблицы. В некоторых случаях возникает необходимость объе динения ячеек. Тогда можно использовать атрибуты rowspan и colspan, как пока зано в этом примере:

<TABLE border="4" cellspacing=3 background="fon01.gif">
<САРТЮМ>Таблица с объединенными ячейками </caption>
<TR><TH rowspan="2">&nbsp;<ТН со!зрап="2">3аголовок 1
<ТН><ТН>Заголовок 1.1<ТН>Заголовок 1.2
<ТН><ТН>Заголовок 2<ТО>Ячейка 1<ТО>Ячейка 2
<ТВхТН>Заголовок 3<ТО>Ячейка 3<ТО>Ячейка 4
</table>

Эта таблица показана на рис. 3.11. Обратите внимание, что в ячейке, не содержа щей текста, помещен символ неразрывного пробела &nbsp;. Это необходимо для того, чтобы сетка таблицы была правильно прорисована.

Группы строк: <THEAD>, <TFOOT> и <TBODY>

Существует возможность группировки строк таблицы. Для этого предусмотрен элемент блока заголовка THEAD, элемент обычных блоков строк TBODY и элемент нижнего блока строк TFOOT. В каждом блоке может присутствовать любое количе ство строк (элементов TR). Эти три элемента могут использоваться как с конечны ми тегами, так и без них. В качестве примера можно привести шаблон таблицы:

<TABLE border=2>
<THEAD>
<TR> <ТО>Заголовок КТDЗаголовок 2
<TFOOT>
<TR> <ТD>Нижний блок таблицы<ТО>&пЬзр;
<TBODY>
<TR> <ТD>Строка 1 <ТD>Ячейка 1.2
<TR> <ТD>Строка 2 <ТD>Ячейка 2.2
<TBODY>
<TR> <ТD>Строка 3 <ТD>Ячейка 3.2
<TR> <ТD>Строка 4 <TD>Ячейка 4.2
<TR> <ТD>Строка 5 <ТD>Ячейка 5.2
</table>

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

При использовании этих элементов надо придерживаться следующих правил.

  1. В таблице можно указывать по одному элементу THEAD и TFOOT, но несколько элементов TBODY.
  2. Последовательность задания элементов следующая: THEAD, TFOOT, TBODY. Но в таблице на экране блок TFOOT окажется самым нижним.
  3. Все блоки должны содержать одинаковое количество колонок.
Группы колонок: <COLGROUP> и <COL>

Элемент COLGROUP позволяет создавать группы колонок с одинаковыми свойства ми. Рассмотрим пример таблицы:

<TABLE border=4>
<COLGROUP span=1 width="30" bgcolor="lime">
<COLGROUP bgcolor="yellow">
<COL span=2 width="30">
<COL width="60">
<COLGROUP bgcolor="aqua">
<COL width="50"'>
<TR>
<TD> 11
<TD> 12
<TD> 13
<TD> 14
<TD> 15
<TR>
<TD> 21
<TD> 22
<TD> 23
<TD> 24
<TD> 25
</table>

Ее внешний вид показан на рис. 3.13. Каждый элемент COLGROUP позволяет назна чить свойства определенному числу колонок, задаваемому атрибутом span. Все эти колонки будут одинаковые. Можно также использовать элемент COL для ука зания свойств одной колонки. Тогда часть свойств будет совпадать для всех коло нок, относящихся к одному элементу COLGROUP, а часть может отличаться. В табли це могут быть определены свойства для любого количества колонок, и если реальных колонок будет меньше, то некоторые (последние) определения окажут ся невостребованными. Это не является ошибкой. Для задания свойств могут ис пользоваться те же самые атрибуты, что и для других элементов таблицы.

Есть несколько правил задания элементов. В смысле описания свойств элемет COLGROUP обладает более высоким приоритетом, а элементы COL располагаются внутри элементов COLGROUP. В таблице могут присутствовать несколько элементе! COLGROUP. Если число колонок в одном таком элементе задается атрибутом span использовать в нем элементы COL не имеет смысла. Если элементы COL существу ют, то атрибут span соответствующего элемента COLGROUP игнорируется, то ест! число колонок определяется числом элементов COL. Для отдельных элементов С01 можно вводить собственные атрибуты span.