Таблицы
При создании таблиц используется принцип вложения: внутри основного элемента таблицы (<TABLE>) создается ряд элементов, определяющих строки (<TR>), а внутри этих элементов размещаются элементы для описания каждой ячейки в строке (<TD>, <TН>). См. Пример 1.
<TABLE>
</TABLE> |
<TABLE>…</TABLE>
Внешний элемент таблицы позволяет задавать общие свойства таблицы и отделяет структуру таблицы от остальной части Web-страницы. Большинство его атрибутов могут использоваться и в других элементах таблицы.
Атрибуты <TABLE>…</TABLE>
Атрибут |
Значение |
Описание |
align |
left, right, center |
Выравнивание по горизонтали |
width |
число или процент |
Ширина таблицы |
cellpadding |
число |
Расстояние между содержимым ячейки и рамкой |
cellspacing |
число |
Расстояние между ячейками таблицы |
bgcolor |
цвет |
Цвет фона таблицы |
background |
цвет |
Фоновая картинка |
border |
число |
Толщина линий рамки |
bordercolor |
цвет |
Цвет линий рамки |
bordercolordark |
цвет |
Цвет рамки (снизу и справа) |
bordercolorlight |
цвет |
Цвет рамки (сверху и слева) |
frame |
void, above, below, hsides, vsides, lhs, rhs, border, box |
Вид рамки таблицы |
rules |
none, rows, cols, all |
Вид сетки внутри таблицы |
Атрибут align
Этот атрибут позволяет определять положение таблицы по отношению к соседним элементам документа, т.е. имеет для таблиц тот же смысл, что и для картинок.
align=left – выравнивание слева align=center – выравнивание по центру align=right – выравнивание справа |
Атрибут width
Задает ширину таблицы. Если атрибут не задан, браузер рисует таблицу минимальных размеров вокруг данных, которые она содержит.
Запись width=число заставляет браузер рисовать таблицу шириной в указанное число пикселей. Если реально для таблицы требуется больше места, значение width игнорируется.
Если заданный размер уводит таблицу за правую границу окна, браузер добавляет к окну горизонтальную линейку протяжки.
Можно также задавать ширину таблицы в процентном отношении к ширине окна браузера: процент (например: width=90%). См. Пример 2.
Атрибут cellpadding
Задает расстояние между рамкой таблицы и содержимым ячейки, т.е. размер пустого пространства, окружающего данные в ячейках:
cellpadding=число пикселей cellpadding=процент |
Задание этого атрибута делает ячейки больше. Между рамкой и данными всегда сохраняется определенное расстояние.
Атрибут cellspacing
Задает расстояние между рамками соседних ячеек (ширину фронтальной грани рамки). Если значение этого атрибута равно нулю, рамка получается тонкой, заостренной.
Когда атрибуты не заданы, браузер устанавливает их по режиму умолчания, обычно: cellpadding=1 и cellspacing=2. См. Пример 3.
Атрибуты bgcolor и background
Если атрибуты не заданы, элементы выводятся прямо на фон документа и таблица выглядит прозрачной. Атрибут bgcolor задает цвет фона таблицы, а атрибут background – паркетную укладку картинкой.
Атрибуты border и bordercolor
Первый атрибут задает толщину рамки вокруг всей таблицы, второй – ее цвет. Если border=0, то рамка, а заодно и прямоугольники клеток, не рисуются. См. Пример 4.
Атрибуты bordercolordark и bordercolorlight
Позволяют при необходимости нарисовать на экране объемную рамку. Первый задает цвет ее нижней и правой стороны, второй – левой и верхней. Если необходимо нарисовать рамку плоской (одноцветной), то эти атрибуты не задаются. См. Пример 5.
Атрибут frame
Используется только для элемента <TABLE> и позволяет задать вид рамки таблицы: frame=параметр. См. Пример 6.
Существуют следующие стандартные параметры:
frame=void – рамка отсутствует;
frame=above – верхняя сторона рамки;
frame=below – нижняя сторона рамки;
frame=hsides – части рамки сверху и снизу;
frame=vsides – части рамки слева и справа;
frame=lhs – левая часть рамки;
frame=rhs – правая часть рамки;
frame=border – рамка показана полностью;
frame=box – значение повторяет frame=border.
Атрибут rules
Определяет вид сетки таблицы внутри, то есть между ячейками:
rules=none – сетка отсутствует; rules=rows – горизонтальные линии между строками; rules=cols – вертикальные линии между колонками; rules=all – обычная сетка. |
См. Пример 7.
Атрибуты <TR>…</TR>
Используя атрибуты команды <TR>, можно установить те или иные свойства одновременно для всех ячеек строки.
Атрибут |
Значение |
Описание |
align |
left, center, right |
Выравнивание по горизонтали |
valigh |
top (верхний край), middle (центр), bottom (нижний), baseline ( по самой верхней текстовой строку) |
Выравнивание по вертикали |
bgcolor |
цвет |
Цвет фона |
bordercolor |
цвет |
Цвет линий рамки |
bordercolordark |
цвет |
Цвет рамки (снизу и справа) |
bordercolorlight |
цвет |
Цвет рамки (сверху и слева) |