Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

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

Alex | 16.03.2014 | нет комментариев

При большом количестве таблиц на странице каждой из них удобно задать заголовок, содержащий название таблицы и ее описание. Для этой цели в 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//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>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

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

Удобство использования тега <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=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>Изменение добычи ресурсов по годам</p>
<table width=”70%” border=”1″ cellpadding=”4″ cellspacing=”0″>
<tr><td>…</td></tr>
</table>
</body>
</html>

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

АВТОРСКИЕ ПРАВА
Источник: alldes.net
При перепечатке ссылка на источник обязательна
Оставить комментарий
БАЗА ЗНАНИЙ
СЛУЧАЙНАЯ СТАТЬЯ
СЛУЧАЙНЫЙ БЛОГ
СЛУЧАЙНЫЙ МОД
СЛУЧАЙНЫЙ СКИН
НОВЫЕ МОДЫ
НОВЫЕ СКИНЫ
НАКОПЛЕННЫЙ ОПЫТ
Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2017 © BB3x.ru - русская поддержка форума phpBB