Б. 1.5. Таблицы

Для создания таблиц используются теги TABLE, TR и TD. Рассмотрим создание простой таблицы.

<TABLE border="1" bordercolor="blue" width="100%">

<TR>

<ТD>Фамилия</ТD><ТD>Адрес</ТD><ТD>Телефон</ТD>

</TR>

<TR>

<ТD>Иванов И.  П.</ТD><ТD>Пушкина 6</TD><TD>111-11-11</TD>

</TR>

<TR>

<ТD>Петров В.  n.</TD><TD>Eropoвa 9</TD><TD>111-22-22</TD>

</TR>

</TABLE>

В браузере эта таблица будет выглядеть так, как показано на рис. Б.6.

Тег TABLE создает таблицу. Все остальные элементы должны быть вложены в этот тег. Под остальными подразумеваются теги TR, TD и ТН (заголовок таблицы). В тег TABLE можно вложить еще одну таблицу, т.е. еще один тег TABLE. В него, в свою очередь, еще один и т.д.

Тег TABLE имеет много атрибутов, поэтому начнем по порядку. Атрибут align используется для выравнивания таблицы. Может принимать три значения:

■             left — выравнивание по левому краю;

■             right — выравнивание по правому краю;

■             center — выравнивание по центру.

Рис. Б.6. Простая таблица

Атрибут background определяет рисунок заднего фона. Например, background="1.gif". А атрибут bgcolor определяет цвет заднего плана.

Атрибуты border и bordercolor управляют рамкой таблицы. Первый задает ширину рамки таблицы в пикселях, а второй изменяет ее цвет.

Параметры cellspacing и cellpadding управляют отображением ячеек. Первый задает расстояние между ячейками таблицы, а второй — между содержимым ячейки и ее рамкой.

За отображение самих рамок "отвечает" атрибут rules. Он может принимать значения, приведенные в табл. Б.4.

Таблица Б.4. Значения атрибута rules

АLL        Будут видны все рамки

Cols       Будут показаны только вертикальные рамки

Rows     Будут показаны только горизонтальные рамки

None     Рамки не отображаются

Groups   Будут показаны горизонтальные рамки, отделяющие группы

THEAD, TBODY И TFOOT

Атрибут title, как обычно, задает текст для всплывающей подсказки. А с помощью атрибута width можно установить ширину таблицы в пикселях или в процентах. В нашем примере мы растянули таблицу на все окно браузера, установив ширину равной 100%.

Тег TR отмечает начало нового рядка таблицы, а тег TD используется для создания нового столбца (ячейки). Данные теги требуют закрывающего тега. Из всех атрибутов данных тегов вам пригодятся только следующие атрибуты тега TD:

■             bgcolor — цвет фона ячейки;

■             colspan и rowspan — число объединяемых ячеек по горизонтали и вертикали соответственно.

Предположим, что нам нужно создать сложную таблицу, например, изображенную на рис. Б.7.

Рис. Б. 7. Сложная таблица

Обратите внимание на то, что мы объединили две ячейки вертикально (Доходы тыс. руб./мес) и целых пять ячеек — по горизонтали (Год). Должного эффекта нам помогли достичь атрибуты rowspan и colspan. Вот листинг этой таблицы:

<TABLE border="1" width="100%">

<TR>

<TD rowspan=2>Доход,   тыс.  руб./мес.  </TD><TD colspan=5>Год</TD>

</TR>

<TR>

<td>1997</td><td>1998</td><td>1999</td><td>2000</td><td>2001</td>

</TR>

<TR>

<TD>Янваpь</TD><TD>200,34</TD><TD>195,45</TD><TD>234,11</TD>

<TD>189,31</TD><TD>121, 98</TD>

</TR>

<TR>

<ТD>Февраль</ТD><ТD>211,34</TD><TD>205,45</TD><TD>210,11</TD>

<TD>193,31</TD><TD>145, 98</TD>

</TR>

</TABLE>