§17

§ 17. Использование тега <Table> для оформления HTML-странички

Давайте немного отдохнем от графических редакторов и ненадолго вернемся к своим страничкам в “Виртуальной школе”.

Рассказывая о буфере обмена в предыдущем параграфе, мы привели пример дублирования записи в Блокноте. Как вы помните, это был тег <IMG>, который в дальнейшем немного изменялся. В результате на вашей страничке должны были появиться две картинки.

Появиться-то они, быть может, и появились, но почти наверняка не так красиво, как от них ожидалось. Например, вот так (см. рис. 57.)

Рис. 57. Расположение рисунков на страничке в случае простого написания тегов <IMG>.

Конечно, можно уменьшить размеры фотоизображений, воспользовавшись атрибутами тега <IMG> HEIGHT и WIDTH, о которых шла речь в § 12, но при этом ухудшится и качество картинок. Кроме того, если окно программы просмотра будет недостаточно большим, фотографии снова расположатся так, как на рисунке выше.

А нельзя ли сделать так, чтобы в окне программы просмотра появилась полоса горизонтальной прокрутки, и картинки всегда располагались так, как задумано изначально, - не одна под другой, а рядышком?

Разумеется, это можно сделать, и даже очень несложно. Достаточно воспользоваться новым тегом <TABLE>. Вообще-то, этот тег служит для описания таблиц. Таких, например, какая приведена в § 11 при показе названий цветов. Но частенько он используется и для того, чтобы расположить информацию на страничке в строгом порядке.

Итак, как уже было сказано выше, тег <TABLE> описывает таблицу. И описание производится следующим образом:

вначале заказывается таблица (открываем контейнер <TABLE>);
затем начинаем описывать первую строку таблицы (открываем контейнер <TR>);
внутри первой строки по очереди описываем содержимое каждой ячейки (в контейнерах <TD> ... </TD>);
закрываем описание первой строки (закрываем контейнер </TR>);
начинаем описание второй строки (открываем контейнер <TR>);
внутри второй строки по очереди описываем содержимое каждой ячейки (в контейнерах <TD> ... </TD>);
… и так далее описываем все строки и все ячейки в них.
в самом конце закрываем описание таблицы (закрываем контейнер </TABLE>).

Давайте вернемся к таблице цветов и посмотрим, как выглядит ее описание с использованием тега <TABLE>. Вот сама уже известная вам табличка:

Цвет	Название	Цвет	Название	Цвет	Название
Красный	Red	Белый	White	Темно-синий	Navy
Оранжевый	Orange	Морской	Cyan	Коричневый	Brown
Желтый	Yellow	Синий	Blue	Фиолетовый	Magenta
Зеленый	Green	Голубой	SkyBlue	Золотой	Gold
Черный	Black	Пурпурный	Purple	Серебряный	Silver

А вот и ее описание на языке HTML:

<HTML>
<HEAD><TITLE>Названия цветов</TITLE>
</HEAD>
<BODY background="file:///s|/html/fon/stars.gif">
<TABLE border=1>
<! Описание первой строки

<TR>
    <TD> <B><P ALIGN="CENTER">Цвет</P></B> </TD>
    <TD> <B><P ALIGN="CENTER">Название</P></B></P></TD>
    <TD> <B><P ALIGN="CENTER">Цвет</P></B></TD>
    <TD> <B><P ALIGN="CENTER">Название</P></B></TD>
    <TD> <B><P ALIGN="CENTER">Цвет</P></B></TD>
    <TD> <B><P ALIGN="CENTER">Название</P></B></TD>
</TR>

<! Описание второй строки

<TR>
    <TD><font color="red">Красный</font></TD>
    <TD>Red</TD>
    <TD><font color="white">Белый</font></TD>
    <TD>White</TD>
    <TD><font color="navy">Темно-синий</font></TD>
    <TD>Navy</TD>
</TR>

<! Описание третьей строки

<TR>
    <TD><font color="orange">Оранжевый</font></TD>
    <TD>Orange</TD>
    <TD><font color="cyan">Морской</font></TD>
    <TD>Cyan</TD>
    <TD><font color="brown">Коричневый</font></TD>
    <TD>Brown</TD>
</TR>

<! Описание четвертой строки

<TR>
    <TD><font color="yellow">Желтый</font></TD>
    <TD>Yellow</TD>
    <TD><font color="blue">Синий</font></TD>
    <TD>Blue</TD>
    <TD><font color="magenta">Фиолетовый</font></TD>
    <TD>Magenta</TD>
</TR>

<! Описание пятой строки

<TR>
    <TD><font color="green">Зеленый</font></TD>
    <TD>Green</TD>
    <TD><font color="SkyBlue">Голубой</font></TD>
    <TD>SkyBlue</TD>
    <TD><font color="gold">Золотой</font></TD>
    <TD>Gold</TD>
</TR>

<! Описание шестой сторки

<TR>
    <TD><font color="black">Черный</font></TD>
    <TD>Black</TD>
    <TD><font color="purple">Пурпурный</font></TD>
    <TD>Purple</TD>
    <TD><font color="silver">Серебряный</font></TD>
    <TD>Silver</TD>
</TR>

</TABLE>

</BODY>
</HTML>

Несмотря на такое пугающе длинное описание, мы надеемся, что вам здесь все понятно. Внутри контейнера <TR> … </TR> описывается одна строка, а внутри контейнера <TD>…</TD> описывается содержимое одной ячейки в этой строке.

Атрибут тега <TABLE> BORDER заказывает рисование сетки по границам ячеек таблицы, а специальные символы <! в начале строки говорят, что после них идет комментарий, на который программе просмотра не надо обращать внимания, когда она создает страницу по вашему описанию.

Рис. 58. Вид странички с рисунками, для размещения которых использовался контейнер <TABLE>.

Ну а теперь расположим две наши картинки так, как мы договаривались чуть выше, - всегда рядом. Скажем, так, как изображено на рис. 58.

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

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

Внутри контейнеров <TD> … </TD> расположены, сами понимаете, теги <IMG>.

Подведем итоги:

Для того чтобы разместить в HTML-документе информацию в табличном виде, служит контейнер <TABLE>... </TABLE>.
Контейнер <TABLE>... </TABLE> зачастую используется и для того, чтобы жестко задать расположение элементов оформления на HTML-страничке, заставив программу просмотра отобразить, при необходимости, нижнюю полосу прокрутки.

Вопросы и задания:

Зачем в описании таблицы, приведенной в этом параграфе, использован тег <FONT>?
Для каких целей там же служит атрибут контейнера <P>...</P> ALIGN=”CENTER”. Разузнайте, для чего служит этот же атрибут, когда он используется в теге <IMG>. Какие он может принимать значения?
На рис. 58 обе картинки имеют одинаковую высоту, а подписи под ними расположены по центру. С помощью каких тегов и атрибутов можно этого добиться?
Расположите на своей страничке любые две картинки или фотографии точно так же, как это сделано на рис. 58.