Создание таблиц

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

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

<TABLE BORDER=1 WIDTH=200 ALIGN=CENTER>

<CAPTION> Простая таблица </CAPTION>

<TR>

<TD>Ячейка 1</TD>

<TD>Ячейка 2</TD>

</TR>

<TR>

<TD>Ячейка 3</TD>

<TD>Ячейка 4</TD>

</TR>

</TABLE>

Как видно из примера, начало и конец таблицы оформляются тегами <TABLE> и </TABLE>. Все остальные теги, создающие структуру таблицы и ее содержание, вкладываются в этот контейнер. Для того, чтобы создать рамку вокруг таблицы, можно задать атрибут BORDER=n, где n – толщина рамки в пикселах. По умолчанию таблицы не имеют рамок, т.е. n = 0. Атрибут WIDTH=n%, где n – целое число, позволяет занять таблицей нужный процент от ширины экрана. Если знак процента опущен, то считается, что n задает размер таблицы в пикселах.

Сразу после тега <TABLE> можно вставить контейнер, создающий заголовок таблицы: <CAPTION> текст заголовка </CAPTION>. Заголовок по умолчанию располагается над таблицей слева. Другое выравнивание задается атрибутом ALIGN:

LEFT – значение по умолчанию, заголовок над таблицей слева;

TOP –заголовок над таблицей по центру;

RIGHT – заголовок над таблицей справа;

BOTTOM – заголовок под таблицей по центру.

Если таблица имеет сложную структуру и какие-то ячейки занимают несколько столбцов или строк, следует в тегах <TH> или <TD> добавить атрибуты соответственно COLSPAN=n или ROWSPAN=n, где n – количество столбцов (строк), на которые растянута данная ячейка. Например, COLSPAN=3 означает, что ячейка по ширине будет простираться на 3 колонки, ROWSPAN=2 означает, что ячейка по высоте занимает две строки таблицы.

Пример. Фрагмент кода, создающего показанную таблицу:

<TABLE ВORDER=1>

<TR>

<TH> 1 </TH> <TH COLSPAN=3> 2 </TH>

</TR>

<TR>

<TH ROWSPAN=2> 3 </TH> <TH> 4 </TH>

<TH> 5 </TH> <TH > 6 </TH>

</TR>

<TR>

<TH> 7 </TH> <TH COLSPAN=2> 8 </TH>

</TR>

<TR>

<TH> 9 </TH> <TH> 10 </TH> <TH> 11 </TH>

<TH> 12 </TH>

</TR>

</TABLE>

Таблица создается по строкам. Для каждой строки создается контейнер <TR>…</TR>, определяющий, какие ячейки и информация должны находиться в этой строке. Атрибут ALIGN со значениями LEFT, CENTER или RIGHT задает горизонтальное выравнивание во всех ячейках строки. Атрибут VALIGN со значениями TOP, MIDDLE или BOTTOM – вертикальное выравнивание (по умолчанию MIDDLE – по центру).

Для оформления ячеек используются два вида контейнеров: <TH>…</TH> (Table Head) и <TD>…</TD> (Table Data). Первый свою информацию выравнивает по центру и изображает жирным шрифтом, второй выравнивает по левому краю и использует обычный шрифт. Обычно <TH>…</TH> используют для ячеек с заголовками строк или столбцов, а <TD>…</TD> – для ячеек с данными таблицы. Можно также оставить ячейку пустой, но, чтобы она была отображена на экране, следует внести в нее &-последовательность &nbsp; (см. п. 3).

Для оформления данных, скомпонованных в виде таблицы, в теги <TABLE>, <TR>, <TH>, <TD> добавляют атрибуты.

Основные атрибуты тега <TABLE>:

WIDTH – определяет ширину таблицы в пикселах или процентах, по умолчанию ширина таблицы определяется содержимым ячеек;

ALIGN – определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения атрибута: LEFT , CENTER и RIGHT;

BORDER – устанавливает толщину рамки в пикселах. По умолчанию – 0 (таблица рисуется без рамки);

BORDERCOLOR – устанавливает цвет рамки, по умолчанию черный. Цвет можно задавать английским словом или шестнадцатеричным числом;

CELLSPACING – определяет расстояние между рамками ячеек таблицы в пикселах;

CELLPADDING – определяет промежуток в пикселах между рамкой ячейки и текстом внутри нее;

BGCOLOR – устанавливает цвет фона для всей таблицы. По умолчанию белый. Цвет можно задавать английским словом или шестнадцатеричным числом;

BACKGROUND– заполняет фон таблицы изображением (см. п. 9). Значением атрибута является URL нужного файла.

Тег <TR>, открывающий строку таблицы, может иметь такие атрибуты:

ALIGN – устанавливает горизонтальное выравнивание текста во всех ячейках строки. Может принимать значения LEFT (по умолчанию), CENTER и RIGHT;

VALIGN – устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: TOP (выравнивание по верхнему краю), MIDDLE (выравнивание по центру – это значение принимается по умолчанию), BOTTOM (по нижнему краю);

BGCOLOR – устанавливает цвет фона для строки.

Ячейки таблицы начинаются тегами <TН> или <TD>. Для них предусмотрены следующие атрибуты:

ALIGN – устанавливает горизонтальное выравнивание текста в ячейке. Может принимать значение LEFT, CENTER и RIGHT;

VALIGN – устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: TOP, CENTER (это значение принимается по умолчанию), BOTTOM;

WIDTH – определяет ширину ячейки в пикселах;

HEIGHT – определяет высоту ячейки в пикселах;

NOWRAP – присутствие этого атрибута показывает, что текст должен размещаться в одну строку;

BGCOLOR – устанавливает цвет фона ячейки;

BACKGROUND – заполняет фон ячейки изображением. Значением атрибута является URL нужного файла.