|
•
Работа с текстом •
Графика в HTML •
Работа с цветом •
Работа с таблицами •
HTML таблицы
Какой же дизайнер не любит таблицы!?
Таблицы в HTML организуются как набор столбцов и строк. Ячейки таблицы могут содержать любые HTML-элементы, такие,
как заголовки, списки, абзацы, фигуры, графику, а также элементы форм.
Используя таблицы, можно создавать такие эффекты, как верстка в несколько колонок,
применение эффектов состыковки картинки и фона, тонкие линии на всю ширину или высоту странички и т.д.
Чтобы разобраться в устройстве таблицы, расмотрим простой пример:
< TABLE BORDER="2" WIDTH="200"
BGCOLOR="#00FF00" >
< TR>
< TD>
Ячейка 1< /TD>
< TD>
Ячейка 2< /TD>
< /TR>
< TR>
< TD> Ячейка 3< /TD>
< TD> Ячейка 4< /TD>
< /TR >
< /TABLE>
| Ячейка 1 |
Ячейка 2 |
| Ячейка 3 |
Ячейка 4 |
Примечание: В данном примере создана таблица с фиксированой шириной (WIDTH="200" пикселей),
но лучше использовать проценты, т.к. в этом случае размер таблицы будет изменятся в зависимости от размера окна.
| WIDTH="n" |
Определяет ширину таблицы в пикселях или процентах, по умолчанию ширина таблицы определяется содержимым ячеек. |
| BORDER="n" |
Устанавливает толщину рамки. По умолчанию n=0 - таблица рисуется без рамки. |
| BORDERCOLOR="#FFFFFF" |
Устанавливает цвет окантовки, где #FFFFFF (белый) - шестнадцатиричное значение цвета. |
| BGCOLOR="#FFFFFF" |
Устанавливает цвет фона для всей таблицы, где #FFFFFF - шестнадцатиричное число. |
| BACKGROUND="image.gif" |
Заполняет фон таблицы изображением. |
| CELLSPACING="n" |
Определяет расстояние между рамками ячеек таблицы в пикселях. |
| CELLPADDING="n" |
Определяет расстояние в пикселях между рамкой ячейки и текстом. |
| ALIGN="_" |
Определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения аттрибута: LEFT (слева), CENTER (по центру страницы) и RIGHT (справа).
|
| FRAME="значение" |
Управляет внешней окантовкой таблицы, может принимать следующие значения:
VOID - окантовки нет (значение по умолчанию).
ABOVE - только граница сверху.
BELOW - только граница снизу.
HSIDES - границы сверху и снизу.
VSIDES - только границы слева и справа.
LHS - только левая граница.
RHS - только правая граница.
BOX - рисуются все четыре стороны.
BORDER - также все четыре стороны.
|
| RULES="n" |
Управляет линиями, разделяющими ячейки таблицы. Возможные значения (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="#FFFFFF" |
Устанавливает цвет фона строки или ячейки. |
| BACKGROUND="image.gif" |
Заполняет фон строки или ячейки изображением. |
Следующие атрибуты могут применятся только для ячейек.
| WIDTH="n" |
Определяет ширину ячейки в n пикселях. |
| HEIGHT="n" |
Определяет высоту ячейки в n пикселях. |
| COLSPAN="n" |
Растягивание ячейки по горизонтали. Например, < TD COLSPAN="2" > означает, что ячейка будет растянута на 2 колонки. |
| ROWSPAN="n" |
Растягивание ячейки по строке. Например, < TD ROWSPAN="2" > означает, что ячейка будет растянута на две строки таблицы. |
| NOWRAP |
Присутствие этого аттрибута показывает, что текст должен размещаться в одну строку |
| BACKGROUND="image.gif" |
Заполняет фон ячейки изображением. |
•
Работа с текстом •
Графика в HTML •
Работа с цветом •
Работа с таблицами •
|
|
