Табличная вёрстка

Табличная вёрстка.

Таблицы,
которые первоначально проектировались как средство представления
двумерных массивов данных, сейчас используются в основном как
инструмент для точного позиционирования контента на веб-странице.
Стандарт HTML не предусматривает возможности расположить картинки и
текст относительно друг друга с приемлемой точностью, а табличная
вёрстка, при которой различные части контента помещаются в разные
ячейки таблиц, способна решить эту проблему. Кроме того, табличная
вёрстка очень полезна при проектировании сайтов с большим количеством
графических элементов: в больших рисунках почти всегда можно выделить
области, закрашенные одним и тем же цветом, которые можно выбросить,
заменив на пустые ячейки с соответствующим фоном и сэкономив таким
образом на общем «весе» графики и времени загрузки страниц. Это,
конечно же, не единственное преимущество упомянутого способа вёрстки. К
недостатками же его можно отнести тот факт, что некоторые браузеры (не
будем показывать пальцем) не в состоянии отобразить на экране уже
загруженные части помещённого в таблицу контента до тех пор, пока не
загрузится вся таблица целиком. Они же (упомянутые браузеры) почему-то
очень медленно работают со вложенными таблицами. А потому скажем
дружно, что Нетскейп есть не что иное как дрянь, мерзость и порождение
Сатаны. Несогласных попрошу удалиться.

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

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

И вот картинка подготовлена,
оптимизирована и прописана в параметре background. Счастливый
разработчик решает для проверки запустить Нетскейп, чтобы убедиться,
так ли всё прекрасно выглядит, как уверял Internet Explorer. Не тут-то
было!

Проблема заключается в том, при просмотре страницы в
разных браузерах ячейки по-разному наследуют фон таблицы. Internet
Explorer рассматривает каждый контейнер <TD>... </TD> как
прозрачный по отношению к общему фону (если ему не сказали поступать
иначе) и никак не изменяет внешний вид фонового изображения. А вот
Нетскейп считает фон каждой ячейки независимым от табличного и
прорисовывает его столько раз, сколько имеется ячеек. Понятно, что
ничего хорошего из этого не выходит.

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