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

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

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

Знать:

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

Уметь:

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

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

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

Таблицы
<TABLE>…</TABLE>	формирование таблицы
<TR>…</TR>	строка в таблице
<TD> … </TD>	столбцы в таблице
ALIGN	выравнивание
BORDER=n	толщина обрамления
BORDERCOLOR	цвет обрамления
BGCOLOR	цвет фона
BACKGROUND	фоновый узор
WIDTH, HEIGHT	размеры по ширине и высоте соответственно
CELLPADDING	количество пикселей от границы до содержимого ячейки
CELLSPACING	количество пикселей между двумя соседними ячейками
COLSPAN	объединение ячеек по столбцам
ROWSPAN	объединение ячеек по строкам

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

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

<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>

Язык программирования	Особенности
C++	Использует	Классы
Visual BASIC	Обьекты

<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