HTML Manual

Рис. 12.6. Таблица с объединенными ячейками

В данной таблице установлено восемь колонок и три строки. Часть ячеек с надписями «Internet Explorer» , «Opera» и «Firefox» объединены где по две, а где и по три ячейки. В ячейке с надписью «Браузер» применено объединение по вертикали.

Вложенные таблицы

Объединение ячеек имеет некоторые недостатки, поэтому этот метод создания таблиц нельзя использовать повсеместно. Для примера рассмотрим пример 12.5, где задается высота ячейки с помощью атрибута height.

</body>

</html>

Результат данного примера показан на рис. 12.7.

Рис. 12.7. Высота ячеек в браузере Opera 9

Левая нижняя ячейка согласно коду HTML имеет высоту 40 пикселов, но поскольку высота содержимого правой колонки больше, чем содержимое левой колонки, то высота ячейки меняется. Получается, что атрибут height в данном случае игнорируется. Заметим, что данная особенность проявляется только в браузере Opera, но и другие браузеры могут отображать сложные таблицы с ошибками. Это часто выражается в тех таблицах, где явно устанавливается высота ячеек и их объединение по вертикали. Для упрощения верстки применяется прием с вложенными таблицами.

Суть идеи проста — в ячейку вкладывается еще одна таблица со своими параметрами. Поскольку эти таблицы в каком-то смысле независимы, то можно создавать довольно причудливые конструкции. Чтобы вложенная таблица занимала всю ширину ячейки, таблице надо задать ширину 100%.

В примере 12.6 показан пример использования вложенных таблиц для создания двух колонок и навигации.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Вложенные таблицы</title>

</head>

<body>

<table width="100%" border="0" cellpadding="5" cellspacing="0">

<tr>

<td width="150" valign="top" bgcolor="#f0f0f0"> <table width="100%" cellpadding="2" cellspacing="1"> <tr><td bgcolor="#ffffff">Lorem</td></tr>

<tr><td bgcolor="#ffffff">Ipsum</td></tr> <tr><td bgcolor="#ffffff">Dolor</td></tr> <tr><td bgcolor="#ffffff">Sit</td></tr> <tr><td bgcolor="#ffffff">Amet</td></tr>

</table>

</td>

<td valign="top" bgcolor="#ffffee">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea

</tr> commodo consequat. </td>

</table>

</body>

</html>

Результат данного примера показан на рис. 12.8.

Рис. 12.8. Вид вложенных таблиц

В данном макете с помощью таблицы создается две колонки, причем левая колонка имеет фиксированную ширину 150 пикселов. Чтобы создать подобие навигации, внутрь ячейки добавлена еще одна таблица с шириной 100%.

Как видно из рис. 12.8, если не задавать границы, то определить наличие таблиц по виду веб-страницы довольно сложно. По этой причине таблицы до сих пор активно применяются для верстки сложных макетов.

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

При большом количестве таблиц на странице каждой из них удобно задать заголовок, содержащий название таблицы и ее описание. Для этой цели в HTML существует специальный тег <caption>, который устанавливает текст и его положение

относительно таблицы. Проще всего размещать текст по центру таблицы сверху или снизу от нее, в остальных случаях браузеры по разному интерпретируют атрибуты тега <caption>, из-за чего результат получается неодинаковый. По

умолчанию заголовок помещается сверху таблицы по центру, его ширина не превышает ширины таблицы и в случае длинного текста он автоматически переносится на новую строку. Для изменения положения заголовка у тега <caption>

существует атрибут align, который может принимать следующие значения.

left — выравнивает заголовок по левому краю таблицы. Браузер Firefox располагает текст сбоку от таблицы, Internet Explorer и Opera располагают заголовок сверху, выравнивая его по левому краю.

right — в браузере Internet Explorer и Opera располагает заголовок сверху таблицы и выравнивает его по правому краю таблицы. Firefox отображает заголовок справа от таблицы.

center — заголовок располагается сверху таблицы по ее центру. Такое расположение задано в браузерах по умолчанию.

top — результат аналогичен действию атрибута center, но в отличие от него входит в спецификацию HTML 4 и понимается всеми браузерами.

bottom — заголовок размещается внизу таблицы по ее центру.

В примере 12.7 показано, как установить заголовок сверху таблицы. Обратите внимание, что тег <caption> находится внутри контейнера <table>, это его стандартное местоположение.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Заголовок таблицы</title>

</head>

<body>

<table width="100%" 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>

Ниже показан результат данного примера (рис. 12.9).

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

Фреймы

Фреймы разделяют окно браузера на отдельные области, расположенные рядом друг с другом. В каждую из таких областей загружается самостоятельная веб-страница. Поскольку вокруг фреймов существует много разговоров об их необходимости, далее приведем достоинства и недостатки фреймов, чтобы можно было самостоятельно решить стоит ли их использовать на своем сайте.

Достоинства фреймов

Простота

С помощью фреймов веб-страница разграничивается на две области, которые содержат навигацию по сайту и его контент. Механизм фреймов позволяет открывать документ в одном фрейме, по ссылке, нажатой в совершенно другом фрейме. Такое разделение веб-страницы на составляющие интуитивно понятно и логически обусловлено.

Быстрота

Для верстки без фреймов характерно размещение на одной странице и навигации и содержания. Это увеличивает объем каждой страницы и в сумме может существенно повлиять на объем загружаемой с сайта информации. А так как фреймы используют разделение информации на части, страницы с ними будут загружаться быстрее.

Размещение

Фреймы предоставляют уникальную возможность — размещение информации точно в нужном месте окна браузера. Так, можно поместить фрейм внизу браузера и независимо от прокручивания содержимого, эта область не изменит своего положения.

Изменение размеров областей

Можно изменять размеры фреймов «на лету», чего не позволяет сделать традиционная верстка HTML.

Загрузка

Загрузка веб-страницы происходит только в указанное окно, остальные остаются неизменными. С помощью языка JavaScript можно осуществить одновременную загрузку двух и более страниц во фреймы.

Недостатки фреймов

Навигация

Пользователь зачастую оказывается на сайте, совершенно не представляя, куда он попал, потому что всего лишь нажал на ссылку, полученную в поисковой системе. Чтобы посетителю сайта было проще разобраться, где он находится, на каждую страницу помещают название сайта, заголовок страницы и навигацию. Фреймы, как правило, нарушают данный принцип, отделяя заголовок сайта от содержания, а навигацию от контента. Представьте, что вы нашли подходящую ссылку в поисковой системе, нажимаете на нее, а в итоге открывается документ без названия и навигации. Чтобы понять, где мы находимся или посмотреть другие материалы, придется редактировать путь в адресной строке, что в любом случае доставляет неудобство.

Плохая индексация поисковыми системами

Поисковые системы плохо работают с фреймовой структурой, поскольку на страницах, которые содержат контент, нет ссылок на другие документы.

Внутренние страницы нельзя добавить в «Закладки»

Фреймы скрывают адрес страницы, на которой находится посетитель, и всегда показывают только адрес сайта. По этой причине понравившуюся страницу сложно поместить в закладки браузера.

Несовместимость с разными браузерами

Параметры фреймов обладают свойством совершенно по разному отображаться в различных браузерах. Причем противоречие между ними настолько явное, что одни и те же параметры интерпретируются браузерами совершенно посвоему.

Непрестижность

Весьма странный недостаток, который не имеет никакого отношения к техническим особенностям создания сайта, а носит скорее идеологический характер. Сайты с фреймами считаются несолидными, а их авторы сразу выпадают из разряда профессионалов, которые никогда не используют фреймы в своих работах. Исключение составляют чаты, где без фреймов обойтись хотя можно, но достаточно хитрыми методами, а с помощью фреймов создавать чаты достаточно просто.

Надо отметить, что некоторые приведенные недостатки вполне обходятся. Так, с помощью скриптов можно сделать, что открытый в браузере отдельный документ формируется со всех фреймовой структурой. Поисковые системы также уже лучше индексируют фреймовые документы, чем это было несколько лет назад.

<!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=utf-8"> <title>Содержание сайта</title>

</head>

<body> <p>СОДЕРЖАНИЕ</p>

</body>

</html>

Рассмотрим более сложный пример уже с тремя фреймами (рис. 13.2).

Рис. 13.2. Разделение страницы на три фрейма

В данном случае опять используется тег <frameset>, но два раза, причем один тег вкладывается в другой. Горизонтальное разбиение создается через атрибут rows, где для разнообразия применяется процентная запись (пример 13.4).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Фреймы</title>

</head>

<frameset rows="25%,75%">

<frame src="top.html" name="TOP" scrolling="no" noresize> <frameset cols="100,*">

<frame src="menu.html" name="MENU"> <frame src="content.html" name="CONTENT">

</frameset>

</frameset>

</html>

Как видно из данного примера, контейнер <frameset> с атрибутом rows вначале создает два горизонтальных фрейма, но вместо второго фрейма подставляется еще один <frameset>, который повторяет уже известную вам структуру из

примера 13.1. Чтобы не появилась вертикальная полоса прокрутки, и пользователь не мог самостоятельно изменить размер верхнего фрейма, добавлены атрибуты scrolling="no" и noresize.

Ссылки во фреймах

В обычном HTML-документе при переходе по ссылке, в окне браузера текущий документ заменяется новым. При использовании фреймов схема загрузки документов отличается от стандартной. Основное отличие — возможность загружать документ в выбранный фрейм из другого. Для этой цели используется атрибут target тега <a>. В качестве значения используется имя фрейма, в который будет загружаться документ, указанный атрибутом name (пример 13.5).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Фреймы</title>

</head>

<frameset cols="100,*">

<frame src="menu2.html" name="MENU"> <frame src="content.html" name="CONTENT">

</frameset>

</html>

В приведенном примере фрейму присваивается имя CONTENT. Чтобы документ загружался в указанный фрейм, используется конструкция target="CONTENT", как показано в примере 13.6.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Навигация по сайту</title>

</head>

<body style="background: #f0f0f0"> <p>МЕНЮ</p>

<p><a href="text.html" target="CONTENT">Текст</a></p>

</body>

</html>

Имя фрейма должно начинаться на цифру или латинскую букву. В качестве зарезервированных имен используются следующие:

_blank — загружает документ в новое окно; _self — загружает документ в текущий фрейм;

_parent — загружает документ во фрейм, занимаемый родителем, если фрейма-родителя нет значение действует также, как _top;

_top — отменяет все фреймы и загружает документ в полное окно браузера.

Границы между фреймами

Граница между фреймами отображается по умолчанию и, как правило, в виде трехмерной линии. Чтобы ее скрыть используется атрибут frameborder тега <frameset> со значением 0. Однако в браузере Opera граница хоть и становится в

этом случае бледной, все же остается. Для этого браузера требуется добавить framespacing="0". Таким образом, комбинируя разные атрибуты тега <frameset>, получим универсальный код, который работает во всех браузерах. Линия

при этом показываться никак не будет (пример 13.6).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Фреймы</title>

</head>

<frameset cols="100,*" frameborder="0" framespacing="0"> <frame src="menu.html" name="MENU">

<frame src="content.html" name="CONTENT">

</frameset>

</html>

Учтите, что атрибуты frameborder и framespacing не являются валидными и не соответствуют спецификации HTML.

Если граница между фреймами все же нужна, в браузере она рисуется по умолчанию, без задания каких-либо атрибутов. Можно, также, задать цвет рамки с помощью атрибута bordercolor, который может применяться в тегах <frameset> и

<frame>. Цвет указывается по его названию или шестнадцатеричному значению (пример 13.7), а толщина линии управляется атрибутом border. Браузер Opera игнорирует этот атрибут и обычно отображает линию черного цвета.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Фреймы</title>

</head>

<frameset cols="100,*" bordercolor="#000080" border="5"> <frame src="menu.html" name="MENU">

<frame src="content.html" name="CONTENT">

</frameset>

</html>

Атрибуты bordercolor и border тега <frameset> также не являются валидными и не признаются спецификацией HTML.

В данном примере линия между фреймами задается синего цвета толщиной пять пикселов. Линии различается по своему виду в разных браузерах, несмотря на одинаковые параметры (рис. 13.3).

Internet Explorer Opera Firefox

Рис. 13.3. Вид границы между фреймами в разных браузерах

Браузер Opera никак не изменяет цвет границы между фреймами, Internet Explorer устанавливает широкую границу практически сплошного цвета, а Firefox границу отображает в виде набора линий.