Создание красивых и функциональных Web-страниц требует точного позиционирования текста и рисунков. Для этих целей широко используются таблицы. В ячейках таблицы легко размещаются и текст, и графика.
Код таблицы в HTML содержится в контейнере <TABLE> </TABLE>. Между ними последовательно описывается каждая строка таблицы, заключаемая в теги <TR> и </TR>, а уже внутри каждой строки описываются ячейки столбцов, причем столбцы всегда должны находиться в обрамлении тегов <TD> и </TD>.
Заголовки столбцов и строк в таблицах размещаются при помощи тегов <TH> и </TH>. Название таблицы заключается между тегами <CAPTION> и </CAPTION>. По умолчанию заголовок располагается над таблицей. С помощью параметра ALIGN и атрибутов BOTTOM, TOP,LEFT и RIGHT можно задать другое положение заголовка таблицы.
Иногда одну ячейку надо растянуть на несколько столбцов или несколько строк. Например: <TD COLSPAN=3> - ячейка растягивается на три столбца; <TD ROWSPAN=2> - ячейка растягивается на две строки.
Рассмотрим пример.
<TABLE BORDER=3 WIDTH=”70%” ALIGN=CENTER>
<CAPTION ALIGN=BOTTOM>Подпись к таблице</CAPTION>
<TR>
<TH ALIGN=CENTER ROWSPAN=2>Фамилия, и., о.</TH>
<TH ALIGN=CENTER COLSPAN=2>Оценки</TH>
</TR>
<TR>
<TH ALIGN=CENTER>Физика</TH>
<TH ALIGN=CENTER>Химия</TH>
</TR>
<TR>
<TD ALIGN=LEFT>Иванов А.И.</TD>
<TD ALIGN=RIGHT>5</TD>
<TD ALIGN=RIGHT>5</TD>
</TR>
<TR>
<TD ALIGN=LEFT>Петров С.Б.</TD>
<TD ALIGN= RIGHT>4</TD>
<TD ALIGN= RIGHT>5</TD>
</TR>
<TR>
<TD ALIGN=LEFT>Сидоров В.В.</TD>
<TD ALIGN=RIGHT>3</TD>
<TD ALIGN= RIGHT>4</TD>
</TR>
</TABLE>
В этом листинге в первой строке BORDER=3 назначает толщину границы таблицы в 3 пиксела; WIDTH=”70%” определяет ширину таблицы в 70% от ширины экрана; ALIGN=CENTER центрирует таблицу. Между тегами <TH> и </TH> размещают заголовки строк и столбцов. Таблица, созданная в соответствии с приведенным листингом, приведена на рис. 7.
Рис. 7. Окно браузера с результатами просмотра файла с таблицей
У тегов <TABLE>, <TR>, <TD>, <TH> есть общие параметры. Параметр BORDERCOLOR задает цвет границы объекта; параметры BORDERCOLORDARK и BORDERCOLORLIGHT задают темный и светлый цвета для трехмерного изображения рамки вокруг объекта. В параметре BACKGROUND указывается имя графического файла, который будет служить фоном для таблицы. Если файл не используется, то параметром BGCOLOR можно задать цвет фона объекта.
Фреймы
Фреймовая структура сайта подразумевает, что каждая страница состоит из отдельных областей, в каждой из которых отображается один HTML-файл. Тогда главный HTML-документ будет содержать только определения фреймов, а все наполнение фреймов будет расположено в других файлах.
При создании документа с фреймовой структурой в главном HTML-файле нет нужды употреблять тег <BODY>. Вместо него используются теги <FRAMESET> и </FRAMESET>. Между ними вставляются теги <FRAME>, которые определяют содержимое каждого отдельного фрейма.
Положение фреймов указывается в теге <FRAMESET> с помощью параметров. Если фреймы расположены в виде таблицы, то используются параметры COLS и ROWS, задающие размеры колонок и строк. Ширина и высота каждого фрейма задается либо в пикселах, либо в процентах от размера окна браузера. Например: <FRAMESET ROWS=”110,*”>. Здесь установлены фреймы в виде строк, высота верхнего фрейма – 110 пикселов, а нижнего – все свободное место окна браузера. В случае <FRAMESET COLS=”20%,60%,*”> фреймы расположены вертикально в виде трех колонок, ширина левого фрейма – 20% от окна браузера, ширина среднего фрейма – 60%, ширина правого фрейма – оставшееся пространство окна браузера.
В теге <FRAMESET> используются параметры FRAMEBORDER и FRAMESPACING. Если значение первого из них равно единице, то каждый фрейм будет иметь трехмерную рамку, а если нулю, то рамки не будет. Второй параметр указывает расстояние между соседними фреймами в пикселах.
Параметр FRAMEBORDER применяется и в теге <FRAME>. Делается это в случае, когда наличие рамки необходимо указывать для отдельных фреймов. В теге <FRAME> могут быть использованы параметры MARGINHEIGHT и MARGINWIDTH для задания отступа по вертикали и горизонтали от границ фрейма в пикселах.
Еще один параметр тега <FRAME> - NORESIZE. Если он указан при определении фрейма, то пользователь не сможет изменять границы фрейма. Параметр SCROLLING задает, нужно или нет создавать полосы прокрутки для просмотра содержимого фрейма. Значение YES заставляет отображать полосы прокрутки в каждом случае, значение NO не позволяет их отображать, а значение AUTO создает их только в случае необходимости.
Наконец, параметр SRC тега <FRAME> указывает на HTML-файл с содержимым данного фрейма. Например:
<FRAMESET COLS=”20%,*” FRAMEBORDER=1>
<FRAME SCROLLING=AUTO SRC=”1.html”>
<FRAME SCROLLING=AUTO SRC=”2.html”>
</FRAMESET>
Здесь заданы два фрейма шириной 20% и 80% от ширины окна браузера. В левом окне будет помещен файл 1.html, в правом – файл 2.html.
