Таблицы могут использоваться не только для добавления колонок или выравнивания элементов веб-страницы, но и для создания различных дизайнерских изысков вроде декоративной рамки или тени. Благодаря наличию множества параметров, как у самой таблицы, так и у ее ячеек, с помощью сочетания таблиц и рисунков можно формировать практически любые декоративные элементы. Причем их легко можно приспосабливать под любой макет, поскольку ширину таблицы можно устанавливать и в процентах и в пикселах.
Для создания желаемой рамки ее вначале следует нарисовать в каком-нибудь графическом редакторе. Хотя конечная ширина рамки на веб-странице может варьироваться в больших пределах, например, в случае использования резинового макета, размер уголков остается постоянным. Поэтому при создании изображения следует в первую очередь ориентироваться именно на уголки. Так, на рис. 1 показана рамка со скругленными углами.
Рис. 1. Прямоугольная рамка с закругленными углами
Теперь изображение рамки разрезаем на девять фрагментов, которые помечены на рис. 2 оранжевыми линиями и номерами. Для разрезания рисунка существуют специализированные программы вроде Adobe ImageReady или Photoshop. Ширину и высоту фрагментов надо брать с тем прицелом, чтобы учесть отступы от нарисованной границы до содержимого рамки. Представьте на месте пятого фрагмента любой текст и решите для себя, насколько близко располагается он к границе.
Замечание
Вообще-то отступы от текста до рамки не обязательно регулировать с помощью ширины рисунков, можно воспользоваться стилевым свойством padding, применяя его к ячейке с содержимым.
Рис. 2. Изображение, разрезанное на элементы
После разрезания рисунка на части получим девять фрагментов, но в итоге нам понадобится из них только восемь из-за того, что средняя часть с номером 5 не нужна, поскольку ее заменит содержимое рамки, текст, например.
Фрагменты 2 и 8 имеют слишком большую ширину, поэтому их можно несколько обрезать. Аналогично дело обстоит и с фрагментами 4 и 6, только их сокращаем по высоте. В результате получим восемь графических изображений представленных в табл. 1.
| Рисунок | Положение | Имя файла |
|---|---|---|
 |
Левый верний угол | 01.gif |
 |
Верхняя горизонтальная линия | 02.gif |
 |
Правый верхний угол | 03.gif |
 |
Левая вертикальная линия | 04.gif |
 |
Правая вертикальная линия | 06.gif |
 |
Левый нижний угол | 07.gif |
 |
Нижняя горизонтальная линия | 08.gif |
 |
Правый нижний угол | 09.gif |
После создания нужных фрагментов формируем таблицу размером 3х3 ячейки, как показано на рис. 3.
Рис. 3. Таблица для создания рамки
Ширина самой таблицы может задаваться как в пикселах, так и процентах, от этого в итоге зависит размер рамки. А вот ширина и высота крайних ячеек должна совпадать с размерами соответствующих рисунков — уголков, вертикальных и горизонтальных линий и устанавливаться в пикселах. Также в этой таблице параметры border, cellspacing и cellpadding должны быть равны нулю, иначе линии не будут состыковываться между собой (пример 1).
Пример 1. Создание декоративной рамки
В данном примере ширина всей таблицы составляет 400 пикселов, а ширина и высота отдельных ячеек равна высоте расположенных в них рисунков. Уголки вставляются как обычные рисунки с помощью тега <IMG>, а вот горизонтальные и вертикальные линии задаются с помощью фона ячейки (параметр background). Это позволяет делать нашу рамку масштабируемой, тогда ее размер будет меняться в зависимости от содержимого. Иными словами, при замене width="400" на width="100%", рамка будет отображаться по-прежнему корректно.
Замечание
Не обязательно указывать ширину всех ячеек в колонке, достаточно задать ширину первой ячейки и нижерасположенные ячейки будут подстраиваться под нее.
Приведенный способ позволяет создавать рамки практически любого вида.
Добавление тени к изображению или блоку текста происходит практически аналогично созданию декоративной рамки. Вначале готовим исходную картинку с тенью (рис. 4), а затем посредством разрезания превращаем ее в набор фрагментов, которые необходимо распределить по ячейкам таблицы.
Рис. 4. Исходное изображение тени
В конечном итоге понадобится пять изображений, которые представлены в табл. 2.
| Рисунок | Положение | Имя файла |
|---|---|---|
 |
Вертикальная тень | 01.gif |
 |
Горизонтальная тень | 02.gif |
 |
Правый нижний уголок тени | 03.gif |
 |
Правая верхняя заглушка | 04.gif |
 |
Левая нижняя заглушка | 05.gif |
Заглушки необходимы для того, чтобы тень имела сглаженные края и выглядела законченной.
Теперь создаем таблицу размером 2х2 ячейки (рис. 5), общая ширина у нее устанавливается по желанию, а ширина правой колонки должна равняться ширине рисунка с тенью (01.gif). Высота нижних ячеек таблицы также должна совпадать с высотой рисунка тени (02.gif).
Рис. 5. Таблица для создания тени
Чтобы легко масштабировать блок с тенью, рисунки устанавливаются в виде фона с помощью параметра background тега <TD> (пример 2).
Пример 2. Создание тени
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<style
type="text/css">
#content {
padding: 5px; /*
Поля вокруг текста */
background: #dd9; /*
Цвет фона */
}
</style>
</head>
<body>
<table width="200" cellspacing="0"
cellpadding="0">
<tr>
<td
id="content">Великаны должны быть или большие, или их должно быть много, если
они маленькие.</td>
<td width="9" valign="top" background="01.gif"><img src="04.gif"
width="9"
height="10"></td>
</tr>
<tr>
<td
height="9" background="02.gif"><img src="05.gif" width="10"
height="9"></td>
<td><img src="03.gif"
width="9"
height="9"></td>
</tr>
</table>
</body>
</html>
Обратите внимание, что в данном примере выравнивание в правой верхней ячейке задается по верхнему краю через атрибут valign. Без этого действия соответствующая заглушка для тени не будет располагаться в нужном месте.
Результат данного примера показан на рис. 6.
Рис. 6. Добавление тени к блоку текста
Автор:Влад Мержевич