Тема 1.5 Создание таблиц средствами HTML

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

Каждая таблица должна начинаться тегом < table > и заканчиваться тегом < /table >. Все элементы таблицы должны быть вложены внутрь этого тега. Название таблицы определяется при помощи тегов <caption> …</caption>. Выравнивание наименования задается при помощи атрибута align, который может принимать значения top (над таблицей) и bottom (под таблицей).

Создание ячеек таблицы:

Для начала нужно создать необходимое количество строк, затем поделить строки столбцами на ячейки. Количество пар тегов < tr > и < /tr > определяет количество горизонтальных строк в вашей таблице. Количество пар тегов <td>…</td >, расположенных между тегами соответствующей строки, определяет количество ячеек (столбцов) в пределах строки.

Пример:

<body>

<tr> <td> ячейка1 </td> <td> ячейка2</td> </tr>

<tr> <td>ячейка3 </td> <td> ячейка4 </td> </tr>

</table>

</body>

Спецификация тега <table>

< table align = “выравнивание”

border = “толщина рамки”

height = “высота таблицы”

width = “ширина таблицы”

valign = “вертикальное выравнивание”>

Спецификация тега <tr>

< tr align = “выравнивание”

valign = “вертикальное выравнивание”

bgcolor = “цвет фона”>

Спецификация тега <td>

<td align = “выравнивание”

bgcolor = “цвет фона”

colspan = “количество ячеек объединенных по горизонтали”

rowspan = “количество ячеек объединенных по вертикали”

height = “высота ячейки”

width = “ширина ячейки”

valign = “вертикальное выравнивание”>

Для разделения таблицы на функциональные части осуществляется с помощью тегов thead, tfoot и tbody – (заголовочная часть, для первой строки в таблицу, подвальная часть, для последней строки в таблице и основная часть).

Тема 1.6 Создание форм

Формы в html представляют один из способов для ввода и отправки данных. При создании форм необходимо следить за тем, чтобы предложенные поля были удобны для посетителей и приемлемы для ответов на поставленные вопросы.

Форма определяется тегами: <form>...</form>. Все, что заключено в этом теге, будет считаться формой.

У тега <form> имеются атрибуты:

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

method – определяется каким способом будут передаваться данные, занесенные в форму. Используются два метода:

- get – передача значений в адресе веб-страницы;

- post – в заголовке запроса к веб странице.

Содержание формы с тегами и атрибутами

</form>

Содержание формы - это теги для сбора данных (они используются вместе с атрибутами):
<input> - тег для сбора информации от посетителей веб- страниц. Атрибуты тега:

name ="…"- имя переменной в которой будут переданы значения в данном элементе формы.

type ="…"- указывает на способ обработки собранных данных.

Атрибуты name и type используются совместно с тегом input.

Способов приёма и обработки данных несколько видов - это различные значения атрибута type для тега input:

text – текстовое поле;

password – текстовое поле для ввода пароля;

radio – кнопка – переключатель;

checkbox – кнопка флажок;

hidden – скрытое поле;

submit – кнопка отправки формы;

reset – кнопка для сброса введенных данных;

color – поле для ввода цвета;