HTML

Таблицы

Простейшая таблица

Таблицы на Web-страницах используются не только для представления табличного материала, но и для того, чтобы выровнять текст и рисунки. Например, с помощью таблиц (без рамки) можно расположить текст и рисунки в несколько колонок.

Ниже приведен код простейшей таблицы

<BODY>
<TABLE BORDER="1">
<TR>
   <TD>Таблица из одной строки</TD>
   <TD>из трех столбцов</TD>
   <TD>без указания ширины таблицы и ячеек.</TD>
</TR>
</TABLE>
</BODY>

и вид окна браузера

Таблица начинается тэгом <TABLE> (от английского table — таблица) и заканчивается парным ему тэгом </TABLE>. Параметр BORDER тэга <TABLE> обозначает ширину рамки таблицы.

Содержимое таблицы описывается по строкам сверху вниз (начиная с верхней строки). Каждая строка начинается тэгом <TR> (от английского table row — строка таблицы) и заканчивается парным ему тэгом </TR>.

Ячейки в строке описываются слева направо. Каждая ячейка начинается тэгом <TD> (от английского table data — данные таблицы) и заканчивается парным ему тэгом </TD>. В ячейку можно помещать все, что угодно, в том числе текст, рисунки и даже другие таблицы (вложенные таблицы).

Отступы

Тэг <TABLE> позволяет задать два вида отступов:

CELLSPACING — расстояние между границами соседних ячейками
CELLPADDING — расстояние между границами ячейки и ее содержимом

Например:

Размеры

Каждый из тэгов <TABLE>, <TR> и <TD> имеет параметры, задающие размеры в пикселях или в процентах от общей высоты или ширины. По умолчанию каждой ячейке отводится минимальное место, необходимое для размещения всей информации.

Параметры WIDTH и HEIGHT тэга <TABLE> обозначают общую ширину и высоту таблицы. Например таблица:

должна занимать 50 процентов ширины окна браузера и иметь высоту 300 пикселов. Однако если вся нужная информация не поместится в эту область, таблица будет расширена (чаще всего увеличивается ее высота).

Параметр HEIGHT тэга <TR> задает высоту строки таблицы в пикселах или в процентах от общей высоты таблицы. Например строка:

должна иметь высоту 30 пикселов. Однако если вся нужная информация не поместится в эту область, ее высота будет увеличена.

Параметры WIDTH и HEIGHT тэга <TD> обозначают ширину и высоту ячейки таблицы. Например ячейка:

должна иметь ширину 50 и высоту 30 пикселов. Однако если вся нужная информация не поместится в эту область или эти размеры не стыкуются с другими, эти команды не выполняются.

Выравнивание

Для строки или для отдельной ячейки можно задать два параметра, которые обеспечивают выравнивание информации в ячейках по горизонтали (параметр ALIGN) и по вертикали (VALIGN). Параметр ALIGN может принимать значения

left — по левой границе
right — по правой границе
center — по центру

Параметр VALIGN может принимать значения

top — по верхней границе
bottom — по нижней границе
middle — по середиен

Например:

<TR ALIGN="center" VALIGN="top">
   <TD>По центру, по верхней границе</TD>
   <TD ALIGN="right" VALIGN="middle">По правой границе,
       по середине</TD>
</TR>

Фон и текст

Для того, чтобы задать фон таблицы, строки или даже отдельной ячейки, тэги <TABLE>, <TR> и <TD> имеют параметры

BGCOLOR - задает цвет фона в виде названия или шестнадцатеричного кода (см. раздел Цвета)
BACKGROUND - задает фон-рисунок, можно указать имя файла, путь к нему или URL (см. раздел Рисунки)

Для того, чтобы изменить цвет текста в ячейке, используют тэг <FONT> (см. раздел Текст). Например, код

<TABLE BORDER="1" BGCOLOR="green">
<TR HEIGHT="30" BGCOLOR="blue">
    <TD><FONT COLOR="white">Привет!</FONT></TD>
    <TD BGCOLOR="red"></TD>
</TR>
<TR>
    <TD BACKGROUND="web.jpg">Таблица из двух строк</TD>
    <TD>и двух столбцов</TD>
</TR>
</TABLE>

дает такую таблицу:

Объединение ячеек

Соседние ячейки внутри одной строки или столбца можно объединять. Тэг <TD> имеет параметры COLSPAN (от английского column span — охват столбцов) и ROWSPAN (от английского row span — охват строк), которые показывают, сколько столбцов и строк объединяет ячейка. Первый пример показывает объединение столбцов одной строки

<TABLE BORDER="1">
<TR>
   <TD COLSPAN="3">Привет!</TD>
</TR>
<TR>
   <TD>Вася,</TD>
   <TD>Петя,</TD>
   <TD>Маша!</TD>
</TR>
</TABLE>

Во втором примере объединяются строки одного столбца:

<TABLE BORDER="1">
<TR>
   <TD ROWSPAN="3">Привет!</TD>
   <TD>Вася,</TD>
</TR>
<TR>
   <TD>Петя,</TD>
</TR>
<TR>
   <TD>Маша!</TD>
</TR>
</TABLE>

Вложенные таблицы

В ячейки таблицы можно вставлять другие (вложенные) таблицы. Например, чтобы разместить две таблицы рядом, используют трюк, при котором они «вкладываются» в ячейки другой таблицы со скрытой рамкой. Так код

дает изображение

Внешняя таблица имеет одну строку и два столбца, ее рамка скрыта.

Следующий раздел описывает сложные структуры — фреймы.