Таблицы очень часто используют для позиционирования различных элементов на Web-странице.
Описание таблиц в HTML-документах осуществляется
с помощью контейнера <TABLE>...</TABLE>. Таблица задается двумя
контейнерами тегов:
<TR>...</TR> - описание строки таблицы и
<TD>...</TD> - описание ячейки таблицы.
По умолчанию текст внутри таблицы выравнивается по левому краю, а ширина столбца таблицы определяется наиболее длинным элементом в этом столбце.
Рассмотрим пример простейшей таблицы:
<HTML>
<HEAD>
<TITLE>Таблица</TITLE>
</HEAD>
<BODY>
<TABLE border="2"> <!-- Начало таблицы -->
<TR>
<TD colspan=2 align=center>
<B>Заголовок Таблицы.</В>
</TD>
</TR>
<TR>
<TD align="center">
Первая ячейка первой строки.
</TD>
<TD align="center">
Вторая ячейка первой строки.
</TD>
</TR>
<TR>
<td align="center">
Первая ячейка второй строки.
</TD>
<TD align="center">
Вторая ячейка второй строки.
</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) углу таблицы. Задание заголовка для строки или столбца таблицы осуществляется при помощи тега <TH> после тегов <TR> или <TD> соответственно.
Атрибут border="..." тега <TABLE> рисует рамку вокруг таблицы и каждой ячейки, при этом ширина рамки задается в пикселях. Следует иметь в виду, что атрибуты colspan="..." и rowspan="..." тегов <TD> и <TR> позволяют объединять ячейки таблицы в группы, вокруг которых рисуется рамка.
Рассмотрим пример таблицы, занимающей по ширине весь экран броузера:
<TABLE border="l" width="100%">
<CAPTION>Пример таблицы</CAPTION>
<TR>
<TD width="66%" colspan="2">
<P align="center">
Две ячейки, объединенные по горизонтали
</TD>
</TR>
<TR>
<TD width="33%" rowspan="2" valign="middle">
Две ячейки, объединенные по вертикали
</TD>
<TD width="33%">
no левому краю
</TD>
</TR>
<TR>
<TD width="33%">
<P align="right">
no правому краю
</TD>
</TR>
</TABLE>
В окне броузера страница с приведенным выше кодом будет выглядеть следующим образом.
Рассмотрим теперь вставку графических изображений.