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