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

Автор: Tarus Четверг, Апрель 5th, 2012 Нет комментариев

Рубрика: Уроки html

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

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

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

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

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

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

2 колонка

1 колонка

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

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

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

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

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

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

2 колонка

1 колонка

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

Чтобы разделитель был виден в Netscape, в ячейку нужно что-нибудь поместить. Неразделяемый пробел   для этой цели не годится, он может сделать линию слишком толстой, что нам не нужно. Самое идеальное — прозрачный рисунок размером 1 на 1 пиксел (в примере он называется 1×1.gif).

Если значение параметра cellpadding задать больше нуля, то линия получится слишком толстой. Поэтому расстояние между колонками следует менять с помощью cellspacing.

Создание вертикальных линий

Создаем таблицу, одна из ячеек которой имеет ширину 1-2 пиксела. Параметры cellpadding и border должны быть равны нулю, а cellspacing определяет расстояние от текста до линии. А затем в этой ячейке указываем фон нужного цвета:

Чтобы линия была видна в Netscape, в ячейку нужно поместить прозрачный рисунок размером 1 на 1 пиксел.

Пример 3. Вертикальная линия

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

<td width=2 bgcolor=#990000>

Этим же самым способом можно воспользоваться для создания не сплошных, а декоративных линий, только вместо параметра bgcolor используем background.

Центрирование по вертикали

Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположен рисунок или flash-заставка, выражающие главную идею сайта. Это изображение также является и ссылкой на остальные разделы сайта. Задача — разместить такой рисунок по центру окна браузера вне зависимости от разрешения монитора. Добавление нескольких тегов BR перед рисунком является неверным, поскольку при изменении разрешения или размера шрифта изменится и положение изображения. Правильное решение следующее. Необходимо поместить рисунок, центрированный по горизонтали, внутрь таблицы со 100% шириной и высотой.

Пример 4. Центрирование рисунка по вертикали

Рецепты HTML

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

Автор: Влад Мержевич
E-mail: vlad@htmlbook.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты