Используя таблицы,
можно создавать такие эффекты, как верстка в несколько колонок,
применение эффектов состыковки картинки и фона, тонкие линии
на всю ширину или высоту странички и т.д.
Чтобы разобраться в устройстве таблицы,
расмотрим простой пример:
| Ячейка 1 |
Ячейка 2 |
| Ячейка 3 |
Ячейка 4 |
Такая таблица реализуется следующим
кодом:
<table width="300" border="1" align="center"
cellpadding="1" cellspacing="1" bgcolor="#FFCC00">
<TR>
<TD>Ячейка 1</TD>
<TD>Ячейка 2</TD>
</TR>
<TR>
<TD>Ячейка 3</TD>
<TD>Ячейка 4</TD>
</TR>
</table>
Таблица начинается открывающимся
тегом <TABLE>
и завершается закрывающимся
</TABLE>. Тег <TABLE>
может включать следующие аттрибуты:
| WIDTH |
Определяет
ширину таблицы в пикселях или процентах, по умолчанию
ширина таблицы определяется содержимым ячеек. |
| BORDER |
Устанавливает
толщину рамки. По умолчанию n=0 - таблица рисуется без
рамки. |
| BORDERCOLOR |
Устанавливает
цвет окантовки, где #FFFFFF (белый) - шестнадцатиричное
значение цвета. |
| BGCOLOR |
Устанавливает
цвет фона для всей таблицы, где #FFFFFF - шестнадцатиричное
число. |
| BACKGROUND |
Заполняет
фон таблицы изображением. |
| CELLSPACING |
Определяет
расстояние между рамками ячеек таблицы в пикселях. |
| CELLPADDING |
Определяет
расстояние в пикселях между рамкой ячейки и текстом. |
| ALIGN |
Определяет
расположение таблицы в документе. По умолчанию таблица
прижата к левому краю страницы. Допустимые значения аттрибута:
LEFT (слева), CENTER
(по центру страницы) и RIGHT
(справа). |
| FRAME |
Управляет
внешней окантовкой таблицы, может принимать следующие
значения:
VOID - окантовки
нет (значение по умолчанию).
ABOVE -
только граница сверху.
BELOW -
только граница снизу.
HSIDES -
границы сверху и снизу.
VSIDES -
только границы слева и справа.
LHS - только
левая граница.
RHS - только
правая граница.
BOX - рисуются
все четыре стороны.
BORDER -
также все четыре стороны. |
| RULES |
Управляет
линиями, разделяющими ячейки таблицы. Возможные значения
(n):
NONE - нет
линий (значение по умолчанию).
GROUPS -
линии будут только между группами рядов.
ROWS - только
между рядами.
COLS - только
между колонками.
ALL - между
всеми рядами и колонками. |
Таблица может включать заголовок,
который распологается между тегами <CAPTION></CAPTION>.
Он должен быть непосредственно после тега <TITLE>.
К заголовку возможно применение аттрибута ALIGN, определяющего
его положение относительно таблицы:
TOP - значение
по умолчанию, заголовок над таблицей по центру.
LEFT - заголовок
над таблицей слева.
RIGHT - заголовок
над таблицей справа.
BOTTOM - заголовок
под таблицей по центру.
Теперь о строках и ячейках таблицы.
Строки таблицы начинаются открывающимся тэгом <TR>
и завершаются закрывающимся </TR>,
а каждая ячейка таблицы начинается тегом <TD>
и завершается </TD>.
Данные теги могут иметь такие аттрибуты:
| Следующие
атрибуты могут применятся для строк и ячейек. |
| ALIGN |
Устанавливает
горизонтальное выравнивание текста в ячейках строки.
Может принимать значение LEFT
(выравнивание влево), CENTER
(выравнивание по центру) и RIGHT
(вправо). |
| VALIGN |
Устанавливает
вертикальное выравнивание текста в ячейках строки.
Допустимые значения: TOP
(выравнивание по верхнему краю), CENTER
(выравнивание по центру - это значение принимается
по умолчанию), BOTTOM
(по нижнему краю). |
| BGCOLOR |
Устанавливает
цвет фона строки или ячейки. |
| BACKGROUND |
Заполняет
фон строки или ячейки изображением. |
|
| Следующие
атрибуты могут применятся только для ячейек. |
| WIDTH |
Определяет
ширину ячейки в n пикселях. |
| HEIGHT |
Определяет
высоту ячейки в n пикселях. |
| COLSPAN |
Растягивание
ячейки по горизонтали. Например, <TD COLSPAN="2">
означает, что ячейка будет растянута на 2 колонки. |
| ROWSPAN |
Растягивание
ячейки по строке. Например, <TD ROWSPAN="2"
означает, что ячейка будет растянута на две строки
таблицы. |
| NOWRAP
|
Присутствие
этого аттрибута показывает, что текст должен размещаться
в одну строку |
| BACKGROUND |
Заполняет
фон ячейки изображением. |
|
Кроме этого, любая ячейка таблицы
может быть определена не тегами <TD></TD>,
а тегами <TH></TH>
- Table Header (заголовок таблицы). В принципе, это обычная
ячейка, но текст внутри этих тегов будет выделен полужирным
шрифтом и отцентрирован.
Если ячейка пустая, то вокруг нее
рамка не рисуется. Если рамка все же нужна вокруг пустой ячейки,
то в нее надо ввести символьный объект
(non-breaking space - неразрывающий пробел). Ячейка по-прежнему
будет пуста, а рамка вокруг нее будет (
- обязательно должен набираться строчными буквами и закрыватся
точкой с запятой).
И еще - имейте ввиду, что теги,
устанавливающие шрифт (<B>, <I>, <FONT SIZE="n",
FONT COLOR="#FFFFFF"), необходимо повторять для
каждой ячейки.
|
