Заголовок таблицы
При большом количестве таблиц на странице каждой из них удобно задать заголовок, содержащий название таблицы и ее описание. Для этой цели в 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>
<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> </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>
Ниже показан результат примера (рис. 1). Заметьте, что заголовок выравнивается не строго по правому краю таблицы, поскольку на него, как и на содержимое ячеек, действует параметр cellpadding. Можно представить, что заголовок это еще одна ячейка таблицы, на которую распространяются характеристики cellpadding и cellspacing.
Рис. 1. Вид заголовка таблицы в браузере Opera
Удобство использования тега <CAPTION> состоит в том, что заголовок созданный с его помощью оказывается привязанным к таблице и не выходит за условные рамки, ограниченные ее шириной. Тем не менее, такого же результата можно добиться и с помощью стилей, как показано ниже, в примере 2.
Пример 2. Создание заголовка таблицы с помощью стилей
<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>). В данном случае таблица выравнивается по центру веб-страницы, поэтому то же самое должно произойти и с параграфом. Для этой цели добавляются отступы слева и справа через параметр margin. Ширину при этом явно не указываем, она получается вычитанием из общей ширины окна (100%) удвоенного отступа слева (в примере 15%). Таким образом выходит, что ширина текстового блока совпадает с шириной таблицы. В случае использования в качестве единиц измерения пикселы, рекомендуется воспользоваться тегом <CAPTION>.
| Статья опубликована: 12.09.2005 | Последнее обновление: 14.04.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
Эдуард
27.01.2007
Влад Мержевич
01.03.2007