Основные принципы работы с таблицами. Вложенные таблицы. Что такое фреймы. Горизонтальные и вертикальные фреймы.
Один из основных недостатков классического HTML — отсутствие возможности абсолютного позиционирования элементов Web-страницы, т. е. вы не можете расположить что-либо в точно указанном вами месте страницы. Вместо этого HTML предлагает относительное позиционирование, при котором расположение элемента описывается только относительно другого элемента, предшествующего ему.
Например, вы не можете расположить рисунок не по центру страницы и поместить под него подпись, точно позиционированную относительно центра рисунка.
Сделать это можно, только выровняв и рисунок и подпись относительно центра страницы, используя тег <CENTER> .
В то же время решение этой проблемы существует, и причем целых два варианта. Один из них – разместить элементы страницы с использованием CSS (Cascading Style Sheets) – нового стандартного языка расширения HTML, который в ближайшем будущем в корне изменит приемы создания Web-страниц, сделает их более привлекательными и упростит разработку.
Второй, классический вариант решения этой проблемы заключается в применении таблиц для позиционирования элементов страницы. Это не слишком просто, но это единственный универсальный путь. Именно так в настоящее время и устроено большинство сложных Web-страниц.
Суть метода заключается в следующем: на страничке создается таблица с невидимыми границами ячеек, и элементы, требующие точного позиционирования, располагаются в ячейках таблицы. Для каждой из ячеек вы можете указать собственные параметры форматирования, соответственно команды форматирования действуют только в пределах ячейки.
Создав на странице однострочную таблицу, состоящую из трех ячеек, и расположив в левой ячейке, внутри тега <CENTER> </CENTER>, наш рисунок и подпись к нему, мы получим искомый вариант.
Теги, применяющиеся для создания таблиц.
В HTML любая таблица состоит из строк, разделенных на ячейки. Минимальное их количество – одна строка, содержащая одну ячейку. Максимальное количество не ограничено.
Каждая строка и ячейка описываются отдельными тегами. Все теги, применяющиеся для описания таблиц, требуют ограничения действия, т. е. закрытия. Структура HTML-таблицы выглядит так:
<ОПИСАНИЕ ТАБЛИЦЫ> <ОПИСАНИЕ СТРОКИ> <ОПИСАНИЕ ЯЧЕЙКИ> содержание </ОПИСАНИЕ ЯЧЕЙКИ> <ОПИСАНИЕ ЯЧЕЙКИ> содержание </ОПИСАНИЕ ЯЧЕЙКИ> <ОПИСАНИЕ ЯЧЕЙКИ> содержание </ОПИСАНИЕ ЯЧЕЙКИ> </ОПИСАНИЕ СТРОКИ> </ОПИСАНИЕ ТАБЛИЦЫ> |
<TABLE> </TABLE> — главный тег, применяющийся для описания начала и конца таблицы, а также параметров отображения таблицы, таких, как ее размеры, оформление границ ячеек и т. п.
<TR> </TR> - тег, описывающий начало и конец строки таблицы.
<TD> </TD> - тег, описывающий начало и конец ячейки.
Каждый из этих тегов имеет набор параметров, служащих для управления отображением таблицы, установки размеров, выравнивания и т. д.
Каждая таблица и ячейки, составляющие ее, имеют такие свойства, как ширина и высота, выравнивание по ширине и высоте, толщина границы, цвет фона. Эти свойства присваиваются элементам таблицы с помощью параметров WIDTH, HEIGHT, ALIGN, VALIGN, BORDER, BGCOLOR, BACKGROUND, CELLSPACING, CELLPADDING, COLSPAN и ROWSPAN.
Параметр WIDTH управляет шириной таблицы и ячейки. В случае, если этот параметр не указан, ширина таблицы/ячейки будет зависеть от ширины ее содержимого. Ширина может указываться в процентах относительно ширины окна (для ячейки – относительно ширины таблицы) или в пикселях.
HEIGHT – то же самое, но для управления высотой таблицы.
Пример 1:
<TABLE> <TR> <TD>Таблица из одной строки</TD> <TD>из трех столбцов</TD> <TD>без указания ширины таблицы и ячеек.</TD> </TR> </TABLE> |
Таблица из одной строки |
из трех столбцов |
без указания ширины таблицы и ячеек. |
Пример 2:
<TABLE BORDER WIDTH=100%> <TR> <TD>Таблица из одной строки</TD> <TD>и трех столбцов</TD> <TD>c указанием ширины таблицы, равной 100% ширины окна броузера.</TD> </TR> </TABLE> |
Таблица из одной строки |
и трех столбцов |
c указанием ширины таблицы, равной 100% ширины окна броузера. |
Пример 3:
<TABLE BORDER> <TR> <TD WIDTH=75> Ячейка с указанием ширины в 75 пикселей</TD> <TD WIDTH=100> Ячейка с указанием ширины в 100 пикселей</TD> <TD WIDTH=150> Ячейка с указанием ширины в 150 пикселей</TD> </TR> </TABLE>
|
|
||
Ячейка с указанием ширины в 75 пикселей |
Ячейка с указанием ширины в 100 пикселей |
Ячейка с указанием ширины в 150 пикселей |
|
Для управления размещением таблицы на Web-странице и для форматирования данных внутри таблицы служат параметры ALIGN и VALIGN.
Параметр ALIGN может иметь значения LEFT, RIGHT и CENTER.
VALIGN может принимать значения TOP, MIDDLE и BOTTOM.
При отсутствии этих параметров таблица всегда будет выравниваться относительно левого края страницы, а содержимое ячеек – по горизонтали относительно левого края ячейки и по вертикали относительно ее центра. При употреблении в теге <TABLE> параметр ALIGN управляет выравниванием таблицы относительно окна броузера, а при употреблении в тегах <TD> и <TR> — выравниванием содержимого относительно границ ячейки.
Параметр VALIGN применяется только внутри тегов <TR> и <TD>. При употреблении параметров ALIGN и VALIGN внутри тега <TR> выравнивание задается сразу для всех ячеек, содержащихся в этой строке.
Пример 4. Пример 5:
4.
<TABLE BORDER WIDTH=400 HEIGHT=150> <TR> <TD VALIGN=TOP>VALIGN=TOP</TD> <TD VALIGN=MIDDLE ALIGN=CENTER>ALIGN=CENTER VALIGN=MIDDLE</TD> <TD VALIGN=BOTTOM ALIGN=RIGHT>ALIGN=RIGHT VALIGN=BOTTOM</TD> </TR> </TABLE> |
|
||
VALIGN=TOP |
ALIGN=CENTER VALIGN=MIDDLE |
ALIGN=RIGHT VALIGN=BOTTOM |
|
5.
<TABLE BORDER WIDTH=400 HEIGHT=150 ALIGN=CENTER> <TR VALIGN=BOTTOM ALIGN=CENTER> <TD>Для этой строки задан параметр VALIGN=BOTTOM и ALIGN=CENTER</TD> </TR> <TR VALIGN=TOP ALIGN=CENTER> <TD>А для этой — VALIGN=TOP и ALIGN=CENTER</TD> </TR> </TABLE> |
Для этой строки задан параметр VALIGN=BOTTOM и ALIGN=CENTER |
А для этой — VALIGN=TOP и ALIGN=CENTER |
Параметр BORDER служит для управления толщиной границ таблицы. Употребляется он только в теге <TABLE>.
Параметры CELLSPACING служат для управления количеством свободного пространства между ячейками таблицы, а CELLPADDING – между границами ячейки и ее содержанием. Употребляются они также только в теге <TABLE>.
Для создания «невидимой» таблицы необходимо установить параметры BORDER=0 CELLSPACING=0 CELLPADDING=0 Исходный код таблицы 1
(Пример 6):
<TABLE BORDER=15 WIDTH=400 HEIGHT=150 ALIGN=CENTER> <TR> <TD>Для этой таблицы задан параметр BORDER=15</TD> </TR> </TABLE> |
Для этой таблицы задан параметр BORDER=15 |
Таблица 1.
И таблицы 2:
<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=25 WIDTH=600 HEIGHT=150 ALIGN=CENTER> <TR> <TD>Для этой таблицы заданы параметры BORDER=5 CELLSPACING=5 CELLPADDING=25</TD> </TR> </TABLE> |
Для этой таблицы заданы параметры BORDER=5 CELLSPACING=5 CELLPADDING=25 |
Таблица 2.
Параметр BGCOLOR предназначен для окрашивания фона ячеек таблицы, а параметр BACKGROUND – для размещения графического файла в качестве фона таблицы. Применять эти параметры можно как для таблицы в целом, так и для отдельных ячеек. Значения этих параметров необходимо указывать так же, как и в теге <BODY>, т. е. цвет указывается в восьмеричном исчислении или с помощью стандартного имени, а путь к файлу, используемому в качестве «обоев» для фона таблицы, необходимо указывать в соответствии со всеми правилами указания URL.
Вот исходный код этих таблиц (Пример. 7):
1.
<TABLE BORDER=3 CELLSPACING=0 WIDTH=400 HEIGHT=100 ALIGN=CENTER BGCOLOR=BLACK> <TR> <TD ALIGN=CENTER BGCOLOR=RED>Для этой ячейки задан параметр BGCOLOR=RED</TD> <TD ALIGN=CENTER> <FONT COLOR=WHITE>А в этой цвет шрифта изменен на белый</FONT></TD> </TR> </TABLE> |
Для этой ячейки задан параметр BGCOLOR=RED |
А в этой цвет шрифта изменен на белый |
2.
<TABLE BORDER=1 WIDTH=400 HEIGHT=100 BACKGROUND=”backgr.gif” ALIGN=CENTER> <TR> <TD ALIGN=CENTER>Для этой таблицы задан параметр BACKGROUND=”file”</TD> </TR> </TABLE> |
|
Для этой таблицы задан параметр BACKGROUND=”file” |
|
3.
<TABLE BORDER=0 ALIGN=CENTER> <TR> <TD>А эта таблица – самая скромная. У нее нет ни фона, ни границ.</TD> </TR> </TABLE> |
А эта таблица – самая скромная. У нее нет ни фона, ни границ. |
При создании таблицы первая строка является определяющей, т. е. все последующие строки будут иметь такую же ширину колонок, как и первая строка. Для изменения этого положения служит параметр COLSPAN. Изменение значения СOLSPAN приводит к увеличению ширины ячейки на указанное вами количество ранее определенных столбцов, т. е. при указании параметра COLSPAN=2 ячейка займет пространство, отведенное для следующей (справа) ячейки.
Параметр ROWSPAN действует абсолютно так же, но по вертикали. Например, при указании значения ROWSPAN=2 ячейка займет пространство, отведенное для ячейки, находящейся под ней, в следующей строке таблицы.
Взгляните на исходный код этих таблиц (Пример 8):
1.
<TABLE BORDER=5 CELLSPACING=0 WIDTH=400 HEIGHT=100 ALIGN=CENTER BGCOLOR=ORANGE> <TR ALIGN=CENTER> <TD WIDTH=10%>Ширина ячейки 10% ширины таблицы</TD> <TD WIDTH=60%>Ширина ячейки 60% ширины таблицы</TD> <TD WIDTH=30%>Ширина ячейки 30% ширины таблицы</TD> </TR> <TR> <TD ALIGN=CENTER COLSPAN=3>Для этой ячейки указан параметр COLSPAN=3</TD> </TR> </TABLE> |
Ширина ячейки 10% ширины таблицы |
Ширина ячейки 60% ширины таблицы |
Ширина ячейки 30% ширины таблицы |
Для этой ячейки указан параметр COLSPAN=3 |
||
2.
<TABLE BORDER=5 CELLSPACING=0 WIDTH=400 HEIGHT=100 ALIGN=CENTER BGCOLOR=CYAN> <TR ALIGN=CENTER> <TD WIDTH=30% ROWSPAN=2>Для этой ячейки указан параметр ROWSPAN=2 и WIDTH=30%</TD> <TD>Ширина этой ячейки не указана, поэтому она занимает всю оставшуюся ширину таблицы, т. е. 70%.</TD> </TR> <TR ALIGN=CENTER> <TD>А эта ячейка сгенерирована в соответствии с шириной ячейки, находящейся в первой строке, над ней.</TD> </TR> </TABLE> |
Для этой ячейки указан параметр ROWSPAN=2 и WIDTH=30% |
Ширина этой ячейки не указана, поэтому она занимает всю оставшуюся ширину таблицы, т. е. 70%. |
А эта ячейка сгенерирована в соответствии с шириной ячейки, находящейся в первой строке, над ней. |
Структура таблицы может быть очень сложной, ячейки таблицы могут содержать в себе вложенные таблицы и любые элементы, использующиеся для построения Web-страниц.
Вот исходный код этой таблицы (Пример 10):
<TABLE BORDER=3 WIDTH=400 HEIGHT=400 ALIGN=CENTER CELLSPACING=0> <TR> <TD BGCOLOR=ORANGE> <TABLE BORDER=3 WIDTH=300 HEIGHT=300 ALIGN=CENTER CELLSPACING=0> <TR> <TD BGCOLOR=GREEN> <TABLE BORDER=3 WIDTH=150 HEIGHT=150 ALIGN=CENTER CELLSPACING=0> <TR> <TD BGCOLOR=BLUE ALIGN=CENTER VALIGN=CENTER> <IMG SRC=”logo_small_trans.gif” WIDTH=130 HEIGHT=98> </TD> </TR> </TABLE> </TD> </TR> </TABLE> </TD> </TR> </TABLE> |
|
