Курсы HTML/CSS
Урок 9. Таблицы (продолжение темы). Фреймы. Веб-формы
Таблицы. Продолжение темы
Тема таблиц в html довольно-таки большая, поэтому на этом уроке мы продолжим тему таблиц в html.
Объединение ячеек
Для примера предположим, что нам нужно отрисовать в html таблицу, структура которой изображена на рисунке ниже.
Ячейки (1-1) и (1-2), (2-2) и (3-2) у этой таблицы объединены. Для начала отрисовываем таблицу без учета объединения ячеек, т.е. таблицу 4 × 2.
Теперь ячейку (1-2) удаляем, а ячейке (1-1) задаем атрибут colspan, в значении которого указываем количество объединяемых по горизонтали ячеек, а точнее количество ячеек по горизонтали, занимаемое ячейкой (1-1). Для ячейки (2-2) задаем атрибут rowspan, который объединяет ячейки по вертикали, со значением "2", ячейку (3-2) также удаляем.
<!DOCTYPE html> <html> <head> <title>Таблицы. Объединение ячеек</title> </head> <body> <table> <tr> <td colspan="2">(1-1) + (1-2)</td> <!--<td>(1-2) Удаляется</td>--> </tr> <tr> <td>(2-1)</td> <td rowspan="2">(2-2) + (3-2)</td> </tr> <tr> <td>(3-1)</td> <!--<td>(3-2) Удаляется</td>--> </tr> <tr> <td>(4-1)</td> <td>(4-2)</td> </tr> </table> </body> </html>
Заголовок таблицы
Заголовок таблицы задается элементом <caption></caption>, который пишется внутри элемента <table></table> первой строкой.
<table> <caption>Заголовок таблицы</caption> <tr> <td>Содержимое ячейки (1-1)</td> <td>Содержимое ячейки (1-2)</td> </tr> </table>
Атрибут элемента <caption></caption> caption-side задает положение заголовка таблицы. Значения: top (заголовок расположен сверху таблицы, значение по умолчанию), bottom (заголовок таблицы располагается снизу).
Группировочные элементы для таблиц
Таблицы могут быть довольно большими, например прайслисты. Для группировки содержимого таблиц в html есть 3 элемента.
Элемент <thead></thead> задает заголовочную группу в таблицах. Этот элемент может быть в таблице только один и идет после <caption> или, если <caption> нет сразу после <table>.
Элемент <tfoot></tfoot> задает группу, которая располагается в нижней части таблицы. Использование этого элемента в пределах таблицы также допускается только один раз. Этот элемент вставляется сразу после элемента <thead></thead>
Третий элемент для группировки в таблицах - это <tbody></tbody> позволяет создавать структурные блоки таблицы, которые располагаются между блоками <thead> и <tfoot>. Вставляется после элемента <tfoot></tfoot>.
Таким образом, используя все эти элементы можно задавать упорядоченную структуру для больших таблиц.
Порядок вложенности группировочных элементов в таблице html <table> <caption>Заголовок таблицы</caption> <thead> <tr> <td>Содержание ячейки заголовочной группы</td> </tr> </thead> <tfoot> <tr> <td>Содержание ячейки нижней группы</td> </tr> </tfoot> <tbody> <tr> <td>Содержание ячейки средней группы</td> </tr> </tbody> </table>
Для длинных прайслистов назначение всей этой головоломки в том, что содержание ячеек <thead> и <tfoot> (например, обозначение где цена, а где количество товара) будут отображаться на всех страницах, а элемент <tbody> будет продолжаться, в том числе при выводе на печать, однако эту фишку поддерживают далеко не все браузеры.
Фреймы
Фреймы позволяют поделить окно браузера на несколько частей, чаще на две в одной из которых расположено, к примеру, навигационное меню и кликая по ссылкам в этом меню страницы html по очереди загружаются во вторую часть окна браузера. Сейчас фреймы используются очень и очень редко, потому, как появились более удобные инструменты, например php и базы данных. Однако фреймы позволяют сделать к примеру, навигационное меню без необходимости изучения всего этого. Поэтому эту тему мы рассмотрим.
Старые типы фреймов уже исключены из html, однако остался один iframe, который можно использовать.
"АйФрейм" задается при помощи элемента <iframe></iframe>. Хотя тег парный, между ними никакого содержимого нет. В атрибуте src указывается имя файла (например, с какой-то статьей), который будет загружаться в окно фрейма. Атрибут name - имя фрейма, задает его метку. По этой метке - имени фрейма нужной ссылке указывается, что содержимое нужно загрузить в <iframe>, указывается это в атрибуте тега <a>. target - сюда мы пишем имя фрейма, в который нужно загрузить файл. Таким образом, target ссылки и name фрейма совпадают.
При помощи свойств CSS width и height окну фрейма задаются размеры.
<!DOCTYPE html> <html> <head> <title>Фреймы</title> <style> iframe {width:300; height:500;} </style> </head> <body> <!-- Фрейм "iframe1" --> <iframe src="/statya1.html" name="iframe1"></iframe> <!-- Ссылки на фрейм "iframe1" --> <a href="/statya1.html" target="iframe1">Ссылка на статью 1, загружаемую в фрейм</a> <a href="/statya2.html" target="iframe1">Ссылка на статью 2, загружаемую в фрейм</a> </body> </html>
src фрейма можно оставить пустым (src=" "), в этом случае до клика на ссылку мы будем видеть пустое окно фрейма.
Пример фрейма (нажимайте на ссылки ниже и посмотрите, как работает фрейм):
Ссылка на статью 1, загружаемую в фрейм Ссылка на статью 2, загружаемую в фрейм Ссылка на статью 3, загружаемую в фрейм
Следует отметить, что окно фрейма выступает как бы самостоятельным окном браузера - окно в окне, некое подобие Windows.
Веб-формы
Поля для ввода, чекбоксы с флажками, кнопки "отправить", выпадающие списки (в некотором случае) - все это веб-формы. При помощи веб-формы мы, веб-разработчики, получаем какие-то данные от пользователя. Это единственный способ общения с пользователем, только при помощи веб-форм, разработчик может задать какой-то вопрос пользователю и получить от него какой-то ответ, получить от пользователя какие-то данные (фото, видео и другие файлы).
Данные из формы отправляются на сервер, где их принимает какая-то программа или скрипт, обрабатывает, сохраняет и т.д.
Все вопросы сервера рассматриваются в курсах php, а сейчас мы разберемся только с элементами формы, с тем, что касается только части html.
Итак, начнем. Вот вам типичный пример веб-формы.
Веб-форма задается при помощи элемента <form></form>, в котором располагаются другие элементы формы. У тега <form> есть один обязательный и несколько необязательных атрибутов.
В значении обязательного атрибута action указывается, куда отправлять данные из формы (это будет файл или папка на сервере). Два необязательных, но важных атрибута тега <form> - это method и enctype.
<!DOCTYPE html> <html> <head> <title>Веб-формы</title> </head> <body> <form action=" " method="get" enctype=application/x-www-form-urlencoded> <!-- Здесь находятся остальные элементы формы --> </form> </body> </html>
Текстовое поле формы задается пустым элементом <input /> со значением атрибута type="text", кроме этого у него есть важный атрибут name, в значении которого указывается имя текстового поля. По имени текстового поля форма обрабатывается на сервере.
Большинство элементов формы задается тегом <input />, а значение атрибута type определяет, что это за элемент.
Атрибут value задает текстовому полю текст, который будет отображаться по умолчанию.
Атрибут maxlength определяет максимально допустимое число символов в текстовом поле.
Значение атрибута type "password" задает поле для ввода пароля, отличие которого в том, что при вводе в него символы не показываются, а заменяются кружочками (или звездочками).
Кнопка для отправки данных на сервер задается тоже элементом <input /> со значением type="submit". Атрибут value в этом случае определяет надпись на кнопке (по умолчанию надпись различна в различных браузерах).
Значение атрибута type "reset" создает кнопку для очистки всех полей формы, а точнее возвращает форму к первоначальному состоянию, если были надписи по умолчанию, восстанавливает их. Атрибут value также задает надпись на кнопке очистки полей формы.
Значение атрибута type "image" задает кнопку отправки данных в виде картинки. В этом случае необходимо прописать атрибут src, в значении которого указать расположение картинки для кнопки.
Значение атрибута type "button" задает кнопку, у которой нет действия, просто кнопка (дальнейшие манипуляции с ней возможны напрример, через JavaScript). У нее также может быть надпись (которой нет по умолчанию), которая задается тем же атрибутом value
Основные элементы веб форм: <form action=" " method="get" enctype=application/x-www-form-urlencoded> <!-- Текстовое поле --> <input type="text" name="login" value="Текст по умолчанию" maxlength="30" /> <!-- Поле для ввода пароля --> <input type="password" name="psw" maxlength="30" /> <!-- Кнопка для отправки данных на сервер --> <input type="submit" value="Отправить" /> <!-- Кнопка для очистки полей формы --> <input type="reset" value="Очистить" /> <!-- Кнопка для отправки данных в виде картинки --> <input type="image" src="/images/button.gif" /> <!-- Кнопка без действий --> <input type="button" value="Просто кнопка" /> </form>
Вид этих элементов в браузере будет таким:
В следующем уроке мы продолжим тему веб-форм.