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

Использование тега

для оформления HTML-странички

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

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

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

Разумеется, это можно сделать, и даже очень несложно. Достаточно воспользоваться новым тегом

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

Итак, как уже было сказано выше, тег

описывает таблицу. И описание производится следующим образом:

1. вначале заказывается таблица (открываем контейнер

);

затем начинаем описывать первую строку таблицы (открываем контейнер

);

внутри первой строки по очереди описываем содержимое каждой ячейки (в контейнерах

);

закрываем описание первой строки (закрываем контейнер

);

начинаем описание второй строки (открываем контейнер

);

внутри второй строки по очереди описываем содержимое каждой ячейки (в контейнерах

);

… и так далее описываем все строки и все ячейки в них.

в самом конце закрываем описание таблицы (закрываем контейнер

...

...

).

Давайте вернемся к таблице цветов и посмотрим, как выглядит ее описание с использованием тега

. Вот сама уже известная вам табличка:

Цвет

Название

Цвет

Название

Цвет

Название

Красный

Red

Белый

White

Темно-синий

Navy

Оранжевый

Orange

Морской

Cyan

Коричневый

Brown

Желтый

Yellow

Синий

Blue

Фиолетовый

Magenta

Зеленый

Green

Голубой

SkyBlue

Золотой

Gold

Черный

Black

Пурпурный

Purple

Серебряный

Silver

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

 

   
   
   
   
   
   
 

 

   
   
   
   
   
   
 

 

   
   
   
   
   
   
 

 

   
   
   
   
   
   
 

 

   
   
   
   
   
   
 

 

   
   
   
   
   
   
 

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

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

Атрибут тега

BORDER заказывает рисование сетки по границам ячеек таблицы, а специальные символы

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

.

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

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

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

  
     
     
  

…

…

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

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

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