Создание таблиц.

Описание таблиц в HTML-документах осуществляется с помощью контейнера <TABLE>...</TABLE>. Таблица задается двумя контейнерами тегов: <TR>...</TR> - описание строки таблицы и <TD>...</TD> - описание ячейки таблицы.

По умолчанию текст внутри таблицы выравнивается по левому краю, а ширина столбца таблицы определяется наиболее длинным элементом в этом столбце.

Пример 13: Создание таблицы.

<HTML> <HEAD>

<ТIТLЕ>Таблица</ТIТLЕ> </HEAD>

<BODY>

<TABLE border="2"> <!— Начало таблицы —>

<TR>

<TD colspan=2 align=center> <В>Заголовок Таблицы.</В> </TD> </TR>

<TR>

Первая ячейка первой строки. </TD>

Вторая ячейка первой строки. </TD> </TR>

<TR>

<TD align="center">

Первая ячейка второй строки. </TD>

Вторая ячейка второй строки.
</TD>
</TR>
</TABLE> <!— конец таблицы —>

</BODY>

</HTML>

Ширина таблицы задается атрибутом width="..." для тега <TABLE>, а значение ширины таблицы может задаваться

в пикселях или в процентах от ширины экрана. Содержимое каждой ячейки может быть выровнено с помощью атрибутов align="..."

(горизонтальное положение) и valign="..." (вертикальное положение) для тегов <TR> или <TD>.

Атрибут valign="..." может принимать следующие значения: top - прижать вверх,

bottom - прижать вниз и middle - разместить по центру, а атрибут align="..." принимает

следующие значения: left - прижать влево, right - прижать вправо и center –

разместить по центру.

Атрибуты cellpadding="..." и cellspacing="..." определяют, соответственно, расстояние в пикселях между границей ячейки и ее содержимым, а также и между ячейками.

Допускается добавлять к таблице, к строке или столбцу заголовок. Тег <CAPTION>, который располагается после тега <TABLE>, задает заголовок к таблице, центрируемый по умолчанию относительно таблицы. При помощи атрибутов align="..." или valign="..." заголовок можно разместить вверху (top) или внизу (bottom) и в левом (left) или правом (right) углу таблицы. Задание заголовка для строки или столбца таблицы осуществляется при помощи тега <ТН> после тегов <TR> или <TD> соответственно.

Атрибут border="..." тега <TABLE> рисует рамку вокруг таблицы и каждой ячейки, при этом ширина рамки задается в пикселях. Следует иметь в виду, что атрибуты colspan="..." и rowspan="..." тегов <TD> и <TR> позволяют объединять ячейки таблицы в группы, вокруг которых рисуется рамка.

Рассмотрим пример таблицы, занимающей по ширине весь экран браузера:

Пример 14: Сложная таблица.

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

<TD width="66%" colspan="2">

<P align="center">двe ячейки,

объединенные по горизонтали

</TD> </TR>

<TR>

<TD width="33%" rowspan="2"

valign="middle">двe ячейки,

объединенные по вертикали </TD>

<TD width="33%">no левому краю </TD> </TR>

<TR>

<TD width="33%">

<P align="right">по правому краю </TD> </TR>

</TABLE>

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

Задать вопрос.