Таблицы. Таблицы широко применяются при создании HTML-документов

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

Для создания таблиц в HTML-документах используется тег <TABLE>...</TABLE>, имеющий следующий формат:

<TABLE ALIGN=left|right|center WIDТН="Ширина таблицы BORDER= "Толщина границы" CELLSPACING=" Интервал между ячейками" CELLPADDING="Paзмep полей ячеек">

<TR ALIGN=left right|center|justify VALIGN=top|middle|bottorm>

<TD ROWSPAN=Колличество строк COLSPAN=Колличество столбцов ALIGN=left|right|center|justify VALIGN=top|middle|bottom WIDTH =Ширина ячейки BGCOLOR="Код цвета фона ячейки">Текст ячейки</TD>

</TR>

</TABLE> Рассмотрим назначение отдельных параметров тега TABLE.

Параметр ALIGN определяет режим выравнивания таблицы (но не текста в ячейках таблицы!). Таблица может быть выровнена по центру (значение ALIGN= center), по левому краю (значение ALIGN=left) или по правому краю страницы (значение ALIGN=right).

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

WIDTH=200

При этом, если при отображении таблицы в броузере окажется, что рабочая область экрана не способна уместить таблицу указанной ширины, в окне броузера будет-активизирована горизонтальная полоса прокрутки.

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

WIDTH=75%

Параметр BORDER определяет толщину линий границы в пикселах. Если границы необходимо скрыть, следует присвоить этому параметру значение 0:

BORDER=0

Каждая из строк таблицы определяется тегом <TR>...</TR>. Этот тег позволяет указывать основные параметры форматирования для каждой из строк таблицы в отдельности.

Параметр ALIGN управляет режимом выравнивания текста в ячейках строки по горизонтали. Эти режимы выравнивания аналогичны режимам выравнивания текста основного абзаца документа. В то же время параметр VALIGN позволяет устанавливать режим выравнивания текста по вертикали. Текст может быть выровнен по верхнему (top) или нижнему (bottom) краю ячейки, а также по середине ячейки (middle).

Все данные, которые должны отображаться в таблице, необходимо размещать в пределах тегов <TD>...</TD>, между их открывающими и закрывающими частями. Положение на странице остальных данных и объектов, размещенных в пределах тега <TABLE>...</TABLE>, но не заключенных между тегами <TD> и </TD>, при их отображении в броузере окажется неопределенным: они могут быть размещены в л Параметр WIDTH определяет ширину ячейки. Ширина может быть указана в пикселах или процентах. В первом случае ширина будет установлена вне зависимости от общей ширины таблицы. При отображении в броузере ячейка таблицы будет иметь указанную ширину, если только эта ширина является достаточной для отображения содержащихся в ячейке данных (в противном случае броузер может выбрать ширину ячейки по собственному усмотрению). При указании процентного значения ширина ячейки будет зависеть от ширины таблицы.

Параметр BGCOLOR позволяет указать цвет фона ячейки. Более подробно коды цветов были рассмотрены в разделе <Раздел основного текста страницы>. Если этот параметр не указан, для ячейки устанавливается <прозрачный> цвет фона; в таком случае фоном для ячейки будет служить основной фон страницы - цвет или рисунок.

Для создания ячеек, занимающих несколько строк или столбцов таблицы, используются параметры ROWSPAN и COLSPAN. Значение этих параметров определяет, соответственно, сколько строк и столбцов должна охватывать соответствующая ячейка.

Чтобы лучше разобраться в структурной организации таблиц, представим ее в несколько упрощенном варианте:

<TABLE>

<TR>

<TН>Заголовок столбца 1</ТН>

<TH>3аголовок столбца 3</ТН>

<ТН>Заголовок столбца 3</ТН>

</TR>

<TR>

<TD>Текст ячейки 1:1</TD>

<TD>Текст ячейки 1:2</TD>

<TD>ТЕCT ячейки 1:3</TD>

</TR>

<TR>

<TD>Текст ячейки 2:1</TD>

<ТD>Текст ячейки 2:2</TD>

<TD>ТЕКСТ ячейки 2:3</ТD>

</TR>

</TABLE>

Приведенный выше HTML-код представляет собой пример таблицы размером 3х3 ячейки. Каждая из строк таблицы представлена парой тегов <TR>...</TR>. Первая строка содержит заголовки столбцов, для представления которых используются парные теги <ТН>...</ТН>. Остальные две строки содержат обычные ячейки, предназначенные для размещения основных данных таблицы. Каждой из ячеек соответствует пара тегов <TD>...</TD> HTML>

А теперь как выглядит программа в HTML-коде

<HEAD>

<TITLE> Welcome to my home page </TITLE>

</HEAD>

<BODY BGCOLOR="# FFFF88 " TEXT="# 0000FF " >

<FONT SIZE=4 COLOR="green" FACE="Monotype Corsiva">Текст</FОNТ> Содержимое странички

<font color="#FF0000">Поместив</font><font color="#CF2CD4">текст </font><font color="#0000FF">между</font><font color="silver">тегами </font><font color="green" size="4">...</font><IMG SRC="064.gif" ALT=""Стрелочка" width="147" height="147" >

<HR ALIGN=center SIZE=10 Width = 525 NOSHADE>

<UL ALIGN=center justify TYPE=dlske>

<LI ALIGN=center justify TYPE=disk|>ТЕКCT элемента списка</LI>

<LI> Это вторая строка списка</LI>

<LI> Это третьяя строка списка</LI>

</UL>

<TABLE ALIGN=center WIDТН=300 BORDER= 2 CELLSPACING=10 CELLPADDING=5>

<TR>

<TD>Заголовок столбца 1</TD>

<TD>3аголовок столбца 2</TD>

<TD>Заголовок столбца 3</TD>

</TR>

<TR>

<TD>Текст ячейки 1:1</TD>

<TD>Текст ячейки 1:2</TD>

<TD>ТЕCT ячейки 1:3</TD>

</TR>

<TR>

<TD>Текст ячейки 2:1</TD>

<TD>Текст ячейки 2:2</TD>

<TD>ТЕКСТ ячейки 2:3</TD>

</TR> </TABLE> </BODY>.</HTML>

Шаг9

Формы

Формы являются основным элементом Web-страниц, позволяющим осуществлять взаимодействие с пользователем. Используя элементы форм, пользователь может передавать автору страницы определенные сведения, передавать данные программам, работающим на сервере, осуществлять переход к определенным страницам Web-сайта и выполнять другие операции, делающие Web действительно интерактивной средой.

Таблица 10.3. Типы элементов форм

Тип	Элемент формы	Описание
Text	. Поле ввода текста	Используется для ввода произвольных данных
Password	Поле ввода пароля	Используется для ввода пароля. Отличается от поля ввода текста тем, что вместо всех вводимых в это поле символов отображаются символы звездочки (*)
Checkbox	Флажок	Используется для выбора одного из двух вариантов типа <да-нет>
Radio	Переключатель	Используется для выбора одного из нескольких взаимоисключающих вариантов
submit	Кнопка передачи данных	Используется для передачи данных формы программе-обработчику
reset	Кнопка очистки формы	Используется для очистки формы. При щелчке на этой кнопке все введенные пользователем данные заменяются на принятые по умолчанию

Параметр NAME позволяет указать имя элемента формы. Это имя используется программой-обработчиком для идентификации получаемых данных.

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

Параметр CHECKED используется совместно с флажками и переключателями. Этот параметр указывается в том случае, когда флажок или переключатель должен быть установлен по умолчанию.

Параметр SIZE определяет ширину полей ввода, а параметр MAXLENGTH - максимально допустимую длину строки, которую можно ввести в это поле.

Параметр ALIGN используется для указания режима выравнивания элемента формы. Элементы формы выравниваются аналогично графическим объектам.

Многострочные текстовые поля

Многострочные текстовые поля форм позволяют вводить крупные текстовые фрагменты. Для определения многострочного текстового поля используется тег <TEXTAREA>...</TEXTAREA>, имеющий следующий формат:

<TEXTAREA NAME="Имя поля" ROWS="Количество строк"COLS="Количество столбцов">Текст по умолчанию</ТЕХТАRЕA>

Параметр NAME используется для указания имени, служащего для идентификации текстового поля. Значения параметров ROWS и COLS определяют высоту и ширину текстового поля в строках и столбцах символов соответственно.

Используя предыдущие механизмы формы создайте самостоятельно.

Дата добавления: 2015-09-06