| Главная » Статьи » HTML » Таблицы |
При большом количестве таблиц на странице каждой из них удобно задать заголовок, содержащий название таблицы и ее описание. Для этой цели в HTML существует специальный тег <CAPTION>, который устанавливает текст и его положение относительно таблицы. Проще всего размещать текст по центру таблицы сверху или снизу от нее, в остальных случаях браузеры по разному интерпретируют параметры тега <CAPTION>, из-за чего результат получается неодинаковый. По умолчанию заголовок помещается сверху таблицы по центру, его ширина не превышает ширины таблицы и в случае длинного текста он автоматически переносится на новую строку. Для изменения положения заголовка у тега <CAPTION> существует параметр align, который может принимать следующие значения. left — выравнивает заголовок по левому
краю таблицы. Браузер Firefox располагает текст сбоку от таблицы,
Internet Explorer и Opera располагают заголовок сверху, выравнивая его
по левому краю. Как видно из описания, получить универсальный код, одинаково работающий в разных браузерах, в случае расположения заголовка по правому или левому краю, довольно проблематично. В этом случае нам на помощь придут стили и в частности атрибут 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>. | |
| Просмотров: 2058 | |
| Всего комментариев: 0 | |