Created using
htm2chm 3.0

Download it NOW!


Позиционирование. Таблицы

Самый простой механизм размещения материала сайта - это таблицы. Это самый распространенный и почти единственный инструмент позиционирования объектов веб-страницы. Обычно таблицу и используют исключительно для этих целей. Чаще всего с помощью таблиц составляют сложные композиции из отдельных рисунков.
Теперь поговорим о достоинствах и недостатках данного метода.
Самый, пожалуй, досадный недостаток в том, что величина полей таблицы не поддается точному контролю. Здесь приходят на помощь разные ухищрения - распорки, вставка рисунков где иногда они бывают не к месту. И еще, браузер не отобразит таблицу с ее содержимым до тех пор, пока не будут известны размеры всех полей таблицы. Тоесть, если в конце таблицы будет содержаться рисунок, а перед ним объемный текст, пользователь будет ждать загрузки всей таблицы до тех пор, пока не будет загружено начало последнего рисунка (в том случае если в теге <IMG SRC=. . .> не определены атрибуты width и height), что может вызвать вполне обоснованное раздражение пользователя. Поэтому в рисунках всегда указывайте атрибуты width и height в теге <IMG SRC=. . .>.
Когда вы используете таблицу исключительно для текста, при этом важное условие (посмотрите любую газету) чтобы все столбцы были одинаковой ширины, иначе отклонения будут восприниматься как дефект, так казалось бы нет ничего проще: в теге <TABLE> задаете атрибут width=100%, а в каждом теге <TD> - width=33% для трех столбцов. Но это не всегда срабатывает: что, если в каком-либо столбце содержится слишком длинное слово? При уменьшении размера окна размеры столбцов начнут меняться, причем не равномерно. Чтобы этого не произошло используют распорки из прозрачных GIF-ов с атрибутами width="фиксированное значение" и height=1. В таком случае при уменьшении окна появится горизонтальная прокрутка. Нежелательный элемент? А кто пользователя заставляет минимизировать окно? Также распорки применяют и для позиционирования по вертикали внутри столбца.
Если некоторые ячейки объединены, как в этом примере, - объединенные ячейки должны иметь фиксированный размер в сторону объединения, иными словами браузер "не знает" какие из соседних ячеек растягивать. Для этого в тегах <TD> задаются атрибуты width и height. При использовании объединения ячеек приходится фиксировать размеры в теге <TABLE>. Это не всегда удобно, так как появляется вероятность возникновения горизонтальной прокрутки, что часто не желательно, но что делать... Можно выйти из этой проблемы только пожалуй вложенными таблицами. Эта страница - немного иной случай, здесь изображено множество ячеек в 1 пиксел, залитых цветом, - так изображены линейки. Линейки, конечно можно изобразить используя соответствующие графические бэкграунды в каждой ячейке, но я умышленно пошел по более сложному пути и, кстати не совсем правильному. Поэтому могу дать единственный совет: не сращивайте ячейки атрибутами ROWSPAN и COLSPAN - это только добавит проблем, лучше используйте вложенные таблицы если уж никак не обойтись. Исключение может составить только позиционирование составных изображений.
Есть и еще не маловажная проблема: например на этой странице пользователь может менять размер шрифта в своем браузере, а также и сам шрифт, хотя я специально использовал тег <FONT FACE . . . , вот только стоит изменить размер шрифта, как сразу все изменится не в лучшую сторону.
Что можно еще сказать о таблицах? Вероятно этого краткого обзора будет и достаточно для того, чтобы выяснить особые моменты при проектировании веб-страниц с использованием таблиц. Синтаксис и спецификацию я не привожу, так как этот инструмент достаточно распространен, да и просто мы здесь не рассматриваем технических приемов, - имеются другие разделы.

Это у нас правая сторона. Она заполняется обычно баннерами 100х100, картинками. Но главное, что здесь с помощью распорок придется делать дистанцию между блоками текста и рисунками, которые должны быть приблизительно одинакового размера и чередоваться с блоками текста.
Эта колонка уже других не случайно, она является элементом динамики: в статичной странице имеется только одна динамика - движение глаз пользователя слева-направо. Положительное восприятие будет оказано на подсознательном уровне когда взгляд будет стартовать от более тяжелого объекта к более легкому. По этой же аналогии существует и любой заголовок, только в движении сверху вниз.
Ссылка 1
Ссылка 2
Ссылка 3
Ссылка 4
Ссылка 5
Ссылка 6

Здесь может находиться эксклюзивная информация, новости, ссылки на архив новостей, кнопки каталогов и рейтинговых систем