Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:

Лабораторні роботи з КМІ / Лабораторна робота № 7

.doc
Скачиваний:
34
Добавлен:
23.03.2015
Размер:
86.53 Кб
Скачать

ЛАБОРАТОРНАЯ РОБОТА № 7

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

  1. Теоретические сведения

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

  • название таблицы,

  • заголовки столбцов,

  • ячейки.

Таблица заполняется горизонтальными рядами ячейка за ячейкой слева направо. Заполнение начинается с левого верхнего угла и заканчивается правым нижним. Каждая ячейка должна быть заполнена. Для создания пустых ячеек используются пробелы.

Теги оформления таблиц

Тег

Форма записи

Примечание

TABLE

<TABLE>текст</TABLE>

Объявление таблиц.

TR

<TR>текст</TR>

Объявление строки.

TD

<TD>текст</TD>

Объявление ячейки в строке.

Атрибуты тега <TABLE>

Атрибут

Форма записи

Примечание

BORDER

<TABLE BORDER=X>

Задает рамку вокруг таблицы.

WIDTH

<TABLE WIDTH=XX%>

Задает ширину таблицы как ХХ% от ширины страницы или как ХХ пикселов.

BGCOLOR

<TABLE BGCOLOR="#RRGGBB">

Задает цвет фона таблицы.

Атрибуты тегов <TD> и <TR>

Атрибут

Форма записи

Примечание

ALIGN

<TD ALIGN=X>

Устанавливает выравнивание по горизонтали (Right, Left, Center)

VALIGN

<TD VALIGN=X>

Устанавливает выравнивание по вертикали (Top, Middle, Bottom, Baseline)

BGCOLOR

<TD BGCOLOR= "#RRGGBB">

Задает цвет фона ячейки.

Еще один тег для оформления ячеек таблиц — тег <TH>...</TH> — нужен для задания заголовочных ячеек. Он во всем совпадает с тегом <TD>, но в отличие от него, содержимое выдается жирным шрифтом и центрируется.

Если нужно задать заголовок всей таблицы, используйте тег <CAPTION параметры>...</CAPTION>. Он должен быть внутри тега <TABLE>, но вне описания ячеек. Тег имеет один параметр: ALIGN - указывает положение заголовка: он может быть в верхней (TOP) или нижней (BOTTOM) части таблицы.

2. Ход работы

Создание простой таблицы.

  1. Запустите стандартную программу Блокнот (Notepad) и наберите следующий текст с элементами форматирования:

<html>

<body>

<table border=2>

<tr><td>Мама</td></tr>

<tr><td>Папа</td></tr>

<tr><td>Сын</td></tr>

</table>

</body>

</html>

  1. Для просмотра созданной Web-страницы используйте броузер Microsoft Internet Explorer.

  2. Вставьте в тег <table> следующие атрибуты: width=50% align="center" bgcolor="yellow" bordercolor="blue". Просмотрите обновленный документ в браузере.

  3. Добавьте в тег <table> атрибут: cellspacing=5. Просмотрите обновленный документ в браузере.

  4. Измените значение атрибута cellspacing на 10, 30 и посмотрите что произойдет с таблицей.

  5. Добавьте между второй парой тегов <tr>:</tr> теги <td>год</td> <td>Ф.И.О.</td> Просмотрите полученный документ в окне браузера.

  6. Добавьте между третьей парой тегов <tr>:</tr> теги <td>№_зачетки</td> <td>группа</td> Просмотрите обновленный документ в браузере.

  7. Добавьте в первой паре тегов <tr>:</tr> в теге <td> атрибут colspan=3. Просмотрите полученный документ в окне браузера.

  8. Добавьте в первой паре тегов <tr>:</tr> в теге <td> еще атрибут align="center" Просмотрите полученный документ в окне браузера.

  9. Добавьте во второй паре тегов <tr>:</tr> в первом теге <td> атрибут rowspan=2. Просмотрите полученный документ в окне браузера.

  10. Удалите из второй пары тегов <tr>:</tr> тег <td>группа</td> Просмотрите полученный документ в окне браузера.

3. Задание на самостоятельное выполнение

  1. Создайте страницу, содержащую расписание Вашей учебной группы. HTML-код должен выглядеть примерно так:

<HTML>

<HEAD>

<TITLE> Ф.И.О. </TITLE>

</HEAD>

<TITLE> Расписание занятий I курса</TITLE>

</HEAD>

<BODY BGCOLOR="FFFFFF">

<P ALIGN=CENTER>

<FONT COLOR="RED" SIZE="6" FACE="ARIAL"><B> V курс </B></FONT><BR>

</P>

<FONT COLOR="BLUE" SIZE="4" FACE="COURIER"><B> Понедельник </B></FONT><BR>

<TABLE BORDER="1" WIDTH=100% BGCOLOR="99CCCC">

<TR BGCOLOR="CCCCFF" ALIGN=CENTER>

<TD>Пара</TD> <TD>3-8581</TD> <TD>3-8582</TD> <TD>3-8583</TD>

</TR>

  1. <TR>

<TD>1</TD> <TD>Мировые инф. рес-сы</TD> <TD>Проектирование Интернет-приложений</TD> <TD>Тхн. проект-ия СП</TD>

</TR>

<TR>

<TD>2</TD> <TD>Проектирование Интернет-приложений</TD> <TD>Мировые инф. рес-сы</TD> <TD>Проектирование Интернет-приложений</TD>

</TR>

<TR>

<TD>3</TD> <TD>Тхн. проект-ия СП</TD> <TD>Тхн. проект-ия СП</TD> <TD>Мировые инф. рес-сы</TD>

</TR>

</TABLE>

</BODY>

</HTML>

  1. Сохраните файл под именем schedule_monday.html.

  2. Используя различные варианты оформления таблиц, создайте файлы с именами schedule_tuesday.html и schedule_wednesday.html, содержащие расписание на вторник и среду, соответственно.

  3. В файле schedule_friday.html создайте таблицу такого вида:

  1. Для созданной таблицы установите следующие параметры: расположение на экране – центральное, ширина 550 пикселей. Цвет вертикальной общей ячейки – голубой. Цвет всей таблицы – зеленый. Расположение текста в ячейках – по центру.

  2. В файле schedule_sunday.html создайте таблицу такого вида:

  1. Для созданной таблицы установите следующие параметры: расположение на экране – левостороннее, ширина 550 пикселей. Цвет общей горизонтальной ячейки – красный. Цвет всей таблицы – желтый.

  2. В файле schedule_thursday.html создайте таблицу такого вида:

  1. Для созданной таблицы установите следующие параметры: расположение на экране – правостороннее, ширина 550 пикселей. Цвет общей ячейки – оранжевый. Цвет всей таблицы – серый.

4. Содержание отчета

1. Выполнить все описанные операции с текстом, содержащим личную информацию (Ф.И.О., номер зачетной книжки и т.д.)

2. Представить HTML-коды выполненных операций.

3. Представить скрины готовых HTML-документов.

4. При сдаче работы иметь исходные файлы.

5. Задания и вопросы для аттестации

1. Уметь показать способ создания HTML-таблиц.

2. Знать принципы формирования HTML- таблиц.

3. Знать основные теги.