Web дизайн\Учебник по HTML

Глава 9. Оформление и дополнительные элементы таблиц

• Теория табличного дизайна
  • Изображения в таблицах
  • Вложенные таблицы
• Группировка строк и столбцов
  • Группировка строк таблицы
  • Группировка столбцов таблицы
• Рамки и линии
• Примеры оформления страниц на основе таблиц
  • Таблица, ориентированная на работу со стоками
  • Сконцентрируемся на столбцах
• Резюме

В главе 8 вы изучили основы построения таблиц и узнали, как размещать информацию в строках и столбцах. Очевидно, что это было только начало, что таблицы -это гораздо более мощное средство. В этой главе вы узнаете об одном широко распростра ненном применении таблиц, а именно о форматировании с их помощью целых страниц. Использование тегов таблиц дает возможность управлять внешним видом веб-страниц, включая контроль над размещением абзацев, над интерфейсом (имеются в виду гиперссылки) и даже над изображениями. Вы узнаете из этой главы:

• основы дизайна веб-страниц на основе таблиц;
• создание разделов страницы, установка ширины и высоты таблицы, управле ние границей;
• примеры табличного дизайна в разных типах страниц.

Теория табличного дизайна

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

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

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

<table border»"1" cellpadding="5">
<!-- Верхнее меню -->
<tr>
<td colspan="2" align="center">
<a href="index.html ">Главная страница</а>
<a href="homes.html">Продается дом!</а> 
<a href="info.html'>Информация для покупателей</а> 
<a href="rates.html ">Ставки по закладным</а> 
< a href="contact.html ">Контактная информация</а>
</tr>
        

<!-- Основной раздел -->
<tr>
<td rowspan="2" valign="top"> 
<h1>Домик в деревне</h1>
<p>Традиционное жилье настоящего англичанина. 
В нем есть все. что нужно джентльмену 
(его семье: современное итальянское освещение и берберские ковры.
Вы можете создать любое настроение в этом домике:
от светелки или домашнего офиса до берлоги холостяка. 
За забором, показанным на рисунке, скрывается чудная 
площадка для игры в бадминтон или крокет,
а также небольшая лужайка и садик с дорожками, бегущими 
в густой тени деревьев.
Адрес: ул. Ленина. 325. $129 000.</p></td> 
<td>
<img src="house2.jpg" width=250 аlt="Экстерьер дома"  />
</td>
</tr>
       

 <tr>
<td> |<img src="fall1.jpg" width="250" аlt="Сад  во дворе" />
</td>
</tr> 
</table>

На рисунке 9.1 можно посмотреть, как этот HTML-код выглядит в браузере.

Рис. 9.1. Страница, использующая простую таблицу для разделения элементов

ПРИМЕЧАНИЕ

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

Рассмотрим процесс создания таблицы, приведенной в примере.

1. Мы начали со стандартного элемента <table>, вернее, с его открывающего тега. В нем мы определили ширину границы и установили клеточный отступ.

2. Затем мы перешли к созданию первой строки, состоящей из единственной ячейки, растянутой на две колонки. Внутрь нее мы поместили знаки разметки, текст и якоря со ссылками на другие страницы сайта.

3. После завершения работы над ячейкой и, соответственно, всей строкой, мы пе решли к следующей строке. На этот раз в ней оказалось два элемента <td>, то есть два столбца. (Именно поэтому мы и растянули в предыдущей строке ячейку на две единицы по горизонтали.)

4. В первую ячейку ввели текст. Если требуется, чтобы в ней было больше одного абзаца, то лучше всего использовать стандартные контейнеры <р>.

5. Во второй ячейке мы разместили элемент <img />, то есть там у нас появилась картинка. (Помните, что размер изображения в этом случае будет определять размер всего столбца, а значит, повлияет и на размер второго столбца.)

6. Наконец, надо не забыть закрыть строку и всю таблицу.

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

Надеюсь, вам стало понятно, что такое табличный дизайн. Это интерфейс, с которым приятно работать. Но давайте немного вернемся назад и посмотрим, как совместить два известных нам подхода.

Изображения в таблицах

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

 <table border=1 cellspacing=2 cellpadding=2 width="100%>
<tr>
<td colspan="2">
<h1>Список домов, выставленных на продажу</h1>
</td>
</tr>
<tr>
<td>
<р>Традиционное жилье настоящего англичанина.
В нем есть все что нужно джентльмену и его
семье: современное итальянское освещение и
берберские ковры. Вы можете создать любое
настроение в этом домике: от светелки или домашнего офиса
до берлоги холостяка. За забором, показанным на рисунке, 
скрывается чудная площадка для игры в бадминтон или крокет,
а также небольшая лужайка и садик с дорожками,
бегущими в густой тени деревьев.
Адрес: ул Ленина 325. $129 000</р>
</td>
<td> 
<img src="325main.png" аlt="Фасад дома" />
</td> 
</tr>
<td> 
<p> Вы больше нигде не встретите таких предложений 
за такую скромную сумму! Пройдя через ворота (с забавным 
дистанционным управлением), попадаете в прекрасный домик.
Внутри вы увидите, формально говоря, спальню и гостиную,
на первом этаже - игровую комнату. (Идеально подходит для 
создания домашнего (кино)театра). В подвал ведет витая
лесенка, тмись покоторой вы попадаете в собственную
мини-прачечную. Здесь же в подвале можно хранить бабушкины 
сундуки и приданое ваших дочерей до лучших времен.
Наконец, в доме лестница, по которой можно прокрасться
ночью на кухню и стащить кусочек маминого пирога.
Ну и еще по территории вашего сада протекает прекрасный 
прохладный ручей, на берегу которого можно назначать свидания! 
 Адрес: Ленинская тропа 19Е Цена : $ 1279 000</р>
</td>
<td> 
<img src="brook.png" аlt="Журчащий ручей" /><bг />
</td>
</tr> 
</table> 

На рисунке 9.2 показано, как все это выглядит. Обратите внимание на то, как просто помощью таблицы совмещать текст и изображения.

Рис. 9.2. Таблицы помогают разместить наиболее удачным образом изображения и текст

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

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

Для начала вспомним, что таблица может иметь ширину .Об этом говорилось в главе 8. Допустим, вы хотите, чтобы конкретная ячейка имела определенную ширину. Скажем, одна из двух ячеек, по вашей задумке, будет занимать 25% страницы, а другая — 75%. Меньшая из них, например, может использоваться для жебных целей (организации навигации по сайту и т. п.). Большая — для текста, который вы хотите разместить на странице. На рисунке 9.3 показана таблица, ко торая как раз удовлетворяет такому описанию.

Это все можно сделать с помощью атрибута width элемента <td>. Например:<td width="75%">. Вроде бы очень просто? Да, но, увы, это не XHTML Strict. Но еcли вы следуете требованиям переходного DTD, то все будет нормально.

Но существует еще одно решение — вложенная таблица. Поскольку атрибут width вполне легально может быть включен в элемент <table>, то в одну из ячеек можно поместить таблицу и установить ее ширину. Коду из листинга 9.1 соответствует рис. 9.3.

ПРИМЕЧАНИЕ

Если вы устанавливаете межклеточное расстояние или клеточный отступ, то имейте в виду, что эти параметры влияют на ширину всего столбца, который включает в себя вложенную таблицу. Например, за счет 3-пиксельного клеточного отступа 150-пиксельный столбец пре вратится в 156-пиксельный. Другими словами, чтобы не промахнуться с размерами, нужно немного посчитать или же отказаться от использования этих атрибутов.

Листинг 9.1. Вложенные таблицы

 <table width="100%' cellpadding="0" cellspacing="0">
<tr>
<td>
        <table width="150" cellpadding="3">
        <tr>
        <td>разметка для левой стороны</td>
        </tr>
        </table> 
</td>
 <td>
        <table cellpadding="5">
        <tr>
        <td>Разметка для правой стороны</td>
        </tr>
        </table>
</td>

</tr>
</table>

Рис. 9.3. В этой таблице с помощью width установлена ширина ячеек

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

СОВЕТ

Как показано в примере, для упрощения ориентации в собственной таблице полезно использовать дополнительные пробелы и пустые строки, отделяя одни элементы от других Это действительно немаловажное замечание, поскольку, если вы забудете где-нибудь поставить </td>, </tr> или </table>, то в браузере вы увидите нечто совершенно непохожее на то, что вы задумывали.

Мы познакомились с тем, как сделать самую простую вложенную таблицу. Но как бы ей добавить функциональности? Например, сделать так, чтобы можно было управлять форматированием внутри ячейки? Вот как может выглядеть таблица, если в листинге 9.1 заменить левую вложенную таблицу на следующую:

<table width="150" cellpadding="2" border="1">
<tr bgcolor="yellow"><td>Cписок домов</td></tr>
<tr><td> 129k, 3/2 Домик Малыша<br/>
139k 4/2, Домик Карлсона<br />
142k 4/2 Высокогорье<br />
159k 4/2/2 Крюгер<br />
179k 5/2/5 Крюгер<br />
229k 5/3/2 Лаура<br />
</td></tr>
<tr bgcolor="yellow"><Звоните: 654.3567 </td></tr>
</table>

На рисунке 9.4 показано, как выглядит эта таблица на самом деле. (Я сделал каждый элемент списка гиперссылкой, что не отражено в листинге. Думаю, для вас не составит большого труда внести эти изменения самостоятельно.) Всего лишь небольшая вложенная таблица позволяет сделать интерфейс более интересным.

Рис. 9.4. В левой части рисунка внутрь одной таблицы вложена другая

При создании вложенных таблиц не забывайте о существовании плавающих таблиц, которые можно расположить справа или слева с помощью атрибута аlign элемента <table>. Плавающие таблицы позволяют лучше организовать информацию. Текст «огибает» таблицу, а специальная разметка позволяет обратить внимание читателя на данные, содержащиеся в ней. Привожу листинг 9.2, в котором есть и плавающие, и вложенные таблицы.

Листинг 9.2. Добавление плавающей таблицы

<table width="100%" cellpadding="0" cellspacing="0">
<tr>

 <td>
        <table width="150" cellpadding="3">
        <tr>
        <td>Разметка для левой части</td>
        </tr>
        </table>
</td>

<td>
        <table cellpadding="5">
        <tr>
        <td>
        <!-- Плавающая таблица -->
 <table align="right" cellpadding="5"  width="200" border="1">
        <tr bgcolor="уеllow"><td>Ленинская тропа 19 E</td></tr>
        <tr><td><b>Цена:</b>$279 000</td></tr>
        <tr><td><b>Оценка:</b>$309 000</td></tr>
        <tr><td>Владелец переезжает и заинтересован в срочной продаже
        Звоните: 654 3456. Cпросить Aндрея</td></tr>
</table>

        <h1>Baшa собственная недвижимость !</h1>

<p> Вы больше нигде не встретите таких предложений за такую скромную
 сумму! Пройдя через ворота (с забавным дистанционным управлением), 
попадаетев прекрасный домик. Внутри вы увидите, 
формально говоря, спальню и гостиную,   на первом этаже - 
игровую комнату (идеально подходит для создания домашнего
 (кино)театра). В подвал ведет витая лесенка, спустившись 
по которой вы  попадаете в собственную мини-прачечную.
 
 Адрес: Ленинская тропа, 19Е. Цена: $279 000.</р>
        </td>
        </tr>
        </table>
</td>
</tr>
</table>

Помните, что плавающие таблицы создаются с помощью аlign= " right " или аlign= " left". Результат показан на рис 9.5.

Рис. 9.5. Вложенная таблица является плавающей, это приводит к интересному эффекту

Группировка строк и столбцов

До сих пор при рассмотрении таблиц вам встречались элементы разметки, которые относятся к текстам и изображениям. Однако не стоит забывать о еще кое-каких деталях, и вскоре вы поймете, что в сложных таблицах они важны. Спомо щью некоторых элементов, о которых пойдет речь далее, можно группировать строки, определяя отдельные части таблицы (а значит, в некоторых случаях и всей страницы). Другие элементы позволяют группировать и определять столбцы. Речь об этом пойдет в двух следующих параграфах

Группировка строк таблицы

Что такое группировка строк, понять нетрудно. С ее помощью можно опреде лять разделы таблицы примерно так же, как вы определяете разделы HTML-документа (заголовочная часть и тело, например). В данном случае используются следующие элементы: <thead>, <tfoot>, <tbody>. Идея состоит в том, чтобы объединить некоторые наборы строк в независимые части. Так, например, заголовок и нижняя часть могут оставаться неподвижными, в то время как средняя часть делается прокручиваемой. Или же часть строк может при печати выступать в качестве колонтитулов.

Все эти элементы, разумеется, являются контейнерами, и каждый из них предназначен для того, чтобы содержать определенный тип строк и данных. Имейте в виду, что потребность в <tr> не пропадает, более того, в каждом группирующем элементе должна быть хотя бы одна строка. Еще одно замечание: если вы собирае тесь включить в таблицу и <thead>, и <tfoot>, то, как ни странно, сначала нужно описывать <tfoot>. По крайней мере, до <tbody>, чтобы браузер знал, что присутствует основание таблицы, следующее за ее телом. Пример:

<table border="1">
<thead>
<tr>
<th colspan="2">Клиент</th><th> rowspan="3">Продажи 
по месяцам</th></tr>
<tr>
<th>Ceнтябрь</th><th>октябрь</th><th>Hoябрь</th>
</td>
</thead>
<tfoot>
<tr>
<td соlsраn="4">Источник: Комсомольская правда</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>AO Hикa</td><td>450 000</td><td>350 000</td><td>50 000</td>
</tr>
<tr>
<td>AOOT Eлизавета</td><td>345 000</td><td>230 000</td><td>12 400</td>
</tr>
<tr>
<td>m Eкатеринa</td><td>600 000</td><td>460 000</td><td>239 000</td>
</tr>
 ...еще строки
</tbody>
</table>

Рис. 9.6. Группировка строк — это важный инструмент для создания страниц на основе таблиц

Это очень простой пример, и к тому же в нем не очень много смысла. Вряд ли вы встретите где-то в Интернете страницу, на которой перечисляется огромное количество цифр статистики. Реально такой подход применяется в тех случаях, когда вы создаете страницу, целиком основанную на таблице, и хотите, чтобы ее верх и низ были зафиксированы, а средняя часть имела возможность прокрутки. (Конечно, следует помнить о том, что не нужно специально просить браузер де
лать отдельные строки фиксированным, это получится само собой.) Скажем, ввер ху можно поместить баннер, внизу — ссылочное меню, а посередине — основной прокручиваемый текст. Старые браузеры, не распознающие группировку строк, не будут отображать эти тонкости построения таблицы. Вот пример подобной таблицы:

<table cellpadding="5">
<thead> 
<tr><td> colspan="5"><img src="top_bannerpng"  аlt=
"Агентство недвижимости FlatLand" /></td>
</tr>
</thead>

<tfoot>
<tr> 
<td><a href="about.html">0 Hac</a></td> 
<td><a href="listings.html">Участки и fдома</a></td>
<td><a href="buyer.html">Брокерские ycлyrи</a></td>
<td><a href="seller.html ">Услуги по продаже недвижимости</а></td>
<td><a href= "mortgage, html">Информация по закладным</а></td>
</tr>
</tfoot>

        

<tbody>
<tr>
<td colspan="5">
<img src="fall1.jpg" w1dth="250" аlt="Сад" align="right" />
<h1>Домик в деревне</h1>
<р>Традиционное жилье настоящего англичанина.
В нем есть все что нужно джентльмену и его семье:
современное итальянское освещение и берберские ковры.
Вы можете создать любое настроение в этом домике:
от светелки или домашнего офиса до берлоги холостяка.

Адрес: ул Ленина, 325. $129 000</p></td>
</tr>
</tbody>
</table>

Во многих браузерах заголовок и основание появляются именно там, где нужнo независимо от тела таблицы. Это продемонстрировано на рис. 9.6.

Группировка столбцов таблицы

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

В этом параграфе мы будем иметь дело с двумя элементами: <colgroup> и <col>. <colgroup> используется для создания групп столбцов, которым можно присваивать определенные атрибуты. (В будущем браузеры, возможно, будут воспринимать группы столбцов таким образом, каким ни один из них не воспринимает сейчас.) Контейнер <col > позволяет присваивать свойства отдельным столбцам без группировки.

Атрибут span в элементе <colgroup> используется для определения числа столбцов конкретной группы.

Возьмем таблицу, состоящую из пяти столбцов. Рассмотрим пример разбиения еена две группы с помощью <colgroup> (рис. 9.7):

<table border="l" cellpadding="5">
<colgroup span="3" align="center"></colgroup>
<colgroup span="2" align="r1ght" width="100"></colgroup>
<tr><th>Количество</th><th>Идентификатор</th><th>Описание</th>
<th>Цена единицы</th><th>Стоимость</th></tr>
<tr><td>12</td><td>0876547</td><td>#4
барашковая raйкa</td>
<td>$1.00</td>
<td>$12.00</td></tr>
<tr><td>10</td><td>0876501</td><td>#4  шypyп</td>
<td>$1.50</td><td>$15.00</td></tr>
<tr><td>20</td><td>0887965</td><td>Молоток</td>
<td>$9.50</td><td>$190.00</td></tr>
<tr><td>5</td><td>0927125</td><td>Cтpoитeльный
пистолет</td>
<td>$4.00</td>
<td>$20.00</td></tr>
<tr><td>10</td><td>1034526</td><td>Пленка
декоративная</td>
<td>$2.00</td>
<td>$20.00</td></tr>
</table>

Элемент <colgroup> может иметь как атрибут align, так и valign, значения любых его атрибутов применяется ко всей группе столбцов. Группы должны определяться в самом начале, до определения первой строки. (А также до определения элементов <thead> или <tbody>.) Элемент <colgroup> может иметь также атрибут width, определяю щий ширину каждого столбца группы. Например, <colgroup span="4" width="10">в принудительном порядке устанавливает ширину каждого из 4 столбцов в 10 пикселов.

Рис. 9.7. Пример разбиения таблицы с помощью <colgroup>

ПРИМЕЧАНИЕ

Можно задавать и специальное значение атрибута width в элементах <colgroup> и <col>, а именно: width="0*". Это означает, что ширина столбца (или столбцов) будет определяться самой длинной записью в нем. То есть если есть в столбце (или в столбцах) строка, которая занимает 50 пикселов, то в соответствии с ней будет установлена ширина.

Элемент <col> используется внутри <colgroup> в том случае, если вы хотите определить характеристики отдельных столбцов внутри группы. Другими словами, если из группы нужно выделить один столбец, оформление которого должно отличатьcя от всех остальных, то следует использовать <col>. Рассмотрим пример с исполь-зованием данных, представленных на рис. 9.7:

<table border="1" cellpadding="5">
<colroup span="3" align="center">
<col width="50" /> 
<col span="2" width="100" />
</colgroup>
<colgroup span="2" width="100">
<col align»"center" /> 
</colgroup>="right" /> 
</colgroup>
<tr><th>Количество</th><th>Идентификатор</th><th>
Описание</th>
<th>Цена единицы</th><th>Cтоимость</th></tr>
<tr><td>12</td><td>0876547</td><td>#4 
барашковая гайка </td><td>$l 00</td>
<td>12.00</td></tr>
<tr><td>10</td><td>0876501</td><td>#4
шуруп</td>
<td>$1.50</td><td>$15.00</td></tr>
 <tr><td>20</td><td>0887965</td><td>Молоток</td>
<td>$9.50</td><td>$19000</td></tr>
<tr><td>5</td><td>0927125</td><td>Строительный
пистолет</td>
<td>$4.00</td>
<td>$20.00</td></tr>
<tr><td>10</td><td>1034526</td><td>Пленка
декоративная</td>
<td>$2.00</td>
<td>$20.00</td></tr>
</table>

В этом примере мы снова создали две группы столбцов, однако внутри каждой из них определили отдельные столбцы с собственным оформлением при помощи <col>. Так, в первой группе первая колонка отличается по ширине от всех остальных; во второй группе колонки имеют одинаковую ширину, однако отличаются выравниванием. Элемент <соl>может иметь все те же атрибуты, что и <colgroup>, включая span. Единственной разницей между ними является то, что первый элемент не определяет группу, а действует только на указанный столбец. Попытайтесь разобраться, как наличие элемента <соl> отразилось на внешнем виде таблицы (рис. 9.8).

Рис. 9.8. Пример использования <col> для установки атрибутов отдельных столбцов внутри группы. Обратите внимание на то, что ширина столбцов и тип выравнивания отличаются
от показанных на рис. 9.7

СОВЕТ

Как вы узнаете из главы 10, <col> не сильно отличается от других элементов, используемых для разметки страниц, таких как <span> и <div>. На самом деле вы, возможно, скоро будете использовать <col> в таблицах стилей.

Вообще-то, <colgroup> и <col> можно использовать не только для таблиц, содержащих данные, но и для полностраничных таблиц, используемых для оформления страниц. У вас появилась замечательная возможность с помощью довольно простых элементов управлять целыми столбцами, содержащими определенную разметку. Вот пример, созданный на основе предыдущего, демонстрирующего это:

<table border="1" cellspacing="2 cellpadding="2"   width="100%>

<colgroup>
<col width="500">
<col align="center">
</colgroup>
<tr>
<td colspan="2">

<h1>Список домов, выставленных на npoдажу></h1></td></tr>
<tr>
<td>
<р>Традиционное жилье настоящего англичанина.
В нем есть все. что нужно джентльмену и его семье:
современное итальянское освещение и берберские ковры.
Вы можете создать любое настроение в этом домике: 
от светелки или домашнего офиса до берлоги холостяка. 
За забором, показанном на рисунке, скрывается чудная площадка
для игры в бадминтон или крокет, а также небольшая лужайка 
и садик с дорожками, бегущими в густой тени деревьев.</р>
</td>
<td>
<img src="325main.png" alt="<t>Фасад дома" /><br />
<b> Адрес: ул. Ленина. 325. $129 000.</b> .
</td>
</tr>
<tr>
<td>
<р>Вы больше нигде не встретите таких предложений 
за такую скромную сумму! Пройдя через ворота (с забавным
дистанционным управлением), попадаете в прекрасный домик.
Внутри вы увидите, формально говоря, спальню и гостиную, 
на первом этаже - игровую комнату (идеально подходит для
создания домашнего (кино)театра). В подвал ведет витая лесенка,
спустившись по которой вы попадаете в собственную мини-прачечную.
Здесь же. в подвале, можно хранить бабушкины сундуки и приданое
ваших дочерей до лучших времен. </р>
</td>
<td>
<img src= "brook.png" аlt="Журчащий ручей" /><br  />
<b>Адрес: Ленинская тропа. 19Е. Цена: $279 000</b>
</td>
</tr>
</table>

На рисунке 9.9 показано, как это выглядит в браузере.

Рис. 9.9. Применение <colgroup> и <col> в таблице, используемой больше для создания макета страницы, чем для размещения данных

Рамки и линии

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

Например:

<table border="l" frame="hsides" rules="rows">
 ...таблица
</table>

В результате получится такая таблица, как на рис. 9.10. Сравните ее с рис. 9.9, на котором изображена таблица со всеми возможными внешними и внутренними линиями.

Рис. 9.10. Атрибуты frame и rules используются для выбора отображаемых линий границ
таблицы и внутренних границ

У каждого атрибута имеется ряд свойств. Рассмотрим frame. По умолчанию рисуются все четыре линии, ограничивающие таблицу. Дополнительно этот атрибут может принимать следующие значения.

• void. Границы отсутствуют.
• above. Верхняя граница.
• below. Нижняя граница.
• hsides. Левая и правая границы отсутствуют.
• vsides. Верхняя и нижняя границы отсутствуют.
• Ihs или rhs — соответственно, только левая и только правая стороны.

Значения box или border означают, что отображаются все границы. (Это может потребоваться при написании некоторых скриптов. В обычной же ситуации проще вообще не включать атрибут frame в код.)

ПРИМЕЧАНИЕ

Необходимо отметить, что атрибут frame элемента <table> не имеет ничего общего с HTML-фреймами, которые обсуждаются в главе 12. В данном случае frame задает только набор отображаемых элементов контура таблиц.

Чтобы управлять отображением внутренних линий таблицы, необходимо изменять значения атрибута rules. Возможные значения таковы:

• none. Линии отсутствуют.
  
• groups. Линии только между группами строк, определяемыми элементами <thead>, <tfoot> и <tbody> или между группами столбцов, определяемых элементами
  <colgroup> и <col>.
  
• rows. Линии только между строками.
  
• cols. Линии только между столбцами.
  
• аll. Все линии.

Хотя эти атрибуты и входят в спецификацию XHTML Strict, помните, что все то же самое можно делать при помощи таблиц стилей, как описано в главе 10. Это даже предпочтительнее, особенно если вы ориентируетесь на последние графические браузеры (неграфические браузеры будут игнорировать все эти атрибуты).

Примеры оформления страниц на основе таблиц

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

Таблица, ориентированная на работу со строками

Это довольно-таки несложная таблица, — по крайней мере, она выглядит так. Формально она предназначена все для той же фиктивной риэлтерской фирмы. В процессе ее рассмотрения вы увидите, что она ориентирована на работу со строками. То есть вы увидите набор строк, и каждая из них представляет собой, на самом деле, всего один столбец данных. Если вам потребуется несколько столбцов, создайте вложенную таблицу. В ней может быть столько столбцов, сколько нужно. Это хороший подход к созданию четких и понятных веб-страниц. (Кроме того, не запутаетесь в собственных кодах.)

Обратите внимание еще и на то, что размер границы главной таблицы установлен нулевой, тем самым создается пустое пространство вокруг большинства элементов. Применяется описанная ранее группировка строк, что позволяет браузеру отображать заголовок, основание таблицы и ее тело независимо друг от друга. Это дает возможность сделать среднюю часть таблицы, в отличие ото всех остальных, прокручиваемой, а при печати на каждой странице автоматически выводить колонтитулы. Весь документ, соответствующий стандарту XHTML Strict, включая соответствующие объявления (подробную информацию о них можно найти в конце главы 4), приведен в листинге 9.3.

Листинг 9.3. Страница, построенная на основе таблицы с ориентацией на горизонтальную разбивку

 <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE HTML PUBLIC "\//W#C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<titlе>Внутри дома</titlе>
</head>
<body bgcolor="#ffffff">
<!-- Начало таблицы на всю страницу -->
<table border="0" width="100% cellpadding="10">
<thead>
<!-- Верхний баннер --> <tr>
<td align="center"><img src="images/heading.jpg"    />
</td>
</tr>
<!-- Строка ссылочного меню --> <tr>
<td align="center">
<a href="index.html">Главная страница</а>
<a href="house.html">Дом</a> | <a href="area.html">Участок</a>
<a href="terms.html">Условия продажи</а>
<a href="map.html">Haпpaвлeния</a> </td> </tr>
</thead>
<tbody>
<!-- Маленькие фотографии во вложенной таблице -->
<tr>
<td align="center">
<table width="450" border="1" cellspacing="2" cellpadding="5">
<tr>
<td width="33%"><img src="images/master.jpg"     />
</td>
<td width="33%"><img src="images/kids_bedroom.jpg     />
</td>
<td width="34%><img src="images/living_bedroom.jpg   />
</td>
</tr>
<tr>
<td width="33% valign=tор">Вид из окна</td>
<td width="33% valign=tор">На крыше</td>
<td width="34%' valign="top">Пляж</td>
</tr>
</table>
</td> </tr>
<!-- Основная часть текста и плавающая часть таблицы -->
<tr> <td>
<h1>Ваша собственная недвижимость</h1>
<table align="right" cellpadding="5" width="200"
border="1">
<tr bgсоlог="уеllow"><td>Ленинская тропа. 19 E</td></tr>
<tr><td><b>ценa:</b> $279 000</td></tr>
<tr><td><b>Оценкa:</b>$309 000</td></tr>
<tг><td>Bлaдeлeц переезжает и заинтересован в
срочной продаже. Звоните 654 3456. спросить Андрея</td></tr>
</table>
<р>Вы больше нигде не встретите таких предложений за
такую скромную сумму! Пройдя через ворота (с забавным 
дистанционным управлением), попадаете в прекрасный домик. 
Внутри вы увидите, формально говоря, спальню и гостиную,
на первом этаже - игровую комнату (идеально подходит для создания 
домашнего (кино)театра). В подвал ведет витая лесенка, 
спустившись по которой вы попадаете в собственную мини-прачечную. 

Адрес: Ленинская тропа. 19Е. Цена: $279 000.</р>
</td> </tr> </tbody>
<!-- Последняя строка, информация -->
<tr>
<td align="center"> •
<аddrеss>Подробности по телефону (945) 654 3456 или по e-mail:
<а href="mailto:rich@fakeestate.com">(Продавец Рома)</а,
в поле "Тема" укажите: "Мини-недвижимость".
Спасибо!</address>
</td>
</tr>
</body>
</html>
 

Результат показан на рис. 9.11.

Рис. 9.11. Страница, соответствующая листингу 9.3. Обратите внимание на вложенные таблицы

Сконцентрируемся на столбцах

Вы убедились, что горизонтальное разделение таблицы — это великолепно, но, увы, такой подход немного проигрывает в том случае, когда нужно разместить на странице большое количество информации. Вертикальное разделение и вообще тщательная работа со столбцами ведется при создании информационных сайтов, которые но внешнему виду должны напоминать газеты или журналы. Частично из соображений экономии места на экране этот же подход используется на больших порталах, таких как Excite (http://www.excite.com/) и Yahoo! (http:// www.yahoo.com), а также на сайтах таких изданий, как New York Times (http:// nytimes.com/).

Если вы решите попробовать применить «вертикальный» подход, вы обнаружите, что это несложно. Единственное, к чему придется привыкнуть, — это к большим объемам данных в каждой ячейке. Может быть, трудно будет разбираться в исход ном коде, поскольку в веб-браузере столбцы отображаются не совсем в том поряд ке, в котором описываются на HTML.

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

Рис. 9.12. Отображение в браузере кода, представленного в листинге 9.4

ПРИМЕЧАНИЕ

По своему опыту знаю, что браузеры ведут себя по-разному при попытке заставить их распознавать атрибут align. Может вдруг оказаться, что разные колонки выглядят в разных браузерах по-разному. Также важно помнить, что <colgroup> и <col> — это относительно новые элементы, и не все браузеры смогут их отобразить корректно. Единственным выходом из этой ситуации мне представляется использование <td width="xx"> в ячейках таблицы. Поскольку колонка должна быть не уже самой широкой ячейки, то можно обойтись заданием размеров первых ячеек каждого столбца. Именно это и реализовано в листинге 9.4. Я решил не полагаться на <colgroup> и <col>.

Листинг 9.4. Страница, разделенная на колонки

<?xml version="1.0" encoding="iso-8859-l"?>
<!DOCTYPE HTML PUBLIC "\//W#C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http: //www.w3.org/1999/xhtml">
<head>
<title>Новости рынка недвижимости!</title>
</head>
<body>
<!-- Начало таблицы на всю страницу -->
<table border="0"
<table border="0"width=100%" cellpadding="5"
cellspacing="0" bgcolor="#eeeeee"
<!-- Верхние строки -->
<thead>
<tr>
<td align="center" со1зрап="3">Последнее обновление:
10/14/02 2:15 PM EDT</td>
</tr> 
<tr> 
<td align="center" colspan="3"><img src="title.png"
аlt="Новости рынка недвижимости" /></td> 
</tr>
<tr>
<td align="center" bgcolor="#eeeeee" colspan="3">
<a hгef="http.//www.fakeestate.com/">Глaвнaя</a>
<a href="reports/mortgage.html >Информация по закладным</а>
<a href="column/index.html">Нaнси</а> 
<a href="recent.html">Архив новостей</а> 
<a href="http://ww.fakeestate.com/cgi-bin/forums">(t>Форумы</a
</td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
</thead>
<!-- Конец заголовка таблицы -->
<!-- Основная часть таблицы -->
<tbody>
<tr>
<!-- Начало левой колонки -->
<td valign="top" bgcolor="#eeeeee" width="150">
<b>Новинка - обновления на форуме!</b><br />
<р> Посетите <а href=
"http://www.fakeestate.com/cgi-bin/forums">Форум</a>
"Новостей рынка недвижимости". На нем можно обсудить
произошедшие за последнее время изменения, задать вопросы 
напрямую ведущим экспертам и поговорить обо всем, 
что касается рынка недвижимости!</р>
<b>Горячие ссылки</b><br /> .. .
<р>3агляните и на другие интересные сайты, посвященные 
недвижимости:</р>
<а target="_blank" href="http://www.realworldestate.cofn/">
Мир Недвижимости</а>
<р>
<а target="_blank" href="http://www. mortgage-planet. соm/">
Планета Ипотека</а>
<а target="_blank" href="http://www.realfakedeal .соm/">
Деловое обозрение</а> </р>
<р>
<а target="_blank" href="http://www. fixituppers.com/">
FixItUppers.com </а>
</р>
</td>
<!-- Конец левой колонки -->
<!-- Начало средней колонки -->
<td valign="top" bgcolor="#ffffff">
<h1>Цены все падали...</h1>
<р>С наступлением холодов в наших северных краях деловая 
активность фирм-застройщиков резко снизилась. 
В затишье ушли также риэлтеры. В связи с этим наметилось 
общее сезонное падение цен на недвижимость. Эксперты прогнозируют
сохранение наметившейся тенденции до начала весны. Нынешний 
"мертвый сезон" -
идеальное время для тех. кто бережет деньги и желает приобрести
жилье по минимальной цене.</р>
<р><а href="news/10.14.closing.html">Подробнее...</а></р>
<h1>...A инвестиции в страхование все возрастали</h1>
<р>С принятием Государственной Думой закона об обязательном 
страховании гражданской ответственности господа инвесторы
крепко задумались о смене направления своей деятельности. 
Опытные эксперты отмечают некоторый сдвиг инвестиционных потоков
в сторону страховых проектoв.</р>
<р><а href="http://www.stategov.gov/page/news.news.html    >
Подробности...</a></p>
<h1>Нанси: делаем заказы</h1>
<p> В этом номере освещается текущее положение дел риэлтерской 
компании Нанси. Приведены таблицы роста различных экономических
показателей за последний месяц.</р> <р><а href=
"columns/10.14.nancy.html ">Читайте колонку Нанси...</а>
<!-- Конец средней колонки --> </td>
<!-- Начало правой колонки -->
<td width="150" valign="top" bgcolor="#eeeeee">
<p><img src="images/feature.jpg" width="100"        аlt=
 "Лучший дом недели" /></р>
<р><b>Лучшая собственность</b><br />
Лучшим выбором этой недели признано предложение 4/2/2. 
Законченность дизайна, как интерьерного и экстерьерного, 
так и ландшафтного. Участок площадью 1.2 га. бассейн, 
питающийся из небольшой чистой реки. Если вы когда-нибудь
мечтали о счастье, то сейчас оно стало осуществимым.</р>
<р><а href="features/10.14.property.html">[4/2/2 Речном]</а></р>
<!-- Конец правой колонки -->

</tbody>
</td> 
</tr>
</table>
</body> 
</html >

Резюме

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

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