|
Заголовок таблицы
При большом количестве таблиц на странице каждой из них удобно задать
заголовок, содержащий название таблицы и ее описание. Для этой цели в HTML
существует специальный тег <CAPTION>, который
устанавливает текст и его положение относительно таблицы. Проще всего размещать
текст по центру таблицы сверху или снизу от нее, в остальных случаях браузеры по
разному интерпретируют параметры тега <CAPTION>,
из-за чего результат получается неодинаковый. По умолчанию заголовок помещается
сверху таблицы по центру, его ширина не превышает ширины таблицы и в случае
длинного текста он автоматически переносится на новую строку. Для изменения
положения заголовка существует параметр align,
который может принимать следующие значения.
left — выравнивает заголовок по левому краю
таблицы. Аргумент работает только в браузерах Internet Explorer и Opera 7,
Netscape пренебрегает этим параметром и устанавливает текст по центру.
right — в браузере Internet Explorer и Opera 7 располагает
заголовок сверху таблицы и выравнивает его по правому краю таблицы. В браузере
Netscape параметр игнорируется, а Opera версии 6 и ниже отображает заголовок
справа от таблицы.
center — заголовок
располагается сверху таблицы по ее центру. Такое расположение задано в браузерах
по умолчанию.
top — результат аналогичен действию
параметра center, но в отличие от него входит в
спецификацию HTML 4 и понимается всеми браузерами.
bottom — заголовок размещается внизу таблицы по ее
центру.
Как видно из описания, получить универсальный код, одинаково работающий в
разных браузерах, в случае расположения заголовка по правому или левому краю,
довольно проблематично. В этом случае нам на помощь придут стили и в частности
атрибут text-align. Его задача — заставить текст
выравниваться по нужному краю. В примере 1 показано, как установить
заголовок сверху таблицы и выровнять по ее правому краю. Обратите внимание, что
тег <CAPTION> находится внутри контейнера <TABLE>, это его стандартное местоположение.
| Пример 1. Создание заголовка таблицы с помощью тега
<CAPTION> |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<style
type="text/css">
CAPTION {
text-align: right;
font-style: italic
}
</head>
</style>
<body>
<table width="70%" border="1"
cellpadding="4" cellspacing="0" align="center">
<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> |
Ниже показан результат примера. Заметьте, что заголовок выравнивается не
строго по правому краю таблицы, поскольку на него, как и на содержимое ячеек,
действует параметр cellpadding. Можно представить,
что заголовок это еще одна ячейка таблицы, на которую распространяются
характеристики cellpadding и cellspacing.
Изменение добычи
ресурсов по годам
| |
2003 |
2004 |
2005 |
| Нефть |
43 |
51 |
79 |
| Золото |
29 |
34 |
48 |
| Дерево |
38 |
57 |
36 |
Удобство использования тега <CAPTION> состоит в том, что заголовок созданный с его помощью оказывается привязанным к
таблице и не выходит за условные рамки, ограниченные ее шириной. Тем не менее,
такого же результата можно добиться и с помощью стилей, как показано ниже, в
примере 2.
Пример 2. Создание заголовка таблицы с помощью стилей |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<style
type="text/css">
.caption {
margin: 0px 15%;
padding-bottom:
4px;
text-align: right;
font-style:
italic
}
</style>
</head>
<body>
<p align="center" class="caption">Изменение добычи
ресурсов по годам</p>
<table width="70%" border="1" cellpadding="4"
cellspacing="0"
align="center">
...
</table>
</body>
</html> |
В примере 2 создается новый класс с именем caption, который применяется к параграфу (тегу <P>). В данном случае таблица выравнивается по центру
веб-страницы, поэтому то же самое должно произойти и с параграфом. Для этой цели
добавляются отступы слева и справа через параметр margin. Ширину при этом явно не указываем, она получается
вычитанием из общей ширины окна (100%) удвоенного отступа слева (в примере 15%).
Таким образом выходит, что ширина текстового блока совпадает с шириной таблицы.
В случае использования в качестве единиц измерения пикселы, рекомендуется
воспользоваться тегом <CAPTION>.
|
|
|
