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