Рассылка закрыта
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
Рецепты HTML # 138
| Информационный Канал Subscribe.Ru |
  |
 Помощь по сайту |
   |
|
 |
 |
Добрый день
На сайте очередное пополнение в разделе Теги HTML, постепенно описания всех тегов встают на свои места, и до конца года раздел будет завершен.
Сегодня свежая статья, связанная с таблицами, а также ответы на вопросы читателей. Все ответы иллюстрированы примерами, чтобы понятно было о чем идет речь, а также, чтобы любой из них можно было применить на практике. Свои вопросы присылайте по адресу vlad@htmlbook.ru, интересные появятся в следующих выпусках, а на все остальные отвечу лично.
Адрес статьи "Заголовок таблицы" на сайте: www.htmlbook.ru/content/229.html
Заголовок таблицы
При большом количестве таблиц на странице каждой из них удобно задать заголовок, содержащий название таблицы и ее описание. Для этой цели в 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<style type="text/css">
CAPTION {
text-align: right; /* Выравнивание по правому краю */
font-style: italic /* Курсивный текст */
}
</style>
<title>Заголовок таблицы</title>
<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.
<style type="text/css">
.caption {
margin: 0px 15%; /* Отступы сверху и сбоку от текста */
padding-bottom:x 4px; /* Поле под текстом */
text-align: right; /* Выравнивание по правому краю */
font-style: italic /* Курсивный текст */
}
</style>
<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.
Вопросы и ответы
Для чего применяется однопиксельный рисунок?
Область применения одноцветных однопиксельных рисунков: создание горизонтальных и вертикальных линий, а также прямоугольников любых форм и размеров.
В примере 1 показано использование такого рисунка для создания трех горизонтальных линий разной толщины и шириной 100 процентов.
Пример 1. Создание горизонтальной линии<img src=red1x1.gif width=100% height=3 vspace=5><br>
<img src=red1x1.gif width=100% height=1 vspace=5>
Файл red1x1.gif представляет собой точку красного цвета, которая растягивается с помощью параметров width и height. Расстояние между рисунками определяется параметром vspace, без него линии бы слились в один сплошной прямоугольник.
Наряду с цветными однопиксельными рисунками применение нашел и рисунок с прозрачным фоном. Конечно, никакие изображения он не делает, их просто не будет видно, но можно его использовать для контроля пустого пространства. Такие элементы принято называть распоркой. Область применения распорок достаточно велика — от контроля размеров таблиц до создания отступов в тексте. Надо признать, что актуальность распорок в настоящее время невысока в связи с развитием средств CSS. Тем не менее, вот задачи, которые решаются с помощью прозрачного однопиксельного рисунка:
Отступ первой строки
Вертикальные и горизонтальные линии
Изменение расстояния между объектами на веб-странице
"Склейка" фрагментов рисунка
Что такое наследование свойств стилей?
Наследование — это перенос правил форматирования для элементов, находящихся внутри других. Например, для параграфа P задано форматирование, а для курсива I, который находится внутри параграфа, нет. В этом случае вложенный элемент наследует свойства родительского элемента.
Пример 2. Наследование селекторов<head>
<style type="text/css">
P { text-align: justify; color: orange }
B { font-weight: bold; color: navy }
</style>
</head>
<body>
После осмотра визуальными методами своего рабочего места <i>можно осторожно включить питание</i> <b>ЭВМ</b>.</p>
</body>
</html>
В примере используются разные параметры форматирования для тегов P и B. Как бы вы эти теги не сочетали друг с другом, вид их, заданный в стиле, не изменится. Другое дело тег курсива I. В стиле он не указан, поэтому некоторые свойства, такие как цвет, он наследует от тега параграфа, внутри которого находится.
Как сделать, чтобы перед просмотром страницы вывести посетителю предупреждение, в то время как ее содержимое продолжает загружаться?
df
Пример 3. Предварительная загрузка данных
<head>
<style>
#warning {
padding: 7px; background: #fc0;
border: solid 2px black;
position: absolute;
left: 50%; top: 50%;
width: 400px; height: 200px;
margin-left: -200px; margin-top: -100px;
font-family: sans-serif;
font-size: 90%;
}
#content {
visibility: hidden;
}
</style>
<script language="JavaScript">
function fnNoAnswer() {
document.getElementById("warning").style.visibility = "hidden"
document.getElementById("content").style.visibility = "visible"
}
function fnYesAnswer() {
document.write("Хе-хе, пытались обмануть нас. Не выйдет! Нет тебе еще 18
лет, подрасти маленько, прежде чем заходить на этот сайт.")
}
</script>
</head>
<body>
<div id=warning>
<p>Данный сайт предназначен для лиц, достигших 18-летней отметки в возрастной
линии. Короче, есть тебе 18 лет или нет?!
<p>Так как каждый придурок может ответить "Да", давай вначале
проверим, действительно ли это так.
<p>Итак, правда ли, что Я.Л.Ф. Мендельсон, который написал известный Свадебный
марш, никогда не был женат?
<p align=center><a href="javascript: fnYesAnswer()">Да</a>
| <a href="javascript: fnNoAnswer()">Нет</a>
</div>
<div id=content>
Основное содержание первой страницы...
</div>
</body>
</html>
Copyright © 2002 - 2004 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru
Материалы сайта охраняются законом об авторском праве. Ни одну статью нельзя воспроизводить или использовать в какой бы то ни было форме, для каких бы то ни было целей или какими бы то ни было средствами без письменного разрешения автора.
| http://subscribe.ru/
http://subscribe.ru/feedback/ |
Подписан адрес: Код этой рассылки: inet.webbuild.htmlbook |
Отписаться |
| В избранное | ||
