Элементы конструирования таблиц

Лабораторная работа №6

Таблицы

Модель таблиц HTML позволяет авторам упорядочивать данные – текст, форматированный текст, изображения, гиперссылки, другие таблицы и т.д. – в ряды и столбцы ячеек. Таблицы не должны использоваться только с целью форматирования содержимого документа, так как это может создавать проблемы для невизуальных устройств. К тому же, при использовании с графикой, такие таблицы могут потребовать горизонтальной прокрутки для просмотра таблиц, созданных в системе с более широким дисплеем.

Элементы конструирования таблиц.

Элемент <TABLE>

Описание: определяет начало и конец таблицы, а также содержит все другие элементы, определяющие заголовок таблицы, ряды, содержимое и форматирование.

Начальный тег: необходим.

Конечный тег: необходим.

Определения атрибутов:

align = “left|center|right” – определяет положение таблицы по отношению к документу;

width = “число” – определяет необходимую ширину всей таблицы. Если значение указано в процентах, оно является относительным к доступному горизонтальному пространству;

bgcolor = “цвет” – цвет фона таблицы;

border = “число” – определяет ширину рамки таблицы;

bordercolor = “цвет” – цвет границы таблицы;

Элемент <TR>

Описание: действует как контейнер для ряда ячеек таблицы.

Начальный тег: необходим.

Конечный тег: не обязателен.

Определения атрибутов:

align = “left|center|right|justify” – горизонтальное выравнивание данных и положение текста в строке;

valign = “top|middle|bottom|baseline” – определяет вертикальное выравнивание данных в строке:

· top – по верху строки;

· middle – по центру (это значение по умолчанию);

· bottom – по нижней границе;

· baseline – все ячейки в том же ряду, что и ячейка с данным установленным значением атрибута valign, должны установить свои текстовые данные так, чтобы первая строка текста появлялась на базовой линии, общей для всех ячеек ряда. Это ограничение не действует на последующие строки текста в этих ячейках;

bgcolor = “цвет” – цвет фона строки;

Элемент <TD>, <TH>

Описание: определяет ячейку таблицы. Ячейки таблицы могут содержать информацию двух типов: заголовочную информацию и данные. Браузер может представлять текст заголовочной ячейки полужирным шрифтом. Элемент <TH> определяет ячейку, содержащую заголовочную информацию. Элемент <TD> определяет ячейку данных. Ячейки могут быть пустыми (т.е. не содержать данных).

Начальный тег: необходим.

Конечный тег: не обязателен.

Определения атрибутов:

align = “left|center|right|justify” – горизонтальное выравнивание данных и положение текста в ячейке;

valign = “top|middle|bottom|baseline” – определяет вертикальное выравнивание данных в ячейке;

bgcolor = “цвет” – цвет фона ячейки;

rowspan = “число” – определяет количество рядов, охваченных текущей ячейкой. Значение по умолчанию ("1"). ("0") означает, что ячейка охватывает все ряды раздела таблицы, начиная с текущего ряда и заканчивая последним рядом раздела, в котором ячейка определена;

colspan = “число” – определяет количество столбцов, охваченных текущей ячейкой. Значение по умолчанию ("1"). ("0") означает, что ячейка охватывает все столбцы, начиная с текущего ряда и заканчивая последним рядом раздела, в котором ячейка определена;

width = “число” –рекомендуемая ширина ячейки;

height = “число” –рекомендуемая высота ячейки;

Пример:

<TABLE border="1">	Таблица с рамкой шириной 1 пиксель
<TR><TD>1</TD> <TD rowspan="2">2</TD> <TD>3</TD></TR>	Первая строка таблицы состоит из 3-х ячеек (вторая ячейка объединяет 2 ряда.
<TR><TD>4</TD> <TD>6</TD></TR>	Вторая строка состоит из 2-х ячеек
<TR><TD>7</TD> <TD colspan=”2”>8</TD></TR></TABLE>	Третья строка состоит из 2-х ячеек (вторая ячейка объединяет 2 столбца).

В данном примере выводится следующая таблица:

1	2	3
4	6
7	8

Задание: в новом файле, который назвать raspisanie.html, создать таблицу со своим расписанием на всю неделю следующим образом:

Расписание занятий Сидорова Саши
День недели	Номер урока	Предмет	Учитель	Аудитория
Понедельник		Алгебра	Иванов И.И.
	Геометрия	Петров П.П.
	Физкультура	Сидоров С.С.	спортзал
Вторник		Физика	Макаров П.О.

В файл main.html добавить строку: Хотите посмотреть мое расписание? Щелкните сюда. Предложение «Щелкните сюда» оформить как гиперссылку на страницу raspisanie.html. Внизу страницы raspisanie.html расположить картинку «Назад», которую оформить как гиперссылку на главную страницу.