Создание таблиц в HTMl-Документе

	1. Повторение теоретических сведений.
2. Выполнение команд, представленных в таблице.
3. Выполнение практической работы.
4. Ответы на контрольные вопросы.
5. Выполнение теста.

Цель: получить начальные сведения о создании простых и сложных таблиц,

Знать:

- простые конструкции создания таблиц

Уметь:

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

- пользоваться основными атрибутами для форматирования таблиц.

Формируемые компетенции: ПКНМ-7, ПКНИ-8, ПКНМ-3.

Пример оформления таблицы на Web-странице:

<TABLE>
<TR>
<TD> Назначение </TD>
<TD> Дни недели </TD>
<TD> Время отправления </TD>
</TR>
<TR>
<TD> Москва - Ростов </TD>
<TD> 1, 2 </TD>
<TD> 15.20 </TD>
</TR>
</TABLE>

В тегах <TR> и <TD можно задавать:

выравнивание ячеек – ALIGN. Значения: LEFT – влево, RIGHT – вправо, CENTER – по центру;

размещение содержимого ячеек по вертикали – VALIGN. Значения: TOP – вверху, BOTTOM – внизу, MIDDLE – по центру;

цвет фона и фоновый узор – соответственно BGCOLOR, BACKGROUND.

Вот таблица зеленого цвета, в которой первая строка будет красной, а одна из последних ячеек - желтой.

<TABLE BORDER BGCOLOR="00FF00">
<TR BGCOLOR= "red">
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD BGCOLOR="yellow"> </TD>
</TR>
</TABLE>

<TABLE BORDER CELLPADDING= 2 BGCOLOR= WHITE >
<TH> Язык программирования </TH>
<TH ALIGN = LEFT COLSPAN = 2 > Особенности </TH>
<TR>
<TD> C++ </TD>
<TD ROWSPAN = 2 > Использует </TD>
<TD> Классы </TD>
<TR>
<TD> Visual BASIC </TD>
<TD> Обьекты </TD>

</TABLE>

	1. Лебедев С.В. Web-дизайн: учебное пособие по созданию публикаций для Интернет / С.В. Лебедев. – 3-е изд., перераб. и доп. – М.: Альянс-пресс, 2005.- С. 576-578.
2. Практикум по общей информатике: учеб.пособие / под. ред. В.П. Омельченко. – 2-е изд., перераб. и доп. – Ростов Н/Д: Феникс, 2007. –С. 310-358.: ил. – (Высшее образование)
3. Симонович, С.В. Специальная информатика: учебное пособие / С.В. Симонович, Г.А.Евсеев, А.Г. Алексеев. – М.: АСТ-ПРЕСС КНИГА, 2005. - С. 407-416.

	1. Открыть предыдущую страницу и выполнить следующие действия:
2. Добавить таблицу: Заголовок 1 столбца Заголовок 2 столбца Ячейка 1-1 Ячейка 2-1 Ячейка 1-2 Ячейка 2-2 Простая таблица: - ширина границы таблицы – 2 пикселя; - расположение таблицы на странице – по центру; - цвет границы таблицы – зеленый; - ширина промежутков между ячейками – отсутствует; - ширина промежутке между содержимым ячейки и её границами – 10 пиксель; - название таблицы «Простая таблица» установить снизу; - цвет фона заголовка – серебристый (silver); - цвет фона ячеек 1-1, 2-2 – морской волны (aqua).
3. Добавить фиолетовую (purple) горизонтальную линию.
4. Сохранить изменения и просмотреть результат, выбрав в браузере команду – Обновить.
5. Добавить неявную таблицу (не задавая атрибутов для таблицы, названия таблицы и ячеек) отобразив в ней 6 рисунков (по 2 в каждой строке).
6. Добавить горизонтальную линию.
7. Сохранить изменения и просмотреть результат, выбрав в браузере команду – Обновить. Добавить сложную таблицу (по образцу): Сложная таблица Объединены три ячейки в одной строке Объединены две ячейки в столбце Ячейка 2-2 Ячейка 3-2 Объединены две ячейки в строке - ширина границы таблицы – 5 пиксель; - цвет границы таблицы – темно-красный (maroon); - ширина промежутков между ячейками – 3 пикселя; - название таблицы «Сложная таблица» установить по умолчанию (сверху); - отцентрировать содержимое в ячейках таблицы.
8. Добавить горизонтальную линию.
9. Сохранить изменения и просмотреть результат, выбрав в браузере команду – Обновить.

	1.Как задать созданной странице фиксированный размер?
2.Как изменить фон отдельной ячейки, столбца, строки?
3.Как создать таблицу с невидимыми границами?
4.Как изменить цвет границы таблицы?
5.Как сделать таблицу на всю ширину страницы?

Тест № 4