Как создать таблицу на html
Как вы уже знаете используя таблицы, можно создавать такие эффекты, как верстка в несколько
колонок, применение эффектов состыковки картинки и фона, тонкие линии на всю
ширину или высоту странички и т.д.
Давайте посмотрим как разобраться в
устройстветаблицы, рассмотрим простой пример:
|
Ячейка 1 |
Ячейка 2 |
|
Ячейка 3 |
Ячейка 4 |
Примечание: В данном примере создана таблицас
фиксированой шириной (WIDTH="200" пикселей), но лучше использовать
проценты, т.к. в этом случае размер таблицы будет изменятся в
зависимости от размера окна. |
Такая таблица реализуется следующим
кодом:
<TABLE BORDER="2" WIDTH="200"
BGCOLOR="#00FF00">
<TR>
<TD>Ячейка 1</TD>
<TD>Ячейка 2</TD>
</TR>
<TR>
<TD>Ячейка 3</TD>
<TD>Ячейка 4</TD>
</TR>
</TABLE> |
Таблица начинается открывающимся тегом <TABLE> и завершается
закрывающимся </TABLE>.
Тег <TABLE> может включать следующие аттрибуты:
|
WIDTH="n" |
Определяет ширину таблицы в пикселях или
процентах, по умолчанию ширина таблицы определяется содержимым
ячеек. |
|
BORDER="n" |
Устанавливает толщину рамки. По
умолчанию n=0 - таблица рисуется без рамки. |
|
BORDERCOLOR="#FFFFFF"
|
Устанавливает цвет окантовки, где #FFFFFF (белый)
- шестнадцатиричное значение цвета. |
|
BGCOLOR="#FFFFFF" |
Устанавливает цвет фона для всей таблицы, где
#FFFFFF - шестнадцатиричное число. |
|
BACKGROUND="image.gif" |
Заполняет фон таблицы изображением. |
|
CELLSPACING="n" |
Определяет расстояние между рамками ячеек таблицы
в пикселях. |
|
CELLPADDING="n" |
Определяет расстояние в пикселях между рамкой
ячейки и текстом. |
|
ALIGN=LEFT |
Определяет расположение таблицы в
документе. По умолчанию таблица прижата к левому краю страницы.
Допустимые значения аттрибута: 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 |
Устанавливает горизонтальное выравнивание текста
в ячейках строки. Может принимать значение LEFT (выравнивание
влево), CENTER (выравнивание по центру) и RIGHT (вправо). |
|
VALIGN=CENTER |
Устанавливает вертикальное
выравнивание текста в ячейках строки. Допустимые значения: 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"
|
Заполняет фон ячейки изображением. |
| 
