Эй! Спасибо, что решили посмотреть на тему! Осмотритесь вокруг
и подпишитесь на RSS feed чтобы узнавать обо всех обновлениях. До встречи!

Архив Декабрь, 2017

Поле со списком

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

Поле со списком создается следующим образом.

  Выбор 1   Выбор 2   Выбор 3

Теги и имеет следующие параметры (табл. 1).

Табл. 1. Параметры поля со списком

Параметр
select
Описание
name Имя поля. Предназначено для того, чтобы обработчик формы мог идентифицировать список.
size Количество видимых строк. По умолчанию одна строка.
multiple Этот параметр позволяет выбрать сразу несколько строк. Выбор делается с помощью клавиши Control или Shift.
Параметр option Описание
selected Видимое поле по умолчанию.
value Значение определяет, что будет отправлено на сервер при выбранном пункте списка.

Создание списка с помощью тегов и показано в примере 1.

Пример 1. Поле со списком

Как по вашему мнению расшифровывается аббревиатура «ОС»?
Офицерский состав Операционная система Большой полосатый мух

В результате получим следующее.

Как по вашему мнению расшифровывается аббревиатура «ОС»?
Офицерский состав Операционная система Большой полосатый мух

Макет из двух колонок

Двухколонная модульная сетка достаточно часто применяется на сайтах, при этом, как правило, в одной колонке располагается основной материал (текст статьи, например), а во второй — ссылки на разделы сайта и другая информация. Для создания подобного макета таблицы достаточно удобны — каждая ячейка выступает в качестве отдельной колонки, что позволяет легко регулировать различные параметры отображения документа.

Ширина колонок

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

и для первой ячейки установить ее ширину в пикселах или процентах также с помощью параметра width, но уже для тега

(пример 1).

Пример 1. Ширина колонки в пикселах

Левая колонка Правая колонка

В данном примере граница у таблицы не отображается, а вертикальное выравнивание содержимого ячеек по верхнему краю определяется параметром valign со значением top. Это требуется для того, чтобы при разном объеме содержимого ячеек, они не сдвигались бы относительно друг друга, а начинались одинаково от верхнего края.

Параметры width и valign можно заменить стилевыми атрибутами width и vertical-align с теми же значениями. Тогда данный код будет иметь следующий вид (пример 2).

Пример 2. Использование стилей

#maket {  width: 100%; } #maket TD {  vertical-align: top; } TD#leftcol {  width: 200px; }

Левая колонка Правая колонка

Поля внутри колонок

Расстояние между колонками регулируется параметром cellpadding тега

. Поскольку cellpadding определяет расстояние от границы ячейки до края ее содержимого, то пространство между содержимым разных колонок будет равно удвоенному значению этого параметра. Используя стили, в частности, атрибут padding, можно легко регулировать значение отступа для каждой колонки (пример 3).

Пример 3. Использование полей

#leftcol {  padding-right: 10px;  vertical-align: top; }

Левая колонка Правая колонка

В данном примере значения параметров cellspacing и cellpadding равны нулю, а расстояние между содержимым колонок определяется аргументом padding-right, который добавляется к левой ячейке через идентификатор с именем leftcol.

Аналогично отступы можно регулировать не только справа, но и с других сторон каждой ячейки. В примере 4 показано, как устанавливать поля для всех ячеек через стили.

Пример 4. Поля в ячейках

#maket TD {  padding: 5px; }

Левая колонка Правая колонка

Цвет фона колонок

Чтобы визуально отделить одну колонку от другой используют разные приемы, самым распространенным из них, пожалуй, является использование фонового цвета. Лучше указывать цвет через стили, это позволяет вынести оформление страницы в отдельный файл. Для этого создаем новый стилевой класс, устанавливаем для него параметр background и применяем его к требуемой ячейке (пример 5).

Пример 5. Цвет фона

#maket {  width: 100%; } TD {  vertical-align: top;  padding: 5px; } TD#leftcol {  width: 200px;  background: #ccc; } TD#rightcol {  background: #fc3; }

Левая колонка Правая колонка

В данном примере разный цвет фона добавляется для правой и левой колонки (рис. 1).

Рис. 1. Колонки разного цвета

Разделитель колонок

Использование полей не всегда подходит для установки нужного расстояния между колонок. Например, в случае, когда поля вокруг текста нельзя включать в силу разных соображений. Тогда поможет добавление еще одной ячейки, которая выступает в качестве разделителя между колонками (пример 6).

Пример 6. Использование трех ячеек

#maket {  width: 100%; } TD {  vertical-align: top;  padding: 5px; } TD#leftcol {  width: 200px;  background: #ccc;  border: 1px solid #000; } TD#rightcol {  background: #fc3;  border: 1px solid #000; } #spacer {  width: 10px }

Левая колонка Правая колонка

В данном примере вводится еще одна колонка со стилевым идентификатором spacer, это позволяет легко менять ширину между колонками. Внутрь этой ячейки можно ничего не вкладывать, браузеры достаточно корректно работают с подобными ячейками.

На рис. 2 показан результат примера. Для наглядности и «красоты» вокруг колонок добавлена граница.

Рис. 2. Расстояние между колонками

Линия между колонками

Разделять колонки можно не только с помощью цвета фона и пустого пространства, но и добавлением линии между колонок. Опять же, здесь пригодятся стили, с помощью которых создание линий значительно упрощается. Следует только установить атрибут border-left для правой колонки или border-right для левой (пример 7).

Пример 7. Добавление линии

#maket {  width: 100%; } TD {  vertical-align: top;  padding: 5px; } TD#leftcol {  width: 100px;  background: #ccc;

 border-right: 1px dashed #000;

} TD#rightcol {  background: #fc3; }

Левая колонка Правая колонка

Результат данного примера показан ниже.

Рис. 3. Линия между колонок

Резюме

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

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

Особенности таблиц

При верстке с помощью таблиц необходимо знать некоторые особенности, которые присущи таблицам. Это нужно для того, чтобы понимать, как построить макет в том или ином случае, создать эффективный код и не допустить откровенных ляпов в работе. Считается, что табличная верстка проще, чем другими методами, например, с помощью слоев. Однако таблицы тоже таят в себе множество хитростей, которые, так или иначе, влияют на отображение страницы.

Ширина таблицы

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

Ширина ячеек

Ширина ячеек определяется параметром width тега

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

Рассмотрим на примере тот случай, когда размер ячеек нужно указать. Предположим, что нам требуется создать на веб-странице две колонки, одна из них должна иметь размер 200 пикселов, а вторая занимать оставшееся место. Создаем таблицу с двумя ячейками и для левой ячейки задаем параметр width=”200” (пример 1). Единицы измерения ставить не нужно, браузер сам понимает, что если задано число, значит, используются пикселы.

Пример 1. Ширина ячеек

Левая колонка Правая колонка

Поскольку в данном примере ширина таблицы указана как 100%, таблица будет занимать всю свободную ширину окна браузера. При этом левая колонка берет под себя 200 пикселов, а правая — оставшееся свободное место.

Ширина ячейки иной раз может меняться, несмотря на то, что указана жестко. Это происходит, например, в том случае, если в ячейку добавили рисунок, размер которого превышает ширину ячейки. Чтобы вместить изображение, ячейка будет вынуждена раздаться. Также может повлиять на размер ячейки ее текстовое содержимое, которое содержит очень длинное слово.

Чтобы избежать указанной ситуации применяют несколько средств.

  • Не добавляют в ячейку фиксированной ширины те изображения, размер которых превышает ширину ячейки. Способ, конечно, звучит банально, тем не менее, зная особенности ячеек, можно избежать неприятностей с их отображением.
  • Для тега используют стилевое свойство table-layout со значением fixed. Применение этого параметра позволяет обрезать рисунок, если он не помещается целиком в ячейку (пример 2).

Пример 2. Параметр table-layout

TABLE {  table-layout: fixed }

Результат данного примера показан на рис. 1.

Рис. 1. Отображение рисунка при использовании параметра table-layout

  • Воспользоваться стилевым свойством overflow со значением scroll. Этот параметр добавляет полосы прокрутки к содержимому, но из-за того, что он применяется к блочным элементам им нельзя воспользоваться для тега

    Пример 3. Полосы прокрутки в ячейках

    TD DIV {

     overflow: scroll /* Добавляем полосы прокрутки */

    }

    . Поэтому приходится вкладывать внутрь ячейки тег и устанавливать стилевое свойство для него (пример 3). Это конечно не совсем правильно и удобно, но зато может дать требуемый результат.

    Результат данного примера показан на рис. 1.

    Рис. 2. Отображение рисунка при использовании параметра oveflow

    Содержимое ячеек

    Браузеры иначе отображают ячейку, внутри которой ничего нет. «Ничего» в данном случае означает, что внутрь ячейки не добавили ни рисунок, ни текст, причем пробел в расчет не принимается. Естественно, вид ячеек различается только в том случае, если вокруг них установлена граница. При использовании невидимой рамки, вид ячеек, независимо от того, есть в них что-нибудь или нет, совпадает.

    Старые браузеры не отображали цвет фона пустых ячеек вида

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

К счастью эпоха однопиксельных рисунков и всяческих распорок на их основе прошла. Браузеры достаточно корректно работают с таблицами и без присутствия содержимого ячеек.

Объединение ячеек

Предположим, что нам потребовалось использовать объединение некоторых ячеек в таблице, как, например, показано ниже. Причем высота оранжевой и серой ячейки жестко задана и равна 30 пикселам.

Ячейка 1 Ячейка 2
Ячейка 3
Ячейка 4

Для наглядности код этой таблицы приведен в примере 4.

Пример 4. Таблица с объединенными ячейками

              

Ячейка 1 Ячейка 2
Ячейка 3

  

Ячейка 4

Хотя высота оранжевой ячейки вроде как указана фиксированной, она может произвольно меняться в зависимости от объема информации в других ячейках. Подобная неприятность замечена в некоторых браузерах, например, Internet Explorer 6.

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

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

Скорость загрузки таблицы

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

Исходя из этого факта, таблицы не используют для хранения большой информации (от 100 кБ). А чтобы ускорить загрузку табличного макета, его разбивают на отдельные таблицы или используют свойство table-layout, применение которого позволяет несколько повысить скорость отображения содержимого таблицы.