Разработка электронного портала (2011), страница 5

ТаблицыВ языке HTML таблицы – это универсальное средство упорядочиванияинформации на странице. С их помощью можно разделять экран на зоны, ограничиватьрабочую зону страницы, и, конечно, размещать текст в виде таблицы или колонок. Внутритаблицы можно разместить текст, в том числе отформатированный, списки, ссылки,вложенные таблицы и изображения.Для начала рассмотрим синтаксис языка для построения таблиц.Все таблицы рисуются при помощи тега-контейнера <TABLE>.

У каждой таблицыесть строка и столбец, при этом их может быть всего по одной, т.е. таблица с однойячейкой. Чтобы создать строку, необходим тег-контейнер <TR> (от англ. Table row). Длясоздания внутри этой строки столбца нужен тег-контейнер <TD> (от англ. Table data).Границы в таблицах указываются при помощи атрибута BORDER, чем больше егозначение, тем шире граница.Пример: нарисуем таблицу из трех колонок.<TABLE BORDER=”1”><TR><TD>   1   </TD><TD>   2   </TD><TD>   3   </TD></TR></TABLE>Рисунок 4.1.Для того, чтобы нарисовать таблицы в несколько строк, необходимо простоскопировать первую строку и изменить в ней текст.

Приведем пример:<TABLE BORDER=”1”><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>Рисунок 4.2.Кроме того, что первую строку можно использовать в качестве шапки таблицы,язык HTML имеет специальные средства создания шапки – тег-контейнер <TH>(отображает тег ячейки жирным шрифтом с выравниванием по центру ячейки). Ониспользуется вместо тега <TD> в первой строке таблицы.Пример:<TABLE BORDER=”1”><TR><TH>Фамилия</TH><TH>Имя</TH><TH>Отчество</TH></TR><TR><TD>Барышников</TD><TD>Сергей</TD><TD>Николаевич</TD></TR><TR><TD>Павлов</TD><TD>Илья</TD><TD>Владимирович</TD></TR><TR><TD>Шутов</TD><TD>Михаил</TD><TD>Михайлович</TD></TR></TABLE>Рисунок 4.3.Последний элемент, который можно отнести к основам таблицы – это заголовок.Заголовок создается при помощи тега-контейнера <CAPTION>, который располагаетсяпосле тега <TABLE>.

Заголовок может располагаться как вверху таблицы, так и под ней,этим управляет атрибут ALIGN, который может иметь два значения – TOP и BOTTOMсоответственно.<TABLE BORDER=”1”><CAPTION ALIGN=TOP>Список сотрудников</CAPTION></TABLE>Добавим заголовок в предыдущий пример, результат на рисунке.Рисунок 4.4.Итак, мы ознакомились с базовыми тегами для построения таблиц. Помимо нихсуществует ряд тегов, которые предназначены для форматирования текста в ячейках,изменения цвета и проч.Ознакомимся со способами выравнивания текста в ячейках.За выравнивание текста в ячейках отвечает атрибут ALIGN тега <TD> или <TH>.По умолчанию текст в ячейках выровнен по левому краю. Атрибут ALIGN можетпринимать значения LEFT, CENTER и RIGHT. Кроме того, можно задать выравниваниетекста по вертикали при помощи атрибута VALIGN по верхнему или нижнему краям илипо середине ячейки (значение атрибутов соответственно TOP, BOTTOM и MIDDLE). Поумолчанию текст выровнен по середине ячейки.Пример:<TABLE BORDER=”1” WIDTH=100%><TR VALIGN=TOP ><TD><BR><BR><BR></TD><TD ALIGN=LEFT>Left-Top</TD><TD ALIGN=CENTER>Center-Top</TD><TD ALIGN=RIGHT>Right-Top</TD></TR><TR VALIGN=MIDDLE><TD><BR><BR><BR></TD><TD ALIGN=LEFT>Left-Middle</TD><TD ALIGN=CENTER>Center-Middle</TD><TD ALIGN=RIGHT>Right-Middle</TD></TR><TR VALIGN=BOTTOM><TD><BR><BR><BR></TD><TD ALIGN=LEFT>Left-Bottom</TD><TD ALIGN=CENTER>Center-Bottom</TD><TD ALIGN=RIGHT>Right-Bottom</TD></TR></TABLE>Рисунок 4.5.Комментарий: для демонстрации вертикального выравнивания в примере вкачестве первого столбца вставлен пустой столбец, содержащий по три строки в каждойячейке.Далее рассмотрим механизм объединения ячеек.

Для объединения ячеек погоризонтали (столбцов) используется атрибут COLSPAN тегов <TD> и <TH>. ЗначениеCOLSPAN служит для обозначения количества столбцов, которые нужно объединить водну ячейку.Пример:<TABLE BORDER=1 WIDTH=100%><TR><TD COLSPAN=2 ALIGN=center>...</TD></TR><TR><TD ALIGN=center>...</TD><TD ALIGN=center>...</TD></TR><TR><TD ALIGN=center>...</TD><TD ALIGN=center>...</TD></TR></TABLE>Рисунок 4.6.Чтобы объединить несколько ячеек по вертикали (строк) используется атрибутROWSPAN в тегах <TD> или <TH>.

Этот атрибут используется аналогично атрибутуCOLSPAN.Пример:<TABLE BORDER=1 WIDTH=100%><TR><TD ALIGN=center>...</TD><TD ALIGN=center>...</TD><TD ALIGN=center>...</TD></TR><TR><TD ROWSPAN=2 ALIGN=center>...</TD><TD ALIGN=center>...</TD><TD ALIGN=center>...</TD></TR><TR><TD ALIGN=center>...</TD><TD ALIGN=center>...</TD></TR></TABLE>Рисунок 4.7.Приведем пример, в котором используются оба атрибута COLSPAN и ROWSPAN.<TABLE BORDER=1 WIDTH=100%><TR><TD COLSPAN=5 ALIGN=center>Стоимость размещения</TD></TR><TR><TD ROWSPAN=2 COLSPAN=2 ALIGN=center>Номер</TD><TD COLSPAN=3 ALIGN=center>Период</TD></TR><TR><TD ALIGN=center>01.01-31.01</TD><TD ALIGN=center>01.02-28.02</TD><TD ALIGN=center>01.03-31.03</TD></TR><TR><TD ROWSPAN=2 ALIGN=center>Standart</TD><TD ALIGN=center>Одноместный</TD><TD ALIGN=center>100$</TD><TD ALIGN=center>90$</TD><TD ALIGN=center>150$</TD></TR><TR><TD ALIGN=center>Двухместный</TD><TD ALIGN=center>150$</TD><TD ALIGN=center>140$</TD><TD ALIGN=center>200$</TD></TR><TR><TD ROWSPAN=2 ALIGN=center>Lux</TD><TD ALIGN=center>Одноместный</TD><TD ALIGN=center>200$</TD><TD ALIGN=center>190$</TD><TD ALIGN=center>250$</TD></TR><TR><TD ALIGN=center>Двухместный</TD><TD ALIGN=center>250$</TD><TD ALIGN=center>240$</TD><TD ALIGN=center>300$</TD></TR></TABLE>Рисунок 4.8.Рассмотрим атрибуты, которые позволяют изменять цвет фона и границ таблицы,размер ячеек и границ и некоторые другие свойства.Цвет фона меняется посредством атрибута BGCOLOR.

Если нужно изменить фонвсей таблицы, то он вставляется в тег <TABLE>, если же нужно применить егоопределенной ячейке, то атрибут BGCOLOR добавляется к тегу <TD>. В качествезначения используется некоторый цифровой код в форме RRGGBB.Пример: <TABLE BGCOLOR=olive><TD BGCOLOR=”#CC22BB”>Вместо цвета фона таблицы можно задать фоновое изображение. Для этогоиспользуется атрибут BACKGROUND тега <TABLE> или <TD>, где значение атрибута –это имя файла-изображения и при необходимости путь к нему (если файл находится вдругой директории).Пример: <TABLE BACKGROUND=”image.jpg”>Язык HTML позволяет создавать таблицу как фиксированной ширины, так ипропорционально размеру окна браузера.

За это отвечает атрибут WIDTH тега <TABLE>.,который будет равен либо определенному количеству пикселей, либо процентномусоотношению ширины таблицы от экрана.Пример: <TABLE WIDTH=75%><TABLE WIDTH=600>Кроме того, можно изменить ширину столбцов относительно таблицы, например,чтобы разделить экран на зоны. Для этого используется тот же атрибут WIDTH только длятега <TD> и <TH>.Пример:<TABLE BORDER=1 WIDTH=90%><TR><TD WIDTH=25%><br><br><br></TD><TD WIDTH=50%><br><br><br></TD><TD WIDTH=25%><br><br><br></TD></TR></TABLE>Рисунок 4.9.Бывают случаи, когда необходимо изменить ширину разрыва между соседнимиячейками. По умолчанию пробел между ними составляет два пикселя, чтобы изменитьего, нужно воспользоваться атрибутом CELLSPACING в теге <TABLE>, при этом разрывизменяется как по горизонтали, так и по вертикали.Пример: <TABLE CELLSPACING=10>Также можно изменить отступ текста от границы ячейки (клеточный отступ – cellpadding).

По умолчанию отступ составляет один пиксель.Пример: <TABLE CELLPADDING=5>Тема 6. ФормыФормы существуют для возможности приема некоторых данных от посетителястраницы. Вариантами полей на странице-форме могут быть текстовые поля, выпадающиесписки, переключатели кнопки. Обработка данных, переданных от пользователя серверу,происходит не средствами языка HTML. HTML позволяет лишь нарисовать удобныйинтерфейс для приема этих данных. Ниже рассмотрим каждый элемент формы отдельно.Рисунок 5.1. «Пример формы»Форма реализуется при помощи тега-контейнера <FORM>, в котором задаютсяразличные элементы, перечисленные выше. У этого тега есть два атрибута – METHOD иACTION.

Атрибут ACTION определяет, на какую страницу передаются данные отпользователя, т.е. страница, которая будет выведена после нажатия на кнопку. АтрибутMETHOD определяет, каким способом передаются данные. Существует два вариантапередачи данных – методом GET и методом POST.

Метод GET передает данные явнымобразом, то есть в URL на переданной странице будут отображаться все переданныеданные. Если же данные переданы методом POST, то в URL следующей страницы данныеотображаться не будут.Тег <INPUT> служит для определения поля ввода информации пользователем. Этоможет быть текстовое поле, переключатель, изображение или кнопка.

Тип поляопределяется атрибутом TYPE. Существуют следующие варианты значений атрибутаTYPE: text, password, hidden, checkbox, radio, image, submit, reset. Рассмотрим назначениекаждого атрибута.Атрибут text используется для создания текстового поля для ввода небольшоготекста. Кроме того, существуют дополнительные атрибуты: NAME, который определяетимя поля, SIZE, определяет длину поля на экране (измеряется в символах), MAXLENGTH,задает ограничение на количество введенных символов. Если значение атрибутаMAXLENGTH больше значения атрибута SIZE, то текст будет прокручиваться в поле.Также можно указать значение по умолчанию, для этого существует атрибут VALUE.