Заголовок таблицы
www-html.ru
Обычная версия
При большом количестве таблиц на странице каждой из них удобно задать заголовок,
содержащий название таблицы и ее описание. Для этой цели в ШТМЛ существует
специальный тег <CAPTION>, который устанавливает контент
и его положение относительно таблицы. Проще всего размещать контент по центру
таблицы сверху или снизу от нее, в остальных случаях браузеры по разному интерпретируют
параметры тега <CAPTION>, из-за чего результат получается
неодинаковый. По умолчанию заголовок помещается сверху таблицы по центру, его
ширина не превышает ширины таблицы и в случае длинного контента он автоматически
переносится на новую строку. Для изменения положения заголовка у тега <CAPTION> существует параметр
align, который может принимать следующие значения.
left — выравнивает заголовок по левоой стороне таблицы. Браузер Файер фох располагает контент сбоку от таблицы, Internet Эксплорер и Опера располагают заголовок сверху, выравнивая его по левоой стороне.
right — в браузере Internet Эксплорер и Опера
располагает заголовок сверху таблицы и выравнивает его по правой стороне таблицы.
Файер фох отображает
заголовок справа от таблицы.
center — заголовок располагается сверху таблицы
по ее центру. Такое расположение задано в браузерах по умолчанию.
top — результат аналогичен действию параметра
center, но в отличие от него входит в спецификацию
ШТМЛ 4 и понимается всеми браузерами.
bottom — заголовок размещается внизу таблицы
по ее центру.
Как видно из описания, получить универсальный код, одинаково работающий в
разных браузерах, в случае расположения заголовка по правому или левому краю,
довольно проблематично. В этом случае нам на помощь придут стили и в частности
атрибут text-align. Его задача — заставить
контент выравниваться по нужному краю. В примере 1 показано, как установить
заголовок сверху таблицы и выровнять по ее правому краю. Обратите внимание,
что тег <CAPTION> находится внутри контейнера
<TABLE>, это его стандартное местоположение.
Пример 1. Создание заголовка таблицы с помощью тега <CAPTION>
<!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=utf-8">
<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> </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. Вид заголовка таблицы в браузере Опера
Удобство использования тега <CAPTION> состоит
в том, что заголовок созданный с его помощью оказывается привязанным к таблице
и не выходит за условные рамки, ограниченные ее шириной. Тем не менее, такого
же результата можно добиться и с помощью стилей, как показано ниже, в примере 2.
Пример 2. Создание заголовка таблицы с помощью стилей
<!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=utf-8">
<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>.
