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

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

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

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

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

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

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

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Заголовок таблицы</title>
<style type="text/CSS (ЦСС)">
TABLE {
 margin: 0 auto; /* Выравниваем таблицу по центру */
}
CAPTION {
text-align: right; /* Выравнивание по правой стороне */
font-style: italic; /* Курсивный контент */
}
</style>
</head>
<body>
<table width="80%" border="1" cellpadding="4" cellspacing="0">
<caption>Изменение добычи ресурсов по годам</caption>
<tr>
 <th>&nbsp;</th><th>2003</th><th>2004</th><th>2009</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>

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

Рис. 1

Рис. 1. Вид заголовка таблицы в браузере Опера

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

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

Валидный HTML
Валидный CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Заголовок таблицы</title>
<style type="text/CSS (ЦСС)">
TABLE {
 margin: 0 auto; /* Выравниваем таблицу по центру */
}
.caption {
margin: 0 15%; /* Отступы сверху и сбоку от контента */
padding-bottom: 4px; /* Поле под контентом */
text-align: right; /* Выравнивание по правой стороне */
font-style: italic; /* Курсивный контент */
}
</style>
</head>
<body>
<p class="caption">Изменение добычи ресурсов по годам</p>
<table width="70%" border="1" cellpadding="4" cellspacing="0">
<tr><td>...</td></tr>
</table>
</body>
</html>

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

Статья опубликована: 12.09.2009 Последнее обновление: 14.04.2009
Поиск по сайту
Таблицы
Разделы
Теги по теме

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

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

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

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

font-style
Определяет начертание шрифта — обычное, курсивное или наклонное. Когда для контента установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер использует специальный алгоритм для имитации нужного вида контента.

margin
Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента.

padding-bottom
Устанавливает значение поля от нижнего края содержимого элемента.

text-align
Определяет горизонтальное выравнивание контента в пределах элемента.

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

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