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

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

Рассмотрим на примере, как используются таблицы для размещения
объектов на веб-странице.
“Города Беларуси”, на которой изображена карта Беларуси с гербами
городов и указаны даты их основания.
Пример 1. Создать веб-страницу “Города Беларуси”, на которой изображена
карта Беларуси с гербами городов и указаны даты их основания (рис 1.44)
Рис. 1.44

Откроем редактор MS Front Page. С помощью кнопки на панели
инструментов или меню Таблица вставим таблицу из 4 строк и 3 столбцов.
В средней ячейке первой строки наберем заголовок ГОРОДА БЕЛАРУСИ.
Оставшиеся ячейки второго столбца объединим. Для этого выделим
объединяемые ячейки и выполним команду Таблица→ Объединить ячейки.
Вставим изображение карты Беларуси из файла belarus2.jpg
В ячейки 1 и 3 первой строки вставим изображения герба и флаг Беларуси. В
остальные ячейки введем названия городов и даты из основания. Отформатируем
надписи и установим размеры ячеек в соответствии с рис. 1.44. Проще всего
изменять ширину столбцов, перетаскивая их границы с помощью курсора мыши.
Сделаем невидимыми границы ячеек. Выделим таблицу и вызовем
диалоговое окно Свойства таблицы (рис. 1.45). В поле Положение установим
Выравнивание: по центру, в поле Границы – Размер: 0. Такие границы в
редакторе Front Page отмечаются пунктирными линиями, а при просмотре веб-
страницы в браузере не видны.
Рис. 1.45
Теперь страница будет выглядеть так, как на рисунке 1.44. Сохраним ее под
именем goroda.htm и просмотрим в браузере.

Для построения таблицы в языке HTML используются теги:
<table> - таблица; <tr> строка таблицы; <td> - ячейка таблицы.
В этих тегах можно использовать атрибуты: width (ширина таблицы или
ячейки), bgcolor (цвет фона всей таблицы или ячеек), border и bordercolor
(толщина и цвет рамки) и другие (см. приложение 1).
Ширина таблицы может быть задана в пикселях или в процентах по
отношению к ширине страницы, например, width=”450” или width=”40%”.
По умолчанию при отображении таблицы создается эффект выпуклости
ограничивающей ее рамки.
Если задать, например, border=”1” и border color=”green”, то эффект
выпуклости исчезнет, и таблица будет ограничена двойной рамкой зеленого
цвета. Атрибут cell spacing=”0” задает одинарную рамку.
Пример 2. В окне кода редактора Front Page создать таблицу из 4 ячеек в одной
строке шириной 600 пикселей с рамкой зеленого цвета толщиной
1 пиксель. Разместить в ячейках изображения (рис. 1.46).
Рис. 1.46
Откроем редактор MS Front Page. Перейдем в режим С разделением.
В верхнем окне будем набирать и редактировать HTML-код. В нижнем окне будет
отображаться результат (рис. 1.46). Сохраним документ под именем tabl2.htm.
Просмотрим страницу в браузере.

1. Для чего используются таблицы на веб-страницах?
2. Как вставить таблицу в редакторе FrontPage?
Упражнения
1. Создайте веб-страницу “Разложение белого света в спектр”. Используйте
таблицу из 4 столбцов и 7 строк. В объединенные ячейки левого и правого столбцов
вставьте изображения призмы и радуги из файлов prizma.jpg и raduga.jpg. В ячейки
второго столбца поместите названия цветов и залейте их соответствующим фоном.
В ячейках третьего столбца разместите мнемоническое правило следования цветов
спектра.
2. Создайте веб-страницу на одну из тем: “Природа родного края”, “Растения”,
“Животные”, “Птицы”, “Рыбы”, “Дары леса”,“Грибы”, “Ягоды”, “Наш сад”, “Овощи”,
“Фрукты”, “Цветы”.
Используемые тексты и изображения из файлов размещайте в таблицах из 4-6
ячеек. В качестве образца оформления используйте страницы из примеров 1 и 2.