Средства HTML для создания таблиц удобно использовать не только при представлении табличных данных. Их также применяют для точного выравнивания элементов на экране или комбинирования изображений и текстов. В качестве примера рассмотрим код, который создает простейшую таблицу:
Как видно из примера, начало и конец таблицы оформляются тегами <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 означает, что ячейка по высоте занимает две строки таблицы.
Пример. Фрагмент кода, создающего показанную слева таблицу:
Таблица создается по строкам. Для каждой строки создается контейнер <TR>…</TR>, определяющий, какие ячейки и информация должны находиться в этой строке. Атрибут ALIGN со значениями LEFT, CENTER или RIGHT задает горизонтальное выравнивание во всех ячейках строки. Атрибут VALIGN со значениями TOP, MIDDLE или BOTTOM – вертикальное выравнивание (по умолчанию MIDDLE – по центру).
Для оформления ячеек используются два вида контейнеров: <TH>…</TH> (Table Head) и <TD>…</TD> (Table Data). Первый свою информацию выравнивает по центру и изображает жирным шрифтом, второй выравнивает по левому краю и использует обычный шрифт. Обычно <TH>…</TH> используют для ячеек с заголовками строк или столбцов, а <TD>…</TD> – для ячеек с данными таблицы. Можно также оставить ячейку пустой, но, чтобы она была отображена на экране, следует внести в нее &-последовательность (см. п. 2.3).
Для оформления данных, скомпонованных в виде таблицы, в теги <TABLE>, <TR>, <TH>, <TD> добавляют атрибуты.
Основные атрибуты тега <TABLE>:
WIDTH – определяет ширину таблицы в пикселах или процентах, по умолчанию ширина таблицы определяется содержимым ячеек;
ALIGN – определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения атрибута: LEFT , CENTER и RIGHT;
BORDER – устанавливает толщину рамки в пикселах. По умолчанию – 0 (таблица рисуется без рамки);
BORDERCOLOR – устанавливает цвет рамки, по умолчанию черный. Цвет можно задавать английским словом (см. табл. 5 Приложения) или шестнадцатеричным числом;
CELLSPACING – определяет расстояние между рамками ячеек таблицы в пикселах;
CELLPADDING – определяет промежуток в пикселах между рамкой ячейки и текстом внутри нее;
BGCOLOR – устанавливает цвет фона для всей таблицы. По умолчанию белый. Цвет можно задавать английским словом или шестнадцатеричным числом (см. табл. 5 Приложения);
BACKGROUND – заполняет фон таблицы изображением (см. п. 2.9). Значением атрибута является URL нужного файла.
Тег <TR>, открывающий строку таблицы, может иметь такие атрибуты:
ALIGN – устанавливает горизонтальное выравнивание текста во всех ячейках строки. Может принимать значения LEFT (по умолчанию), CENTER и RIGHT;
VALIGN – устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: TOP (выравнивание по верхнему краю), MIDDLE (выравнивание по центру – это значение принимается по умолчанию), BOTTOM (по нижнему краю);
BGCOLOR – устанавливает цвет фона для строки (см. табл. 5 Приложения).
Ячейки таблицы начинаются тегами <TН> или <TD>. Для них предусмотрены следующие атрибуты:
ALIGN – устанавливает горизонтальное выравнивание текста в ячейке. Может принимать значение LEFT, CENTER и RIGHT;
VALIGN – устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: TOP, CENTER (это значение принимается по умолчанию), BOTTOM;
WIDTH – определяет ширину ячейки в пикселах;
HEIGHT – определяет высоту ячейки в пикселах;
NOWRAP – присутствие этого атрибута показывает, что текст должен размещаться в одну строку;
BGCOLOR – устанавливает цвет фона ячейки (см. табл. 5 Приложения);
BACKGROUND – заполняет фон ячейки изображением. Значением атрибута является URL нужного файла.
