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

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

Для вставки таблиц используются 3 базовых тэга:

· < table> - начало и конец таблицы. Логично.

· < tr> - " table row/ряд таблицы", начинает и заканчивает горизонтальный ряд ячеек. Тоже логично.

· < td> - сокращение от " table data/табличные данные". Этот тэг начинает и заканчивает каждую ячейку ряда таблицы. Всё просто и логично.

< table>

< tr>

< td> Cell 1< /td>

< td> Cell 2< /td>

< /tr>

< tr>

< td> Cell 3< /td>

< td> Cell 4< /td>

< /tr>

< /table>

Атрибуты тега < table>, которые могут пригодится вам при создании таблицы:

· ALIGN — Задает выравнивание таблицы по краю окна браузера. Допустимые значения: left — выравнивание таблицы по левому краю, center — по центру иright — по правому краю.

· BGCOLOR — Устанавливает цвет фона таблицы.

· BORDER — Устанавливает толщину рамки в пикселах. По умолчанию рамка изображается трехмерной, но если используется параметр bordercolor тега < TABLE>, то вид рамки меняется. Когда в теге < TABLE> используется параметр border без аргументов (< table border>), то браузер отображает рамку толщиной один пиксел.

· BORDERCOLOR — Устанавливает цвет рамки таблицы. Рамка обычно рисуется как трехмерная, добавление параметров bordercolor и border к тегу < TABLE> создают однотонную линию.

· CELLPADDING — Определяет расстояние между границей ячейки и ее содержимым. Этот параметр добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без параметра cellpadding текст в таблице «налипает» на рамку, снижая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот параметр не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.

· CELLSPACING — Задает расстояние между внешними границами ячеек. Если установлен параметр border, толщина границы принимается в расчет и входит в общее значение.

· HEIGHT — Устанавливает высоту таблицы. В спецификации HTML 4 этого параметра нет, однако браузеры в большинстве случаев понимают его, если он установлен у тега < TABLE>. Если высота таблицы не указана, то берется суммарное значение параметра height у тега < TD>, в противном случае высота вычисляется на основе содержимого таблицы.

· WIDTH — Задает ширину таблицы. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в таблице находятся изображения, параметрwidth будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого. Как и в случае с высотой, если ширина явно не указана, то она будет вычисляться на основе содержимого таблицы.

У тега < td> также есть свои атрибуты:

· ALIGN — Задает выравнивание содержимого ячейки по горизонтали. Возможные значения: left — выравнивание по левому краю, center — по центру и right — по правому краю.

· BGCOLOR — Устанавливает цвет фона ячейки. Используя этот параметр совместно с атрибутом bgcolor тега < TABLE> можно получить разнообразные эффекты в таблице.

· BORDERCOLOR — Устанавливает цвет рамки вокруг ячейки. Рамка показывается, когда установлен параметр border с ненулевым значением у тега < TABLE>.

· COLSPAN — Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной ниже, где используется горизонтальное объединение ячеек.

· HEIGHT — Браузер сам устанавливает высоту таблицы и ее ячеек исходя из их содержимого. Однако при использовании параметра height высота ячеек будет изменена. Здесь возможны два варианта. Если значение height меньше, чем содержимое ячейки, то этот параметр будет проигнорирован. В случае, когда установлена высота ячейки, превышающая ее содержимое, добавляется пустое пространство по вертикали.

· NOWRAP — Добавление параметра nowrap к тегу < TD> заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой. Неправильное использование этого атрибута может привести к тому, что таблица будет слишком широкой и не поместится целиком на веб-страницу. Как следствие, появится горизонтальная полоса прокрутки. В любом случае, пользоваться подобной таблицей будет неудобно, из-за чего применение параметра nowrap осуждается в спецификации HTML 4.

· ROWSPAN — Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк. Например, как для таблицы, показанной ниже, где применяется вертикальное объединение ячеек.

· VALIGN — Устанавливает вертикальное выравнивание содержимого ячейки. По умолчанию контент ячейки располагается по ее вертикали в центре. Возможные значения: top — выравнивание по верхнему краю строки, middle— выравнивание по середине, bottom — выравнивание по нижнему краю, baseline — выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии.

· WIDTH — Задает ширину ячейки. Суммарное значение ширины всех ячеек может превышать общую ширину таблицы только в том случае, если содержимое ячейки превышает указанную ширину.

Списки

Тег < ul> устанавливает начало маркированного списка, и как Вы, наверное, уже догадались, тег < /ul> — его конец. Что значит маркированный? Это значит что перед каждым элементом списка располагается маркер, он же буллит, — типографский знак, используемый для выделения элементов списка. Каждый элемент такого списка заключен между тегами < li> и < /li>. У данного тега есть один собственный атрибут type, который может принимать 3 значения square (квадрат), disc (диск), circle (кольцо). По умолчанию для элемент списка устанавливается тип disc. Применение атрибутаtype для тега < li> позволяет установить тип для каждого из элементов списка в отдельности, для того, чтобы применить тип для всего списка, атрибут type нужно использовать для тега < ul>.

Рассмотрим код простого маркированного списка:

< ul type=" circle" >

< li> Первый элемент списка< /li>

< li> Второй элемент списка< /li>

< /ul>

Также в HTML существует такое понятие, как нумерованный список, который устанавливается с помощью тега < ol>. У данного тега есть три собственных атрибута:

· type — Устанавливает вид маркера списка.

· reversed — Нумерация в списке становится в обратном порядке (3, 2, 1).

· start — Число, с которого будет начинаться нумерованный список.

Атрибут type для тега < ol> может принимать следующие значения: A (заглавные латинские буквы), a (строчные латинские буквы), I (заглавные римские цифры), i (строчные римские цифры), 1 (арабские цифры). По умолчанию значение равно 1, т.е. арабские цифры. Элемент нумерованного списка располагается между тегами < li> и < /li>, как и в случае с маркированным списком.

Код простого нумерованного списка:

< ol type=" a" >

< li> Первый< /li>

< li> Второй< /li>

< li> Третий< /li>

< /ol>

На самом деле, списки. Применяются не только при выводе списка, как может показаться на первый взгляд. Зачастую меню сайта также выводят при помощи списка, при выводе рубрик на блогах также используют списки. Список может отображаться как вертикально, так и горизонтально. Но во втором случае силой одного HTML не обойтись.

Формы

Форма HTML представляет собой документ, созданный с использованием элементов HTML. Назначением формы является сбор информации от пользователей. После того как пользователь заполнит форму и запускает процесс ее обработки, информация из нее попадает в программу, работающую на сервере.

У тега < form> есть свои атрибуты:

· accept-charset — Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные.

· action — Адрес программы или документа, который обрабатывает данные формы.

· autocomplete — Включает автозаполнение полей формы.

· enctype — Способ кодирования данных формы.

· method — Метод протокола HTTP.

· name — Имя формы.

· novalidate — Отменяет встроенную проверку данных формы на корректность ввода.

· target — Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

Элемент < INPUT> используется для определения области внутри формы, где собираются данные. Данный элемент представляет собой поле для ввода информации пользователем (обычно одна строка текста). В этом случае требуется наличие атрибута NAME для определения наименования переменной поля.

Можно использовать следующие атрибуты:

· MAXLENGTH - ограничивает число вводимых символов (по умолчанию ограничений нет)

· SIZE - размер видимой на экране области, занимаемой текущим полем. Если MAXLENGTH > SIZE, броузер будет прокручивать данные в окне.

· VALUE - определяет начальное значение поля ввода.