Невидимые таблицы

Рассмотрим следующие, наиболее часто применяемые эффекты, реализуемые при помощи таблиц:

• Вёрстка текста в несколько колонок
• Цветные подложки под текст
• Рамка вокруг фрагмента текста
• Применение фоновых рисунков

Вёрстка текста в несколько колонок

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

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

Но для примера мы ограничимся простой вёрсткой в две колонки:

А вот и код для такой вёрстки:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">Здесь располагается текст левой колонки.</td>
<td>&nbsp;</td>
<td valign="top">Ну а здесь текст правой колонки.</td>
</tr>
</table>

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

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

Обратите внимание на атрибут valign="top", прописанный для ячеек, содержащих текст. Как правило, колонки редко бывают заполнены одинаковым объёмом текста и в этом случае одна колонка становится короче другой. И, чтобы текст в короткой колонке не уполз вниз, мы используем атрибут valign, который прижимает текст в колонках к верху ячейки.

Цветные подложки под текст

Вы наверняка видели на сайтах, что некоторые фрагменты текста располагаются на фоне, отличном от основного. Обычно это делается для "врезки" цитат или для выделения части текста, чтобы акцентировать на нём внимание. Такой эффект достигается за счёт таблицы с одной ячейкой:

<table border="0" cellpadding="10" cellspacing="0" bgcolor="#ffff99">
<tr>
<td>Здесь располагается фрагмент текста.</td>
</tr>
</table>

Цвет подложки мы можем задавать, используя атрибут bgcolor для таблицы. А чтобы текст на подложке не "прилипал" к границам, мы установим зазор при помощи атрибута cellpadding. Вот, в общем-то, и всё, что требуется. И результат будет выглядеть вот так:

Рамка вокруг фрагмента текста

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

<table width="368" cellpadding="0" cellspacing="0" border="0" bgcolor="#000000"><tr><td>
<table width="100%" cellpadding="10" cellspacing="1" border="0">
<tr>
<td bgcolor="#ffffff">Здесь располагается фрагмент текста</td>
</tr>
</table>
</td></tr></table>

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

Применение фоновых рисунков

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

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

В общем случае проблема заключается в том, как ячейки наследуют фон таблицы. Internet Explorer просто рассматривает ячейки как прозрачные по отношению к фону и никак не изменяет внешний вид фонового изображения. А вот Netscape Navigator рассматривает фон в каждой ячейке как совершенно независимый от фона таблицы и в каждой ячейке прорисовывает фон заново. Это приводит к тому, что фоновое изображение в таблице коверкается невероятным образом.

Для обхода этой особенности NN фоновые рисунки в таблице нужно помещать не напрямую, а используя вложенные таблицы. Причём во внешней (я выделил её зеленым цветом) прописывается адрес фоновой картинки, а во внутренней требуется в качестве фона указать пустой URL:

<table background="picture.gif" width="368" cellpadding="0" cellspacing="0" border="0"><tr><td>
<table background="" width="368" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
...
...
...
</table>
</td></tr></table>

Отсутствие атрибута background во внутренней таблице NN воспринимает таким странным образом, что отказывается показывать фон, указанный во внешней таблице. И единственный способ борьбы с этим - именно пустой URL.

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