www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > Табличная верстка > Применение таблиц

Применение таблиц

контентовая версия  

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

Создание декоративной рамки

Для разработки желаемой рамки ее вначале следует нарисовать в каком-нибудь графическом редакторе. Хотя конечная ширина рамки на web-странице может варьироваться в больших пределах, например, в случае использования резинового макета, размер уголков остается постоянным. Поэтому при создании Имаги следует в первую очередь ориентироваться именно на уголки. Так, на рис. 1 показана рамка со скругленными углами.

Рис. 1. Прямоугольная рамка с закругленными углами

Теперь изображение рамки разрезаем на девять фрагментов, которые помечены на рис. 2 оранжевыми линиями и номерами. Для разрезания рисунка существуют специализированные программы вроде Adobe ImageReady или Photoshop. Ширину и высоту фрагментов надо брать с тем прицелом, чтобы учесть отступы от нарисованной границы до содержимого рамки. Представьте на месте пятого фрагмента любой контент и решите для себя, насколько близко располагается он к границе.

Замечание

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

Рис. 2. Изображение, разрезанное на элементы

После разрезания рисунка на части получим девять фрагментов, но в итоге нам понадобится из них только восемь из-за того, что средняя часть с номером 5 не нужна, поскольку ее заменит содержимое рамки, контент, например.

Фрагменты 2 и 8 имеют слишком большую ширину, поэтому их можно несколько обрезать. Аналогично дело обстоит и с фрагментами 4 и 6, только их сокращаем по высоте. В результате получим восемь графических рисунков представленных в табл. 1.

Табл. 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. Создание декоративной рамки

Валидный HTML
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Рамка</title>
<style type="text/CSS (ЦСС)">
#content {
 padding: 5px; /* Поля вокруг содержимого */
}
</style>
</head>
<body>
<table width="400" border="0" cellspacing="0" cellpadding="0">
 <tr>
  <td height="13" width="12"><img src="01.gif" width="12" height="13" alt=""></td>
  <td style="background: url(02.gif)" height="13"></td>
  <td height="13" width="14"><img src="03.gif" width="14" height="13" alt=""></td>
 </tr>
 <tr>
  <td style="background: url(04.gif)"></td>
  <td id="content">Содержимое</td>
  <td style="background: url(06.gif)"></td>
 </tr>
 <tr>
  <td height="13"><img src="07.gif" height="13" alt=""></td>
  <td style="background: url(08.gif)"></td>
  <td height="13"><img src="09.gif" height="13" alt=""></td>
 </tr>
</table>
</body>
</html>

В данном примере ширина всей таблицы составляет 400 пикселов, а ширина и высота отдельных ячеек равна высоте расположенных в них рисунков. Уголки вставляются как обычные рисунки с помощью тега <IMG>, а вот горизонтальные и вертикальные линии задаются с помощью фона (стилевой параметр background). Это позволяет делать нашу рамку масштабируемой, тогда ее размер будет меняться в зависимости от содержимого. Иными словами, при замене width="400" на width="100%", рамка будет отображаться по-прежнему корректно.

Замечание

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

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

Добавление тени

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

Рис. 4. Исходное изображение тени

В конечном итоге понадобится пять рисунков, которые представлены в табл. 2.

Табл. 2. Рисунки, необходимые для разработки тени
Рисунок Положение Имя файла
Вертикальная тень 01.gif
Горизонтальная тень 02.gif
Правый нижний уголок тени 03.gif
Правая верхняя заглушка 04.gif
Левая нижняя заглушка 05.gif

Заглушки необходимы для того, чтобы тень имела сглаженные края и выглядела законченной.

Теперь создаем таблицу размером 2х2 ячейки (рис. 5), общая ширина у нее устанавливается по желанию, а ширина правой колонки должна равняться ширине рисунка с тенью (01.gif). Высота нижних ячеек таблицы также должна совпадать с высотой рисунка тени (02.gif).

Рис. 5. Таблица для разработки тени

Чтобы легко масштабировать блок с тенью, рисунки устанавливаются в виде фона с помощью параметра background тега <TD> (пример 2).

Пример 2. Создание тени

Валидный HTML

<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тень</title>
<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" style="background: url(01.gif)"><img src="04.gif" width="9" height="10" alt=""></td>
 </tr>
 <tr>
  <td height="9" style="background: url(02.gif)"><img src="05.gif" width="10" height="9" alt=""></td>
  <td><img src="03.gif" width="9" height="9" alt=""></td>
 </tr>
</table>

</body>
</html>

Обратите внимание, что в данном примере выравнивание в правой верхней ячейке задается по верхнему краю через атрибут valign. Без этого действия соответствующая заглушка для тени не будет располагаться в нужном месте.

Результат данного примера показан на рис. 6.

Рис. 6. Добавление тени к блоку контента

Статья опубликована: 14.01.2009 Последнее обновление: 30.04.2009
Поиск по сайту
Табличная верстка
Разделы
Теги по теме

IMG
Тег IMG предназначен для отображения на web-странице рисунков в графическом формате GIF, JPEG или PNG.

TABLE
Элемент TABLE служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов TR и TD.

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

CSS (ЦСС) по теме

background
Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту.

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

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект