Учебник по HTML и CSS

HTML

CSS

Статьи

Полезное


Статьи

Основы HTML
Текст
Изображения
Ссылки
Списки
Таблицы
Формы
Фреймы
Основы CSS
Рецепты CSS
Оформление таблиц
Основы верстки
Табличная верстка
Верстка с помощью слоев
Использование слоев
Примеры верстки слоями

Заголовок таблицы

При большом количестве таблиц на странице каждой из них удобно задать заголовок, содержащий название таблицы и ее описание. Для этой цели в HTML существует специальный тег <CAPTION>, который устанавливает текст и его положение относительно таблицы. Проще всего размещать текст по центру таблицы сверху или снизу от нее, в остальных случаях браузеры по разному интерпретируют параметры тега <CAPTION>, из-за чего результат получается неодинаковый. По умолчанию заголовок помещается сверху таблицы по центру, его ширина не превышает ширины таблицы и в случае длинного текста он автоматически переносится на новую строку. Для изменения положения заголовка у тега <CAPTION> существует параметр align, который может принимать следующие значения.

left — выравнивает заголовок по левому краю таблицы. Браузер Firefox располагает текст сбоку от таблицы, Internet Explorer и Opera располагают заголовок сверху, выравнивая его по левому краю.
right — в браузере Internet Explorer и Opera располагает заголовок сверху таблицы и выравнивает его по правому краю таблицы. Firefox отображает заголовок справа от таблицы.
center — заголовок располагается сверху таблицы по ее центру. Такое расположение задано в браузерах по умолчанию.
top — результат аналогичен действию параметра center, но в отличие от него входит в спецификацию HTML 4 и понимается всеми браузерами.
bottom — заголовок размещается внизу таблицы по ее центру.

Как видно из описания, получить универсальный код, одинаково работающий в разных браузерах, в случае расположения заголовка по правому или левому краю, довольно проблематично. В этом случае нам на помощь придут стили и в частности атрибут text-align. Его задача — заставить текст выравниваться по нужному краю. В примере 1 показано, как установить заголовок сверху таблицы и выровнять по ее правому краю. Обратите внимание, что тег <CAPTION> находится внутри контейнера <TABLE>, это его стандартное местоположение.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
CAPTION {
text-align: right; /* Выравнивание по правому краю */
font-style: italic /* Курсивный текст */
}
</style>
</head>
<body>
<table width="70%" border="1" cellpadding="4" cellspacing="0" align="center">
<caption>Изменение добычи ресурсов по годам</caption>
<tr>
 <th>&nbsp;</th><th>2003</th><th>2004</th><th>2005</th>
</tr>
<tr>
 <td>Нефть</td><td>43</td><td>51</td><td>79</td>
</tr>
<tr>
 <td>Золото</td><td>29</td><td>34</td><td>48</td>
</tr>
<tr>
 <td>Дерево</td><td>38</td><td>57</td><td>36</td>
</tr>
</table>
</body>
</html>

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

Изменение добычи ресурсов по годам
  2003 2004 2005
Нефть 43 51 79
Золото 29 34 48
Дерево 38 57 36


Удобство использования тега <CAPTION> состоит в том, что заголовок созданный с его помощью оказывается привязанным к таблице и не выходит за условные рамки, ограниченные ее шириной. Тем не менее, такого же результата можно добиться и с помощью стилей, как показано ниже, в примере 2.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
.caption {
margin: 0px 15%; /* Отступы сверху и сбоку от текста */
padding-bottom: 4px; /* Поле под текстом */
text-align: right; /* Выравнивание по правому краю */
font-style: italic /* Курсивный текст */
}
</style>
</head>
<body>
<p align="center" class="caption">Изменение добычи ресурсов по годам</p>
<table width="70%" border="1" cellpadding="4" cellspacing="0" align="center">
...
</table>
</body>
</html>

В данном примере создается новый класс с именем caption, который применяется к параграфу (тегу <P>). В данном случае таблица выравнивается по центру веб-страницы, поэтому то же самое должно произойти и с параграфом. Для этой цели добавляются отступы слева и справа через параметр margin. Ширину при этом явно не указываем, она получается вычитанием из общей ширины окна (100%) удвоенного отступа слева (в примере 15%). Таким образом выходит, что ширина текстового блока совпадает с шириной таблицы. В случае использования в качестве единиц измерения пикселы, рекомендуется воспользоваться тегом <CAPTION>.





На главную









  • При использовании материалов сайта ссылка на comnew.ru обязательна!