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

Таблицы можно вкладывать друг в друга. В качестве примера рассмотрим код файла table2.htm. Здесь мы в ячейку первой строки второго столбца первой объемлющей таблицы вставили другую таблицу. Для того, чтобы одна таблица четче выделялась на фоне другой, мы задали разные значения параметров цвета фона для этих таблиц. Также мы установили параметр выравнивания второй таблицы по центру и задали ее относительную общую ширину равной 70%, поэтому вложенная таблица занимает не всю ширину удочерившей ее ячейки.

Файл table2.htm:

<html>
<head>
<title>Таблица в таблице</title>
</head>
<body>
<P> Изучаем таблицы. Таблица в таблице.</P>
<table border="1" bgcolor="#eeeeee" width="100%">
<tr>
<td width="30%">Пepвaя таблица. Первая строка, первый столбец.</td>
<td width="70%">Первая таблица. Первая строка второй столбец. В эту ячейку таблицы вложена вторая таблица.
<table border="1" bgcolor="#dddddd" align="center" width="70%">
<tr>
<td width="50%">Bтоpaя таблица. Первая строка, первый столбец. </td>
<td width="50%">Bтopaя таблица. Первая строка, второй столбец. </td>
</tr>
<tr>
<td width="50%">Bтopaя таблица. Вторая строка, первый столбец.</td>
<td width="50%">Bтopaя таблица. Вторая строка, второй столбец
</td>
</tr>
</table></td>
</tr>
<tr>
<td width="30%">Пepвaя таблица. Вторая строка, первый столбец.</td>
<td width="70%">Пepвaя таблица. Вторая строка, второй столбец </td>
</tr>
</table>
</body>
</html>

Результат кода

Пepвaя таблица. Первая строка, первый столбец. Первая таблица. Первая строка второй столбец. В эту ячейку таблицы вложена вторая таблица.
Bтоpaя таблица. Первая строка, первый столбец. Bтopaя таблица. Первая строка, второй столбец.
Bтopaя таблица. Вторая строка, первый столбец. Bтopaя таблица. Вторая строка, второй столбец
Пepвaя таблица. Вторая строка, первый столбец. Пepвaя таблица. Вторая строка, второй столбец

Вложенные таблицы позволяют со значительной степенью гибкости располагать элементы на страничке. Если установить параметр толщины рамки таблицы border равным нулю, то рамки станут невидимы, и пользователь не будет подозревать о том, что страница скомпонована при помощи таблиц.

Cм. Таблицы в примерах.


<<пред. страница

Оглавление

след. страница >>


Hosted by uCoz