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

Commodo consequat. Duis te feugifacilisi. Ut wisi enim ad minim veniam, quis

Nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex

en commodo consequat.</td>

</tr>

<tr>

<td height="40">Lorem ipsum</td>

</tr>

</table>

</body>

</html>

Пример 1.5. Явно заданная высота ячейки

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

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

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

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

В примере 1.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

commodo consequat.</td>

</tr>

</table>

</body>

</html>

Пример 12.6. Вложенные таблиц

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

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

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

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

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

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

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

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

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

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

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

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

В примере 1.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>