СС ЭВМ лекция

4.1.9. Таблицы

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

Для создания таблицы используются теги <TABLE> и </TABLE>. Между этими тегами располагаются теги <TR> и </TR>. Они окружают каждую строку таблицы. Если необходимо создать несколько строк в таблице, используется столько же тегов <TR> и </TR>. В каждой строке таблицы обычно отображаются ячейки. Каждая ячейка должна быть окружена тегами <TD> и </TD>. Количество этих тегов в строке определяет количество ячеек. Число ячеек в строках не обязательно должно быть одинаковым.

Для создания заголовков столбцов и строк вместо простой строки, создается заголовок и текст его размещается между тегами <TH> и </TH>. Этот текст будет отображен жирным шрифтом и отцентрирован. Разрешается применить некоторые атрибуты.

Атрибут NOWRAP. Он используется в тегах <TH> и </TH> или <TD> и </TD> для того, что бы текст помещался в одной строке (ячейка при этом расширяется).

Атрибут COLSPAN=x. Если какая-нибудь ячейка должна быть шире вышерасположенных или нижерасположенных, то используется этот тег. Величина х указывает количество объединяемых горизонтальных ячеек.

Атрибут ROWSPAN=x. Этот атрибут аналогичен предыдущему, только он объединяет x вертикальных ячеек.

Атрибут WIDTH=x. Этот атрибут определяет ширину таблицы, если он задан в теге <TABLE>, ширину группы ячеек или ширину отдельной ячейки, если указан в тегах <TR> и </TR> или <TH> и </TH>. Величина х указывает ширину в пикселях или в процентах. Оптимальным значением является WIDTH=50%.

Атрибут UNIT=. Он применяется в теге <TABLE> для определения единицы измерения размеров в таблице. Атрибут принимает следующие значения:

UNIT=EN - в en-пробелах,

UNIT=RELATIVE - относительные значения в процентах от общей ширины таблицы,

UNIT=PIXELS - в пикселях, например <TABLE UNIT=PIXELS WIDTH=200> создает таблицу шириной в 200 пикселей.

Атрибут COLSPEC=. Используется с атрибутом UNIT=. Он определяет, сколько места занимает каждый столбец таблицы и тип выравнивания данных. Применяется только в теге <TABLE>. В атрибуте COLSPEC= перечисляются все столбцы. Для каждого задаётся выравнивание одним из пяти типов: L - по левому краю, С - по центру, R - по правому краю, J - по правому и левому краю, D - по десятичной запятой. Размер задаётся в пикселях. Например, тег <TABLE UNIT=PIXELS COLSPEC="L10 C20 R10"> определяет таблицу, в которой первая ячейка имеет ширину в 10 пикселей и выравнивание по левому краю, вторая - 20 пикселей и выравнивание по центру, третья - 10 пикселей, выравнивание по правому краю.

Атрибут DP=. Определяет символ, используемый для отделения целой части десятичной дроби. По умолчанию используется тег DP=".", определяющий в качестве разделителя точку. Атрибут DP="," задает запятую.

Атрибут CELLPADDING=x. Определяет поле вокруг содержимого ячейки. Величина х задает число пикселей.

Атрибут ALIGN=. Используется в тегах <TR>, <TD>, <TH>. Он определяет выравнивание содержимого по горизонтали. Значения атрибута могут быть следующими:

ALIGN=LEFT - выравнивает содержимое ячейки по левому краю,

ALIGN=CENTER - по центру,

ALIGN=RIGHT - по правому краю,

ALIGN=BLEEDLEFT - предыдущие значения учитывали отступ, заданный атрибутом CELLPADDING. При задании этого атрибута содержимое ячейки прижимается вплотную к левому краю.

Атрибут VALIGN=. Сходен с предыдущим, но задает выравнивание по вертикали. Значения:

VALIGN=TOP - выравнивание содержимого по верхней границе,

VALIGN=MIDDLE - центрирует по вертикали,

VALIGN=BOTTOM - выравнивает по нижней границе.

Для создания заголовков таблицы существует тег <CAPTION>. Заголовок может быть над таблицей (<CAPTION ALIGN=TOP>), или под таблицей (<CAPTION ALIGN=BOTTOM>). Заголовком может быть текст или графика. Этот тег хорош для создания подписей под рисунками, заключенными в таблицу без границ.

Основной частью таблицы являются границы ячеек. Для управления толщиной границ используется атрибут BORDER=x. Можно сделать таблицу вообще без границ, задав атрибут в теге <TABLE BORDER=0>. Читатель страницы даже не будет знать, как получена такая точная компоновка содержимого. Напротив, толстые границы привлекают внимание к таблице. Можно задать красивую толстую рамку вокруг картинки, она будет похожа на настоящую рамку.

Для задания толщины промежутков между ячейками используется атрибут CELLSPACING=x. По умолчанию x=2 пикселям. Этот атрибут хорошо использовать вместе с атрибутом BORDER= для задания красивых рамок вокруг изображений.

С помощью таблиц можно сделать красивые выпуклые панели с графикой или текстом.

Пример 5.

<HTML>

<HEAD>

<TITLE>

Простая таблица

</TITLE>

</HEAD>

<BODY>

<CAPTION ALIGN=CENTER>Мои друзья</ CAPTION>

<TR>

<TH>Год рождения</TH>

</TR>

<TR>

<TD>Ольга</TD>

</TR>

<TR>

<TD>Марина</TD>

</TR>

<TR>

<TD>Игорь</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Содержание