ПРАКТИЧЕСКОЕ ЗАНЯТИЕ № 3

ПРАКТИЧЕСКОЕ ЗАНЯТИЕ № 2

Тема: «Создание таблиц в HTML»

Цель: научиться создавать таблицы в HTML-документах, применять атрибуты для основных тегов таблицы.

Ход работы

Задание 1

Создать HTML-документ, в котором представлены сведения о гостиницах для размещения участников некоторой конференции. Эти сведения оформить в виде таблицы:

Характеристики гостиниц

Название	Адрес	Тип номера	Цена за день
Центральная	Пр. Мира, д. 4	Люкс одноместный	$150
		Люкс двухместный	$250
		Одноместный	$80
Спортивная	Бульвар Профсоюзов, д. 15	Одноместный	$50
Спортивная	Бульвар Профсоюзов, д. 15	Двухместный	$80
Вокзальная	Привокзальная пл., д. 3	Четырехместный	$50

В созданном html-документе таблица будет выглядеть так:

Выполнение

1. В редакторе создайте новый файл и введите структуру HTML документа. Сохраните файл в отдельную папку (ПЗ_02) под именем index.html

Введите структуру будущего документа в виде:

Для этого воспользуйтесь Zen-кодом:

В редакторе напишите html:4t и нажмите Ctrl+E

Выполните команду Файл - Сохранить. В окне выберите созданную вами папку ПЗ_03 для хранения файла, укажите тип файла "HyperText Markup Language File", введите имя файла index и щелкните ОК.

2. Внутри тега <BODY> вставьте скелетные теги таблицы.

Количество строк и столбцов рассчитывается так же, как в редакторе Word (по самому мелкому дроблению). В нашем примере – 7.

Выполните команду Файл® Сохранить.

Задайте цвет фона страницы (добавьте к тегу <body> атрибут bgcolor). Выберите цвет шрифта для заголовка таблицы (с помощью тега <font>). Задайте границы для таблицы с помощью атрибута border=”1”, вставленного в тег <table>. Для того, чтобы отслеживать, как создается таблица.

4. Заполните первую строку таблицы.

Так как это «шапка» с названиями столбцов, для ячеек используйте контейнеры <TH> … </TH>.

Тег <TH> предназначен для создания одной ячейки таблицы, которая обозначается, как заголовочная. Текст в такой ячейке отображается браузером жирным шрифтом и выравнивается по центру. Тег <TH> должен размещаться внутри тега <TR>.

Окончательно контейнер первой строки выглядит так:

Сохраните и просмотрите результат через браузер.

5. Заполните вторую строку таблицы.

Так как это уже содержание таблицы, для ячеек используйте теги <TD> … </TD>. Первая и вторая ячейки по высоте занимают 3 строки. Чтобы объединить их, добавьте атрибуты ROWSPAN=3 для этих ячеек. Окончательно контейнер второй строки выглядит так:

Сохраните и просмотрите результат через браузер.

6. Заполните контейнер третьей строки таблицы.

Для ячеек по-прежнему используйте контейнеры <TD> … </TD>. Первая и вторая ячейки входят в объединенные раньше блоки, их объявлять не надо. А третья и четвертая ячейки содержат новую информацию. Скопируйте контейнеры соответствующих ячеек из второй строки и поменяйте в них содержимое. Окончательно контейнер этой строки выглядит так:

7. Аналогично п. 6 заполните контейнер четвертой строки.

Сохраните и просмотрите результат через браузер.

8. Добавьте в таблицу сведения о гостинице Спортивная.

Они располагаются в пятой и шестой строках.

Ячейка с текстом Спортивная занимает две строки, т.е. ячейка <TD> имеет атрибут rowspan=”2”.

Аналогично, ячейка с текстом Бульвар Профсоюзов занимает две строки, т.е. ячейка <TD> также имеет атрибут rowspan=”2”.

Далее следует ячейка с текстом Одноместный. И далее - ячейка со стоимостью $50.

На следующей строке находятся две ячейки с информацией Двухместный (1 ячейка) и $80 (2 ячейка).

Получаем для данных строк такой код:

Сохраните и просмотрите результат через браузер.

9. Добавьте в таблицу сведения о гостинице Вокзальная.

Они располагаются в седьмой строке. В ней нет объединения ячеек, все четыре ячейки содержат новую информацию.

Сохраните и просмотрите результат через браузер.

10. Форматирование таблицы.

Добавьте в тег <TABLE> атрибуты

BORDER=7 WIDTH=70% ALIGN=CENTER BGCOLOR = ”#FFA07A” BORDERCOLOR = ”#C0FF3E”

(можно взять свои значения атрибутов).

Добавьте атрибут CELLSPACING=0, потом измените его на CELLSPACING=10.

Сохраните и просмотрите результат через браузер.

11. Форматирование ячеек.

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

Задание 2

Создайте ссылку для перехода на вторую страницу (page2.html) с информацией о Гостинице Центральная.

На странице информацию о гостинице разместите в таблицах. На стадии разработки html-документа оставьте отображение границ для таблиц (<table border=1>). После того как таблицы созданы не отображайте границы таблиц.

Просмотреть страницу page2.html с границами вокруг таблиц.

Просмотреть страницу page2.html БЕЗ границ вокруг таблиц.

Добавьте ссылку, которая будет возвращать на главную страницу.