Работа с таблицами

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

При создании таблиц используется принцип вложения: внутри основного элемента таблицы (TABLE) создается ряд элементов, определяющих строки (TR), а внутри этих элементов размещаются элементы для описания каждой ячейки в строке (ТD,ТН). Чтобы разобраться в структуре существующей таблицы или создать новую таблицу, необходимо помнить, что последовательность элементов описывает таблицу сверху вниз и справа налево.

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

Таблица целиком заключается в паpу скобок

<TABLE> </TABLE>

Каждый горизонтальный ряд заключается в скобки

<TR> </TR>

а каждая ячейка внутри ряда в скобки

<TD> </TD>

Элемент <CAPTION> </CAPTION >

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

• align="top" — заголовок над таблицей;

• align="bottom" — заголовок под таблицей;

• align="left" — заголовок вверху и выровнен влево;

• align=" right " — заголовок вверху и выровнен вправо.

Для управления видом рамки используются два атрибута: шириной боковой грани управляет атрибут: border =ширина, при задании нулевого значения для этого атрибута рамка исчезает совсем.

Шириной фронтальной грани управляет атрибут: cellspacing =ширина.

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

• align="left" - влево;

• align="center" - по центру;

• align=" right" - вправо.

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

width=400

width=50%

Для <TD> можно указать свойства отдельной ячейки:

ALIGN=LEFT

ALIGN=RIGHT

ALIGN=CENTER

задает выравнивание по горизонтали текста внутри ячейки влево, вправо или по центру соответственно.

VALIGN=TOP

VALIGN=BOTTOM

VALIGN\MIDDLE

задает вертикальное выравнивание - по верхнему краю, по нижнему или посередине. Оба эти атрибута могут быть указаны и в <TR>. В этом случае они определяют выравнивание для всех ячеек строки, кроме тех, где они же заданы явно.

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

WIDTH=число WIDTH=пpоцент%

HEIGTH=число HEIGTH=пpоцент%

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

BGCOLOR=цвет

BACKGROUND=каpтинка

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

cellpadding=-число пикселов

или

cellpadding="15%"

Задание этого атрибута делает ячейки больше.

Элемент <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 , атрибуты событий.

Элемент <TH>

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

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

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

Элемент <TD>

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

Ниже приведен пример использования таблиц:

<HEAD>

<TITLE> Пример номер 3 </TITLE>

</HEAD>

<BODY LEFTMARGIN=50 >

<H1 align=center> Примеры работы с таблицей </H1>

< TABLE border=4 cellspacing=3>

<CAPTION> Общий заголовок таблицы </caption>

<TR>

<TH bgcolor="yellow">

<TH bgcolor="yellow"> 3aгoловок 1

<TH bgcolor="yellow"> 3aголовок 2

<TR>

<TH bgcolor="yellow"> 3aголовок 3

<TD> Ячейка 1

<TD> Ячейка 2

<TR>

<TH bgcolor="yellow"> 3аголовок 4

<TD> Ячейка 3

<TD> Ячейка 4

</table>

<P>Ещё пример таблицы: </P>

<TABLE border="4" cellspacing=3>

<CAPTION> Таблица с объединенными ячейками </caption>

<TR> <TH rowspan="2">  <TH colspan="2"> 3аголовок 1

<TR> <TH> Заголовок 1.1 <TH>Заголовок 1.2

<TR> <TH> Заголовок 2 <TD> Ячейка 1.1 <TD> Ячейка 1.2

<TR> <TH> Заголовок 3 <TD> Ячейка 2.1 <TD> Ячейка 2.2

</table>

</BODY>

</HTML>