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

Особенность вложенных таблиц, в отличие от других способов представле­ния данных в электронном документе, позволяет более точно размещать от­дельные элементы страницы относительно друг друга и относительно гра­ниц самого документа, отображаемого браузером.

Например, два разнородных блока текста и нумерованный список, разме­щенные внутри тега < body>, невозможно разместить на одном уровне, а тем более на одном уровне со смещением в какую-либо сторону. Использование таблиц с легкостью решает эту проблему, позволяя располагать различные элементы и их комбинации в разных местах документа посредством види­мых и невидимых ячеек рядов таблицы.

Вот почему в последнее время преобладающее большинство HTML-докумен­тов создается на основе таблиц, где в качестве несущей основы берется таб­лица с невидимыми краями, содержащая вложенные таблицы с разным оформлением, отличающимися значениями параметров.

Можно выделить следующие преимущества вло­женных таблиц:

§ гибкая масштабируемость структуры электронного документа в целом;

§ широкие возможности позиционирования отдельных элементов стра­ницы;

§ многоуровневое представление разнородных информационных данных;

§ расширенные оформительские возможности;

§ поддержка популярными браузерами.

Правила построения вложенных таблиц ничем не отличаются от создания таблиц одного уровня – используются те же теги и параметры, задаются те же свойства и значения.

Единственное, о чем нельзя забывать в ходе создания сложных вложенных таблиц, это:

§ каждая таблица последующего уровня размещается внутри тега-контейнера < td> или < TH> таблицы предыдущего уровня;

§ вложенная таблица не может быть создана за пределами вышеназванных тегов ячейки таблицы;

§ таблица одного уровня может содержать любое количество вложенных таблиц другого уровня, идущих друг за другом в пределах тега ячейки таблицы верхнего уровня;

§ количество тегов таблиц всех уровней должно соответствовать количеству закрывающих тегов этих же таблиц.

Пример использования многоуровневых вложенных таблиц:

< HTML>

< HEAD>

< TITLE> Пример использования многоуровневых вложенных таблиц< /TITLE >

< /HEAD>

< BODY BGCOLOR=" #FFFFFF" TEXT=" black" LINK=" #00FF00" ALINK=" #00FF00" VLINK=" blue" >

< H2 ALIGN=" center" > ПOCTPOEHHE ВЛОЖЕННЫХ ТАБЛИЦ< /Н2>

<! -- Основная несущая таблица. Начало -->

< TABLE ALIGN=" center" BORDER=" 0" CELLSPACING=" 0" CELLPADDING=" 2" WIDTH=" 100%" >

< TR>

< TD VALIGN=" top" WIDTH=" 50%" >

<! -- Левая таблица с текстом. Начало -->

< TABLE ALIGN=" center" BORDER=" 1" CELLSPACING=" 3" CELLPADDING=" 5" WIDTH=" 100%" >

< TR>

< TH BGCOLOR=" gray" > < FONT COLOR=" white" > Bлoжeнныe таблицы< /FONT> < /ТН>

< /TR>

< TR>

< TD VALIGN=" top" >

< P ALIGN=" justify" >

Одной из замечательных особенностей HTML-таблиц по праву считается поддержка многоуровневой вложенности.

< BR> < BR>

Другими словами, одна таблица может включать другую, та, в свою очередь, еще одну и т.д.

< BR> < BR>

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

< /P>

< /TD>

< /TR>

< /TABLE>

<! -- Левая таблица с текстом. Окончание -->

< /TD>

< TD VALIGN=" top" WIDTH=" 50%" >

<! -- Правая таблица со списком. Начало -->

< TABLE ALIGN=" center" BORDER=" 1" CELLSPACING=" 3" CELLPADDING=" 5" WIDTH=" 100%" >

< TR>

< TH BGCOLOR=" #000000" > < FONT COLOR=" white" > Преимущества вложенных таблиц< /FONT> < /ТН>

< /TR>

< TR>

< TD VALIGN=" top" >

< OL TYPE=" 1" >

< LI> Гибкая масштабируемость структуры электронного документа в целом< BR> < BR>

< LI> Широкие возможности позиционирования отдельных элементов страницы< BR> < BR>

< LI> Многоуровневое представление разнородных информационных данных< BR> < BR>

< LI> Расширенные оформительские возможности< BR> < BR>

< LI> Поддержка популярными браузерами

< /OL>

< /TD>

< /TR>

< /TABLE>

<! -- Правая таблица со списком. Окончание -->

< /TD>

< /TR>

< /TABLE>

<! -- Основная несущая таблица. Окончание -->

< /BODY>

< /HTML>

Задание 2. Наберите данный HTML-код и посмотрите, как браузер отобразит его.