Использование таблиц

    Использование таблиц с невидимой границей для разделения страницы на блоки - довольно мощный прием для верстки веб-страниц, который нашел применение в большинстве сайтов.

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

    Ниже описаны некоторые широко используемые приемы использования таблиц.

---

    Создание колонок

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

    Пример 1. Создание двух колонок с помощью таблицы:

<table border=0 cellpadding=10 cellspacing=0> <tr> <td valign=top>1 колонка</td> <td valign=top>2 колонка</td> </tr> </table>

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

    Какой параметр выбрать - cellpadding или cellspacing зависит от вкуса и желания. В данном случае абсолютно никакой разницы нет.

---

    Колонки с разделителями

    Две и более колонки позволяют разбить длинный текст или другое содержимое на блоки. Такие блоки разделяют между собой вертикальной линией, чтобы взгляд читателя не перескакивал с одной колонки на другую.

    Колонки с разделителем создаются с помощью таблицы с тремя ячейками. Среднюю ячейку делаем шириной 1-2 пиксела и заливаем каким-нибудь цветом с помощью bgcolor - вот и получится линия. А параметр cellspacing определяет расстояние между линией и текстом.

    Пример 2. Создание двух колонок с линией между ними:

<table border=0 cellpadding=0 cellspacing=10> <tr> <td valign=top>1 колонка</td> <td width=1 bgcolor=#000000><img src=1x1.gif width=1 height=1></td> <td valign=top>2 колонка</td> </tr> </table>

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