Практическое занятие №6
Наименование: Конструирование таблиц на web - страницах
1. Цель: Научится создавать простые, сложные таблицы
Подготовка к занятию: по предложенной литературе повторить тему «Создание таблиц средствами HTML» и ответить на следующие вопросы:
Перечислите основные теги создания таблиц в HTML – документе
С помощью какого тега можно подписать таблицу?
Какой атрибут отвечает за объединение ячеек в таблицу по горизонтали (вертикали)?
Литература:
3.1 Шомас Е.А. Конспект лекций по дисциплине «Распределенные системы обработки информации»
3.2 Клименко Р.А. Веб-мастеринг на 100%. – СПб.: Питер, 2013. – 512 с.
3.3 Квинт И. HTML и CSS на 100%. – СПб.: Питер, 2008с
Перечень оборудования и программного обеспечения:
4.1 ПЭВМ, подключенные к сети Интернет
4.2 Браузеры
4.3 Текстовый редактор
Задание:
5.1 Создайте простую таблицу следующего вида:
Таблица1 – Прайс - лист
|
Товар |
Код |
Количество |
Цена |
|
Молоко |
0021 |
4 л |
144 руб. |
|
Масло |
0032 |
2 п |
96 руб. |
|
Сыр плавленый |
0012 |
0,5 кг |
157 руб. |
* таблица может быть заполнена другими данными
5.2 Создайте сложную таблицу:
|
| |||
|
|
|
|
|
|
|
| ||
|
|
|
|
|
|
|
| ||
5.3 Создайте таблицу следующего вида:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Порядок выполнения работы:
6.1 По предложенной литературе изучить необходимый материал и ответить на вопросы для допуска к практическому занятию;
6.2 Выполнить задание практического занятия;
6.3 Дать ответы на контрольные вопросы;
Содержание отчета:
7.1 Наименование и цель работы
7.2 Код программы
7.3 Ответы на контрольные вопросы
7.4 Вывод о проделанной работе
Контрольные вопросы:
8.1 Назначение и виды таблиц в HTML – документе?
8.2 В чем различие тега <TH> и тега <TD>?
8.3 Как установить фоновый рисунок для таблицы?
ПРИЛОЖЕНИЕ:
В HTML таблицы используются в двух случаях: для представления числовых данных, разбитых по строкам и столбцам, или как средство форматирования веб – страниц, задания взаимного расположения элементов страницы. Ячейки таблицы могут содержать любые HTML – элементы, например заголовки, списки, абзацы, фигуры, графику, а также элементы формы. Фактически весь сайт расположен в большой сложной таблице.
Каждая таблица начинается тегом <TABLE> и заканчивается тегом </TABLE>. Внутри этой пары тегов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в которых задаются данные для отдельных ячеек.
Каждая строка начинается тегом <TR> и заканчивается тегом </TR>. Отдельная ячейка в строке обрамляется парой тегов <TD> и </TD> или <TH> и </TH>. Тег <TH> используется для ячеек заголовка таблицы, а <TD> – для ячеек данных. Отличие этих тегов в том, что в заголовке по умолчанию используется полужирный шрифт, а для данных – обычный.
Теги <TD> и <TH> не могут появляться вне описания строки таблицы <TR>.
Пример таблицы:
<HTML>
<HEAD>
<TITLE>Пример таблицы</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD>Ячейка 1</TD>
<TD>Ячейка 2</TD>
</TR>
<TR>
<TD>Ячейка 3</TD>
<TD>Ячейка 4</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Спецификация тега <TABLE>:
<TABLE
ALIGN="выравнивание"
BORDER="толщина рамки"
CELLPADDING="расстояние"
CELLSPACING="расстояние"
HEIGHT="высота"
VALIGN="вертикальное выравнивание"
WIDTH="ширина"
>
Спецификация тега <TR>
<TR
ALIGN="выравнивание"
BGCOLOR="цвет фона"
VALIGN="вертикальное выравнивание"
>
Спецификация тега <TD>
<TD
ALIGN="выравнивание"
BGCOLOR="цвет фона"
COLSPAN="количество ячеек объединенных по горизонтали"
HEIGHT="высота ячейки"
ROWSPAN=" количество ячеек объединенных по вертикали»
VALIGN="вертикальное выравнивание"
WIDTH="ширина ячейки"
>