Ниже описаны некоторые широко используемые приемы использования таблиц.
Создание колонок
Колонки легко делаются с помощью таблицы с двумя ячейками. Надо только задать параметр 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, чтобы в колонках все было выровнено по верхнему краю.
Если значение параметра cellpadding
задать больше нуля, то линия получится слишком толстой. Поэтому
расстояние между колонками следует менять с помощью cellspacing.
Создание вертикальных линий
Создаем таблицу, одна из ячеек которой имеет ширину 1-2
пиксела. Параметры cellpadding и
border должны быть равны нулю, а
cellspacing определяет расстояние от текста до линии. А затем
в этой ячейке указываем фон нужного цвета: <td width=1 bgcolor=#ff0000>
Чтобы линия была видна в Netscape, в ячейку нужно поместить прозрачный
рисунок размером 1 на 1 пиксел.
<tr>
<td width=2 bgcolor=#990000><img src=1x1.gif width=2 height=1></td>
<td>Пакуйте всю свою огромную страницу в одну единственную таблицу. Этим Вы добьетесь не только шикарного форматирования с элегантными краями страницы, но и позволите посетителю посвятить себя занятию какой-нибудь важной деятельности, поскольку содержание таблицы будет показано только тогда, когда вся табличная информация загрузится. Если же речь идет о больших страницах, равно как и о больших
таблицах, ободренный Вами посетитель наконец-то протрет свой экран монитора от грязи, которую очень хорошо видно на пустом, матового цвета экране. </td>
</tr>
</table>
Этим же самым способом можно воспользоваться для создания не
сплошных, а декоративных линий, только вместо параметра bgcolor
используем background.
Центрирование по вертикали
Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположен рисунок или flash-заставка, выражающие главную идею сайта. Это изображение также является и ссылкой на остальные разделы сайта. Задача — разместить такой рисунок по центру окна браузера вне зависимости от разрешения монитора. Добавление нескольких тегов BR перед рисунком является неверным, поскольку при изменении разрешения или размера шрифта изменится и положение изображения. Правильное решение следующее. Необходимо поместить рисунок, центрированный по горизонтали, внутрь таблицы со 100% шириной и высотой, как показано в примере 4.
Пример 4. Центрирование рисунка по вертикали<tr>
<td align=center>
<img src="images/title.gif" width="413" height="100" alt="Рецепты HTML">
</td>
</tr>
</table>
По вертикали ячейку можно не центрировать, это положение задается по умолчанию.