Разработка таблиц в составе HTML документов

Цель работы: Изучить основы и получить навыки создания таблиц и структурирования информации HTML документов с их помощью, для размещения в Интернет.

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

В конце лабораторной работы студенты должны представить отчёт по работе преподавателю и ответить на его вопросы.

Предварительные указания по порядку выполнения работы.

1. Изучите теоретическую вводную часть к данной работе.

2. При необходимости, используйте вводную часть работ №8 и 9..

3. В приложении к сборнику лабораторных работ находится справочник по тэгам языка HTML

4. Отчётом по данной работе является страница (файл) HTML, имя которого является фамилией студента с инициалами.

5. При выполнении работы создание и редактирование текста выполняется при помощи редактора Блокнот (Notepad).

6. Просмотр страниц выполняется из браузера Internet Explorer.

Введение.

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

Ячейки могут содержать в себе текст, графику, или другую таблицу. Текст и графика внутри ячейки могут представлять собой внешние или внутренние ссылки.

Начинается каждая новая таблица тэгом <TABLE>, а заканчивается парным ему тегом </TABLE>. Тэг <TABLE> задаёт базовые характеристики таблицы – расстояния между ячейками, ширину таблицы относительно экрана и т. п. Например, следующая пара тэгов:

<TABLE ALIGN=CENTER BORDER=2 WIDTH=50% >

………………………………………………………………

</TABLE>

описывает таблицу, выровненную по центру экрана, занимающую 50 процентов ширины экрана (атрибут WIDTH=) и имеющую рамку размером в 2 пиксела (атрибут BORDER=). Если атрибут BORDER не задан или равен 0, рамка не отображается.

Ширину таблицы можно задавать в абсолютных значениях (в пикселах). Если ширина не задана, размер таблицы по ширине определяется программно и зависит от размеров и особенностей форматирования текста (или графики) внутри ячеек.

Высота всей таблицы и, соответственно, отдельных ее ячеек может быть определена атрибутом HEIGHT= тега </TABLE>. Если этот атрибут не задан, высота программно устанавливается в зависимости от размера шрифта и особенностей форматирования текста внутри ячеек.

Каждый ряд таблицы описывается парой тэгов <TR> и </TR>. Колонки внутри каждого ряда описываются тэгами <TD> и </TD> Содержимое каждой ячейки (это может быть текст, графическое изображение новая таблица, ссылка и т.п.) помещается между тэгами <TD> и </TD>.

Тэг <CAPTION> внутри тега <TABLE> описывает заголовок таблицы. При помощи атрибута Align заголовок может быть размещён сверху (значение TOP)или внизу таблицы (значение BOTTOM).

Тэги <TH> и </TH> внутри тега <TABLE> задают названия столбцов.

Пример простой таблицы.

<table width=350 height=200 border=2 frame=box rules=all align=left bgcolor=#ccccff> <caption align=top><h3> Пример простой таблицы </caption></h3> <TR align=center bgcolor=#ffff00> <TH> Колонка 1 </TH><TH>Колонка 2 </TH> <TH>Колонка 3 </TH> </TR> <tr> <td>Ячейка1-1</td><td>Ячейка1-2</td><td>Ячейка1-3</td> </tr> <tr> <td>Ячейка2-1</td><td>Ячейка2-2</td><td>Ячейка2-3</td> </tr> <tr> <td>Ячейка3-1</td><td>Ячейка3-2</td><td>Ячейка3-3</td> </tr> </table>