Вход/Регистрация
HTML: Популярный самоучитель
вернуться

Чиртик Александр Анатольевич

Шрифт:

Без явного определения столбцов не обойтись в том случае, если нужно включить в группу столбцы с различными параметрами отображения (например, с различным выравниванием). Допустим, нужно создать группу из десяти столбцов: выравнивание первого столбца левое, со второго по восьмой – правое, девятого и десятого – по центру. Группу столбцов наиболее кратко можно задать следующим образом:

<COLGOUP>

<COL align = left>

<COL span = 7 align = right>

<COL span = 2 align = center>

</COLGROUP>

Напоследок рассмотрим, как отразится наличие групп столбцов на отображении таблицы браузером. Можно дополнить таблицу из примера 7.7 группировкой столбцов следующим образом (оставлены только части текста HTML-документа, отличные от приведенного в примере 7.7) (пример 7.10).

Пример 7.10. Группировка столбцов

<TITLE>Группировка строк и столбцов таблицы</TITLE>

<TABLE align = center border = 3 bordercolor = black rules = groups>

<CAPTION align = top><B>Доходы от продаж за второе полугодие XXXX

года</B></CAPTION>

<COLGROUP align = left>

<COLGROUP span = 3>

<COLGROUP span = 3>

<THEAD>

...

<TBODY align = right>

...

<TR><TD>Филиал 1...

<TR><TD>Филиал 2...

<TR><TD>Филиал 3...

<TR><TD>Филиал 4...

<TBODY align = right>

<TR><TD>Всего:...

</TABLE>

Теперь таблица примет окончательный вид, показанный на рис. 7.8.

Рис. 7.8. Таблица со сгруппированными столбцами и строками

Особенности задания ширины столбцов

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

Дело в том, что самой трудной задачей при отображении таблицы является определение ширины как таблицы в целом, так и каждого столбца таблицы, а также определение количества столбцов в ней. Если ширина и количество столбцов не указаны явно, то браузер вынужден дожидаться загрузки всей таблицы, после чего определяется количество ячеек в самой длинной строке – количество столбцов. Ширина каждого столбца выбирается такой, чтобы поместить содержимое самой широкой ячейки этого столбца.

Чтобы браузер мог начать отображение таблицы по частям, он должен до получения первой строки с данными ячеек обладать сведениями о количестве и абсолютной (в пикселах) ширине каждого столбца, о созданных группах столбцов. Для этого нужно определить все столбцы с использованием COL или COLGROUP, а также указать ширину таблицы и ее столбцов так, чтобы абсолютные значения могли быть однозначно определены, например:

<TABLE width = 300>

<COLGROUP>

<COL width = 30>

<COL width = "*">

</COLGROUP>

<COLGROUP width = 50 span = 4>

...

</TABLE>

В этом случае точно известно, что таблица, содержащая два столбца, будет шириной 300 пикселов. На первый столбец приходится 30 пикселов и, соответственно, на второй – оставшиеся 270.

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

7.4. Использование таблиц для формирования дизайна HTML-документа

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

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

Рис. 7.9. Расположение элементов страницы

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

С учетом всего вышеизложенного можно написать следующий HTML-документ (пример 7.11).

Пример 7.11. Страница на таблицах

<HTML>

<HEAD>

<TITLE>Страница, построенная на таблицах</TITLE>

</HEAD>

<BODY>

<TABLE width = "100%">

<COL width = 100 align = left valign = top bgcolor = yellow>

<COL width = "*" align = justify valign = top>

<TR>

<TD bgcolor = white>

<TD>

<TABLE width = "100%">

<COL width = "*" align = center>

<COL width = 57> <!–Столбец растягивается по ширине изображения–>

<TR>

<TD bgcolor = yellow><H1>7. Таблицы</H1>

<TD><IMG src = "7.11.html.files/logo.jpg">

</TABLE>

<TR>

<TD> <!–В первом столбце помещаются гиперссылки на примеры–>

<A href = "7.1.html">Пример 7.1</A>

<A href = "7.2.html">Пример 7.2</A>

<A href = "7.3.html">Пример 7.3</A>

<A href = "7.4.html">Пример 7.4</A>

<A href = "7.5.html">Пример 7.5</A>

<A href = "7.6.html">Пример 7.6</A>

<A href = "7.7.html">Пример 7.7</A>

<A href = "7.8.html">Пример 7.8</A>

<A href = "7.9.html">Пример 7.9</A>

<A href = "7.10.html">Пример 7.10</A>

<TD> <!–Весь текст помещается в одной ячейке таблицы–>

Таблицы в том виде, в котором они реализованы в HTML,

являются замечательным средством упорядочивания данных.

Кроме группировки информации, таблицы являются чрезвычайно полезными при разработке дизайна HTML-документа.

В данном разделе рассмотрены оба способа использования таблиц.

Но для начала разберемся с тем, как добавлять таблицы в HTML-документ, а также рассмотрим возможности,

предоставляемые HTML для работы с таблицами.

<H2>Структура простейшей таблицы</H2>

Таблица в HTML представляется множеством ячеек, которые заключены в строки. Совокупность же всех строк и образует целую таблицу. Для обозначения таблицы используется HTML-

элемент TABLE, который задается парными обязательными тегами &lt;TABLE&gt; и &lt;/TABLE&gt;.

Строки таблицы задаются HTML-элементом TR (парные теги

&lt;TR&gt; и &lt;/TR&gt;, закрывающий тег необязателен).

Ячейки в простейшем случае задаются HTML-элементом TD (парные теги &lt;TD&gt; и &lt;/TD&gt;, закрывающий тег необязателен).

</TABLE>

</BODY>

</HTML>

  • Читать дальше
  • 1
  • ...
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • ...

Ебукер (ebooker) – онлайн-библиотека на русском языке. Книги доступны онлайн, без утомительной регистрации. Огромный выбор и удобный дизайн, позволяющий читать без проблем. Добавляйте сайт в закладки! Все произведения загружаются пользователями: если считаете, что ваши авторские права нарушены – используйте форму обратной связи.

Полезные ссылки

  • Моя полка

Контакты

  • chitat.ebooker@gmail.com

Подпишитесь на рассылку: