Помощь web-мастеру

[ Таблицы ]

[ Статьи ]

Графические распорки

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

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

Итак, есть 3 способа задания размера элементов таблицы.

Рекомендательный - вы указываете желательную ширину ячеек или таблицы в целом, а браузер пытается выполнить ваши рекомендации, если этому не мешает содержимое таблицы. Этот способ имеет смысл использовать для задания общей ширины и высоты таблицы. Причем внутренний размер (распорки + границы + расстояния между ячейками) должен в точности равняться внешнему (заданному для таблицы). Без такого сочетания задание рекомендательных размеров смысла не имеет. Однако есть еще одна причина явного задания атрибутов width и height для таблицы и всех ее частей. Дело в том, что при загрузке страницы браузер сможет отобразить таблицу лишь после того, как сможет рассчитать размер каждой ячейки в соответствии с содержимым. То есть, пока не придет информация о размерах всех изображений (из атрибутов или собственно файла изображения) и не загрузится все текстовое содержимое таблицы, пользователь будет видеть перед собой пустой экран. Поэтому рекомендуется указывать все (абсолютно все - иначе это не будет иметь смысла) размеры элементов и ее содержимого.

"Резиновый" - вы указываете размер ячеек в процентах от текущего размера окна браузера. Этот способ удобен тем, что таблица подстраивается под размер окна браузера пользователя, т.е. под установленное разрешение монитора. Использование только "резиновой" верстки подходит лишь для полностью текстовых веб-страниц, поскольку использование графики часто предусматривает точное позиционирование (с точностью до пиксела). Однако, "резиновой" может быть не вся таблица, а только ее часть, чаще всего в процентах задаются размеры текстовых блоков и полей. Положительный эффект "резинового" задания размеров каркаса страницы заключается в том, что при любом разрешении экрана у пользователя и любом размере окна браузера страница будет сохранять пропорции, заданные автором. На этом все плюсы заканчиваются. К минусам можно отнести невозможность и нефиксированный размер ячеек с изображениями.

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

На самом деле автору веб-страниц при создании табличного каркаса страницы приходится сочетать все 3 способа задания размеров.

Удачи!