Студопедия

КАТЕГОРИИ:


Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)

Что такое HTTP 7 страница




<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 задает только набор отображаемых элементов контура таблиц.




Поделиться с друзьями:


Дата добавления: 2014-12-29; Просмотров: 342; Нарушение авторских прав?; Мы поможем в написании вашей работы!


Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет



studopedia.su - Студопедия (2013 - 2024) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! Последнее добавление




Генерация страницы за: 0.039 сек.