Статьи / Веб-Дизайн / Маленькие проблемы больших таблиц - HTML

  2008-11-04 12:53

Все вы знаете, что для верстки Web-страниц очень
удобно использовать таблицы. С их помощью можно, например, с
точностью до пикселя указать ширину рабочего поля страницы
или отойти от «линейной» структуры страниц («навязываемой»
стандартными средствами HTML) и применять верстку в
несколько колонок. Тем не менее злоупотреблять таблицами
нельзя.



Главная проблема таблиц в том, что они не могут загружаться
в браузер пользователя последовательно, строка за строкой.
Это вполне закономерно: чтобы нарисовать, например, первую
строку таблицы, браузер должен сначала загрузить все
последующие строки и ячейки, так как от их размеров зависит
вид первой и всех остальных ячеек. Как следствие — пока вся
таблица не загрузится в память компьютера пользователя, она
не показывается на экране. В результате страница визуально
(то есть по ощущениям пользователя) грузится очень долго. И,
скорее всего, пользователю быстро надоест смотреть на пустой
экран и он уйдет с вашего сайта куда-то еще.



Как же можно решить проблему больших таблиц?



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



Во-вторых, можно разбить большую таблицу на несколько малых,
расположенных друг за другом. Решение это теоретически очень
простое, но на практике часто трудно реализуемое. Например,
если вы используете верстку в несколько колонок, и при этом
в одной из них расположен достаточно большой текст (скажем,
текст статьи), то, скорее всего, вы сможете выделить в
отдельную страницу только лишь логотип сайта и рекламный
баннер. Основной же текст придется поместить в большую
таблицу. Я еще не встречал исключений из этого правила, и
текст статей на Pro.Net.ru (в том числе и эта заметка)
заключен именно в большую таблицу.



А вот если основной текст страницы состоит из нескольких
отдельных частей, то здесь можно будет разбить таблицу на
соответствующее количество малых таблиц. За примером далеко
ходить не нужно — посмотрите, например, на главную страницу
Pro.Net.ru. Она состоит из четырех таблиц (Заголовок/баннер,
Что нового/Добро пожаловать, О сайте/Часть I,
Внимание/Нижние баннеры). В то же время оформление страницы
таково, что у пользователя все равно остается ощущение, что
он имеет дело с двумя монолитными колонками. Главным образом
это происходит потому, что левая колонка (с серым фоном)
тянется почти через всю страницу, не прерываясь. Если бы я
убрал темную границу между ячейками, это ощущуение
услилилось бы еще больше.



Если вы режете большую таблицу на несколько малых, то
обратите внимание на то, чтобы количество строк в главной
колонке таблицы было не меньше, чем в крайней колонке (или
колонках). Иначе в главной колонке будут образовываться
неприятные для глаза «белые пятна». С большой степенью
уверенности можно контролировать количество строк текста в
колонке только в том случае, если и главная, и
второстепенные колонки будут иметь фиксированную ширину (то
есть значение атрибута WIDTH= будет указано не в процентах,
а в пикселях). Если же постоянную ширину будет иметь только
второстепенная колонка, а ширина главной будет зависеть от
ширины окна браузера, то при переходе к высоким разрешениям
(1024x768 пикселей и выше) текст будет вытягиваться в
длинные строки, а общее количество строк будет, естественно,
становиться все меньше и меньше, в то время как во
второстепенной колонке число строк текста будет постоянным.
А для того, чтобы текст во второстепенной колонке
гарантированно был по высоте меньше, чем в главной,
уменьшите размер шрифта текста в ней. Например, для текста в
левой колонке главной страницы Pro.Net.ru значение атрибута
SIZE тега <FONT> равно -1.



Для тех сайтов, где наибольшее значение имеет именно текст в
основной колонке, имеет смысл отказаться от многоколоночной
структуры страницы вообще. Например, прежний дизайн для
сайта SoftList.ru был сделан на основе всего одной колонки,
и каждая страница состоит из множества одноколоночных таблиц
шириной в 700 пикселей, загружающихся последовательно (и
очень быстро!). Квадратные баннеры RB2 и текстовые рекламные
блоки TX3 переместились в самый конец страниц, и — правильно
— заключены в отдельные таблицы. Конечно, такой подход вряд
ли будет применим при разработке дизайна для онлайн газеты
или журнала — по традиции список рубрик электронных СМИ
располагается как раз в узкой колонке справа или слева от
основного текста.