Главная | Обратная связь | Поможем написать вашу работу!

Cоздание WEB-страниц с помощью HTML.

Создание таблиц.

Цель работы: изучить назначение и правила записи основных тегов языка и их атрибуты.

Теоретические данные.

Создание таблиц

Таблица в HTML представляет собой конструкцию из вложенных друг в друга контейнеров самой таблицы, ее отдельных строк и отдельных ячеек в пределах каждой строки. При этом сами ячейки могут содержать текст, рисунки и прочие компоненты web-страницы. Обычно таблицы используются по их прямому назначению — для визуального представления табличных данных, однако в HTML с помощью таблиц с невидимой разлиновкой часто производится верстка страниц, чтобы расположить на них желаемым образом фрагменты текста и иллюстрации.

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

• размещения различных элементов на странице относительно текста по левой,
правой стороне, по центру и с сочетанием этих видов выравнивания;

• заливки прямоугольных областей однородным фоновым цветом или реализа
ции фоновой иллюстрации;

• объединения фрагментов изображения в единое целое (с сохранением возмож
ности присвоить каждому такому фрагменту отдельную гиперссылку; такие
фрагментарные изображения называют картами изображений, или Image-
Map);

• создания отступов вокруг текста;

• создания различных обрамлений.

• создания вертикальных линий;

• создания колонок;

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

• <CAPTION>...</CAPTION> — заголовок (название) таблицы. Хотя контейнер
располагается внутри контейнера <TABLE>...</TABLE>, заголовок выводится
вне рамки таблицы, причем его размещение определяется значением парамет
ра ALIGN:

ALIGN=TOP — заголовок над таблицей;

ALIGN=BOTTOM — заголовок под таблицей;

ALIGN=LEFT — заголовок над таблицей и выровнен влево;

ALIGN=RIGHT — заголовок над таблицей и выровнен вправо;

• <TR>...</TR> — контейнер, создающий строку таблицы. Внутри него распола
гаются контейнеры <ТН>...</ТН> и <TD>...</TD>, определяющие входящие в эту
строку ячейки;

• <тн>...</тн> — контейнер, создающий ячейку «шапки» таблицы (заголовка
столбца или строки таблицы). Ячейка «шапки» отличается от остальных тем,
что текст внутри нее автоматически выделяется полужирным шрифтом.
Данный контейнер должен находиться внутри контейнера <TR>,,.</TR>;

• <TD>...</TD> — контейнер, создающий ячейку таблицы. Этот контейнер также
должен находиться внутри соответствующего контейнера <TR>...</TR>.

<T.R> <! — вторая строка -->

<ТБ>Ячейка 5</TD>

<ТБ>Ячейка 6</TD>

<ТП>Ячейка 7</TD>

<ТБ>Ячейка 8</TD> </TR> <TR> <! -- третья строка -->

<ТБ>Ячейка 9</TD>

<ТБ>Ячейка 10</TD>

<ТБ>Ячейка 11</TD>

<ТБ>Ячейка 12</TD> </TR> </TABLE> </BODY> </HTML>

Выравнивание данных в ячейке

Выравнивание данных в ячейках таблицы производится с помощью атрибутов тэгов <TR> и <TD> (табл. 3).

Таблица 3 Выравнивание данных в ячейках

Атрибут	Возможные значения	Описание	Пример
ALIGN	LEFT, RIGHT, CENTER	Выравнивание содержимого ячейки по горизонтали: по левому краю (LEFT), по центру (CENTER) или по правому краю (RIGHT) •	<TR ALIGN=CENTER>
VALIGN	TOP, BOTTOM, CENTER	Выравнивание содержимого ячейки по вертикали; по верхнему краю (ТОР), по центру (CENTER) или по нижнему краю (BOTTOM)	<TR VALIGN=TOP>

Действие атрибута, записанного в составе тега <TD>, распространяется только на данную ячейку. Действие атрибута, записанного в составе тега <TR>, распространяется на все ячейки данной строки, если только в их тегах <TD> не задано иное значение того же самого атрибута.

Объединение ячеек таблицы

При необходимости можно объединить несколько ячеек таблицы по горизонтали и/или по вертикали в одну ячейку. Для этого служат атрибуты тега <TD>, указанные в табл. 4. Соответственно, нужно убрать из данной строки (и, если требуется, из других, более нижних, строк) лишние контейнеры <TD>...</TD>.

Табл ица 4

Объединение ячеек

Атрибуты	Описание	Пример
COLSPAN=n	Объединение п соседних ячеек в одной и той же строке	<TD COLSPAN=3>
ROWSPAN=n	Объединение п соседних ячеек одного и того же столбца	<TD ROWSPAN=3>

Для объединения прямоугольного блока п х т ячеек необходимо одновременно записать оба указанных параметра для тега <TD>, соответствующего верхней левой из объединяемых ячеек:

<TD COLSPAN=nROWSPAN=m>

Пример 1 (рис. 7).

Пусть необходимо создать таблицу следующего вида:

Верхняя строка таблицы состоит из трех ячеек. Каждую строку, как и раньше, нужно заключать в контейнер <TR>...</TR>, а каждую ячейку — в контейнер <TD>...</TD>:

<TR>

<ТР>Ячейка 1</TD>

<ТХ>Ячейка 2</TD>

<ТР>Ячейка 3</TD> </TR>

Теперь рассмотрим нижнюю строку. Ее ширина такая же, как и предыдущей (из трех ячеек), но последние две ячейки объединены. Используем атрибут <COLSPAN> (если бы требовалось объединить несколько ячеек из соседних строк, то использовался бы атрибут <ROWSPAN>). Заметим, что здесь внутри контейнера строки содержатся только два контейнера ячеек.

<TR>

<ТО>Ячейка 4</TD>

Остается заключить все это в контейнер таблицы (включим для нее разлиновку

толщиной 2 пикселя):

<ТО>Ячейка 1</TD> <ТО>Ячейка 2</TD>

<ТО>Ячейка 3</TD> </TR> <TR>

<ТБ>Ячейка 4</TD>

<TD СОЬЗРАН=2>Ячейка 5</TD> </TR> </TABLE>

Пример 2 (рис. 8).

Пусть необходимо создать таблицу, в которой ячейка 3 объединяет в себе три расположенные друг над другом ячейки второй, третьей и четвертой строк:

<ТБ>Ячейка 1</TD>

<ТО>Ячейка 2</TD> </TR> <TR> <! — вторая строка — тоже из двух ячеек - ->

<TD КОЯ5РАЫ=3>Ячейка 3</TD>

<! -- первая ячейка — объединенная -->

<ТО>Ячейка 4</TD> </TR> <TR> <! -- третья строка — только одна новая ячейка -->

<ТО>Ячейка 5</TD> </TR> <TR> <! -- четвертая строка — также одна новая ячейка -->

<ТТ»Ячейка 6</TD> </TR> </TABLE>

Общие параметры таблицы

Тег <TABLE> также может быть снабжен атрибутами, имеющими отношение ко всей таблице в целом. Некоторые наиболее часто используемые атрибуты указаны в табл. 5.

Табл ица 5

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

Атрибут	Описание	Примеры
ALIGN	Выравнивание таблицы по центру (CENTER) или по правому краю (RIGHT) относительно окна браузера; по умолчанию используется выравнивание по левому краю (left)	<TABLE ALIGN=LEFT> <TABLE ALIGN=RIGHT>
BACKGROUND	Вставка фонового рисунка	<TABLE BACKGROUND="fon.jpg">
BGCOLOR	Задание фонового цвета	<TABLE BGCOLOR=BLUE> <TABLE BGCOLOR=#3300CC>
BORDER	Ширина обрамления и разлиновки (в пикселях); нулевое значение — невидимая разлиновка	<TABLE BORDER=3> 1 Толщина рамки равна 1 3 пикселям
BOROERCOLOR	Задание цвета обрамления и разлиновки	<TABLE BORDERCOLOR=BLUE>
CELLPADDING	Задание отступа содержимого ячеек от их обрамления	<TABLE CELLPADDING=10>
CELLSPACING	Задание свободного промежутка между ячейками	<TABLE CELLSPACING=1O>
HEIGHT	Установка высоты таблицы (в пикселях)	<TABLE HEIGHT=100>
HSPACE	Задание промежутка слева и справа от таблицы (в пикселях)	<TABLE HSPACE=15>
NOWRAP	Запрет переноса слов в ячейках	<TABLE NOWRAP>
VSPACE	Задание промежутка сверху и снизу от таблицы (в пикселях)	<TABLE VSPACE=10>
WIDTH	Задание ширины таблицы (в пикселях или в процентах)	<TABLE WIDTH=200>

Некоторые из этих атрибутов, выделенные в таблице серой фоновой заливкой, работают не во всех браузерах.

Порядок выполнения работы:

1. Создайте на диске отдельную директорию (папку) для будущей страницы.

2. Теперь откройте Блокнот и задайте в качестве заголовка web-страницы слово «Таблицы».

3. Создайте таблицу:

<table>
<tr>
<td bgcolor="#FFCC33" >1x1</td>
<td bgcolor="#336699" >1x2</td>
<td bgcolor="#FFCC33" >1x3</td>
</tr>
<tr>
<td bgcolor="#336699" >2x1</td>
<td bgcolor="#FFCC33" >2x2</td>
<td bgcolor="#336699" >2x3</td>
</tr>
</table>

4. А также:

<table cellpadding=5 >
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2" valign="top" > <center>1x1</center> </td>
<td width="50" bgcolor="#336699" rowspan="2" valign="top" > <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699" valign="bottom" > <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33" valign="bottom" > <center>2x2</center> </td>
</tr>
</table>

5. Просмотрите результат в браузере, добавьте к созданной таблице название (заголовок) «Таблица 1», выровняв его по правому краю.

6. Создайте таблицу с названием «Таблица 2» и заголовками строк и столбцов; ячейкам с заголовками назначьте желтый фон:

	Заголовок 1	Заголовок 2	Заголовок 3
Заголовок 4	Ячейка 1	Ячейка 2	Ячейка 3
Заголовок 5	Ячейка 4	Ячейка 5	Ячейка 6

7. Создайте таблицу шириной 500 пикселей под названием «Таблица с объединенными столбцами»:

Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4	Ячейка 5
Ячейка 6

8. Создайте таблицу шириной 450 и высотой 150 пикселей. Выравняйте содержимое всех ячеек по центру (как по вертикали, так и по горизонтали). Расположите таблицу по правому краю относительно окна браузера.

Ячейка 1	Ячейка 2	Ячейка 3	Ячейка 4	Ячейка 5
Ячейка 6	Ячейка 7
Ячейка 8
Ячейка 9	Ячейка 10

Воспользуйтесь поиском по сайту: