| 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
а) TARGET
| в) HD
|
б) TD
| г) COLSPAN
|