Онлайн учебники на TEPKA.ru

Учебник по HTML 4

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

Отдельные ячейки HTML таблицы могут содержать практически любые теги языка и данные, разрешенные в разделе <BODY> документа. В том числе, внутри ячейки таблицы может быть целиком размещена другая таблица. Такие таблицы называются вложенными. Правила их построения не отличаются от построения таблиц и не нуждаются в отдельном описании. Отметим лишь, что не все браузеры, поддерживающие таблицы, правильно отражают сложные HTML таблицы с несколькими уровнями вложенности, поэтому их использование требует осторожности.

Приведем пример HTML таблицы, использующей один уровень вложенности.

<HTML>

<HEAD>

<TITLE>Города Ленинградской области</TITLE>

</HEAD>

<BODY>

<CAPTION><H2>Города Ленинградской области</H2>

H — население города (тыс.жит.,1992 г.)   

P — расстояние от Санкт-Петербурга (км)</CAPTION>

<CAPTION><STRONG>Города, подчиненные Санкт-Петербургу</STRONG></CAPTION>

<TR><TH>Город</TH><TH>H</TH><TH>P</TH></TR>

<TR><TD>Зeлeнoгopcк </TD><TD ALIGN=RIGHT> 13.6</TD><TD ALIGN=RIGHT>

50</TD></TR>

<TR><TD>Koлпинo </TD><TD ALIGN=RIGHT>144.6</TD><TD ALIGN=RIGHT>

26</TD></TR>

<TR><TD>Кронштадт </TD><TD ALIGN=RIGHT> 45.2</TD><TD ALIGN=RIGHT>

48</TD></TR>

<TR><TD>Ломоносов </TD><TD ALIGN=RIGHT> 42.0</TD><TD ALIGN=RIGHT>

40</TD></TR>

<TR><TD>Пaвлoвcк </TD><TD ALIGN=RIGHT> 25.4</TD><TD ALIGN=RIGHT>

30</TD></TR>

<TR><TD>Петродворец </TD><TD ALIGN=RIGHT> 83.8</TD><TD ALIGN=RIGHT>

29</TD></TR>

<TR><TD>Пушкин </TD><TD ALIGN=RIGHT> 95.1</TD><TD ALIGN=RIGHT>

24</TD></TR>

<TR><TD>Сестрорецк </TD><TD ALIGN=RIGHT> 34.9</TD><TD ALIGN=RIGHT>

35</TD></TR>

</TABLE>

<P>

Все города, подчиненные<BR>администрации<BR>Санкт-Петербурга, имеют <BR>прямые гopoдcкиe<BR>тeлeфoнныe номера.

</CENTER>

</TD>

<CAPTION><STRONG>Города областного подчинения</CAPTION>

<TR><TH>Город</TH><TH>H</TH><TH>P</TH></TR>

<TR><TD>Бокситогорск </TD><TD ALIGN=RIGHT> 21.6</TD><TD

ALIGN=RIGHT>245</TD></TR>

<TR><TD>Boлxoв </TD><TD ALIGN=RIGHT> 50.3</TD><TD

ALIGN=RIGHT>122</TD></TR>

<TR><TD>Bceвoлoжcк </TD><TD ALIGN=RIGHT> 32.9</TD><TD ALIGN=RIGHT>

24</TD></TR>

<TR><TD>Выборг </TD><TD ALIGN=RIGHT> 80.9</TD>

<TR><TD>Высоцк </TD><TD ALIGN=RIGHT> 1.0</TD><TD

ALIGN=RIGHT>159</TD></TR>

<TR><TD>Гатчина </TD><TD ALIGN=RIGHT> 80.9</TD>

<TR><TD>Ивангород </TD><TD ALIGN=RIGHT> 11.9</TD><TD

ALIGN=RIGHT>147</TD></TR>

<TR><TD>Каменногорск </TD><TD ALIGN=RIGHT> 5.9</TD>

<TR><TD>Кингисепп </TD><TD ALIGN=RIGHT> 51.5</TD><TD

ALIGN=RIGHT>138</TD></TR>

<TR><TD>Кириши </TD><TD ALIGN=RIGHT> 53.8</TD><TD

ALIGN=RIGHT>115</TD></TR>

<TR><TD>Кировск </TD><TD ALIGN=RIGHT> 23.8</TD><TD ALIGN=RIGHT>

55</TD></TR>

<TR><TD>Лодейное Поле</TD><TD ALIGN=RIGHT> 27.3</TD><TD

ALIGN=RIGHT>244</TD></TR>

</TABLE>

</TD>

<CAPTION><STRONG> (продолжение таблицы) </CAPTION>

<TR><TH>Город</TH><TH>H</TH><TH>P</TH></TR>

<TR><TD>Любань </TD><TD ALIGN=RIGHT> 4.7</TD><TD ALIGN=RIGHT>

85</TD></TR>

<TR><TD>Новая Ладога </TD><TD ALIGN=RIGHT> 11.2</TD><TD

ALIGN=RIGHT>141</TD></TR>

<TR><TD>Отрадное </TD><TD ALIGN=RIGHT> 22. 9</TD><TD

ALIGN=RIGHT>40</TD></TR>

<TR><TD>Пикалево </TD><TD ALIGN=RIGHT> 25.1</TD><TD

ALIGN=RIGHT>246</TD></TR>

<TR><TD>Пoдпopoжьe </TD><TD ALIGN=RIGHT> 23.1</TD><TD ALIGN=RIGHT>285</TD></TR>

<TR><TD>Приморск </TD><TD ALIGN=RIGHT> 6.7</TD><TD ALIGN=RIGHT>137</TD></TR>

<TR><TD>Приозерск </TD><TD ALIGN=RIGHT> 20.5</TD><TD

ALIGN=RIGHT>145</TD></TR>

<TR><TD>Светогорск </TD><TD ALIGN=RIGHT> 15.8</TD><TD

ALIGN=RIGHT>201</TD></TR>

<TR><TD>Сланцы </TD><TD ALIGN=RIGHT> 42.6</TD><TD

ALIGN=RIGHT>192</TD></TR>

<TR><TD>Сосновый Бор </TD><TD ALIGN=RIGHT> 57.6</TD><TD ALIGN=RIGHT>

81</TD></TR>

<TR><TD>Тихвин </TD><TD ALIGN=RIGHT> 72.0</TD><TD

ALIGN=RIGHT>200</TD></TR>

<TR><TD>Тосно </TD><TD ALIGN=RIGHT> 33.8</TD><TD ALIGN=RIGHT>

53</TD></TR>

<TR><TD>Шлиcceльбypг </TD><TD ALIGN=RIGHT> 12.5</TD><TD ALIGN=RIGHT>

64</TD></TR>

</TABLE>

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Пример вложенных HTML таблиц

Рис. 4.14. Пример вложенных HTML таблиц

Результат отображения данного примера показан на рис. 4.14.

На первый взгляд кажется, что в примере нет вложенности таблиц. На самом деле весь документ представляет собой таблицу, не имеющую рамок и состоящую из заголовка и всего одной строки, содержащей пять ячеек. Организация такой таблицы служит единственной цели — расположению данных на странице. Внутри первой ячейки располагается другая таблица, имеющая свой заголовок и состоящая из трех столбцов, после которой идет текст, выровненный посередине. Третья и пятая ячейки также содержат отдельные таблицы. Вторая и четвертая ячейки — пустые, они не содержат никаких данных и имеют единственный параметр WIDTH, определяющий ее ширину. Их назначение — задать отступ между первой и третьей, а также третьей и пятой ячейками, в которых располагаются таблицы. Это один из возможных вариантов задания такого отступа. Другой вариант — использование параметра CELLSPACING, определяющего расстояние между ячейками, однако этот параметр задает отступы одновременно и по горизонтали, и по вертикали, что в данный момент не требуется. Кроме того, пустая ячейка с заданной шириной при сужении области просмотра будет сокращаться в отличие от пространства, заданного параметром CELLSPACING (равно как и CELLPADDING). Попробуйте на данном примере уменьшать ширину области просмотра в браузере или, что приведет к тем же результатам, увеличивать размеры шрифта, которым отображается текст. Расстояние между таблицами сократится до нуля, давая возможность видеть одновременно всю информацию как можно дольше, однако дальнейшее изменение не приведет к порче таблицы, а предоставит возможность горизонтальной прокрутки. По аналогичной схеме можно организовать размещение информации, состоящей не только из таблиц, но и изображений, фрагментов текста и т. д.