Техника Web-дизайна для студента

Создание таблиц средствами HTML

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

Для создания таблиц используются следующие метки:

О <table>...</table>— отмечают начало и конец таблицы;

О <tr>...</tr>— отмечают начало и конец строки;

О <td>...</td>— между метками располагаются данные одной ячейки таблицы;

О <тн>...</тн>— между метками располагаются данные одной ячейки таблицы, которая является заголовком столбца или

Строки. В отличие от метки <то>, содержимое меток <тн>...</тн> отображается браузером полужирным шрифтом и центрируется по горизонтали.

Рассмотрим следующий пример создания таблицы (листинг 4.1):

Листинг 4.1. Размещение таблицы с параметрами по умолчанию

<нтмь>

<НЕАО>

СТТТТ, К>Та б. ттипьК /ТТТТ, Е>

</НЕАО>

<ВСЮ¥>

<ТАВЬЕ>

<ТЕ>

<ТОХ/ТОХТН>1</ТНХТН>2</ТНХТН>3</ТН>

</ ТЕ>

<ТЕ>

<ТН>1</ТНХТО>ЯЧЕЙКА_1-1</ТОХТО>ЯЧЕЙКА_1-2</ТОХТО>ЯЧЕЙКА_1-

3</ТО>

</ ТЕ>

<ТЕ>

<ТН>2</ТНХТО>ЯЧЕЙКА_2-1</ТОХТО>ЯЧЕЙКА_2-2</ТОХТО>ЯЧЕЙКА_2-

3</ТО>

</ ТЕ>

</ТАВЬЕ>

</ВОО¥>

</НТМЬ>

В окне браузера такая таблица будет выглядеть как на рис. 4.1.

Обратим внимание на то, что по умолчанию таблица не имеет рамок вокруг ячеек и вокруг самой таблицы. Для создания ра­мок, изменения расстояний между ними, а также между рамка­ми и данными внутри ячеек используются специальные пара­метры метки <ТАВЬЕ>.

О всжоее= "значение"— позволяет создать рамки вокруг табли­цы и вокруг каждой ячейки. Значение параметра определяет толщину рамки вокруг таблицы в пикселях. Толщина рамки вокруг ячеек во всех случаях равна 1 пикселю.

Задание border=o эквивалентно отсутствию параметра border, т. е. в обоих случаях рамка не воспроизводится. Сле­дует также обратить внимание на то, что вокруг ячейки, не содержащей данных, рамка отсутствует.

О cellspacing="значение"— позволяет задать расстояние меж­ду рамками ячеек по горизонтали и вертикали. По умолча-

Нию это значение равно 2. В случае сеььзрасшс=о рамки ячеек сливаются, образуя сетку разделительных линий. Вари­ант такой таблицы приведен на рис. 4.3.

О cellpadding="значение"— позволяет задать расстояние меж­ду рамкой ячейки и данными внутри ячейки. По умолчанию это значение равно 1 пикселю. При задании cellpadding=o — текст внутри ячейки будет касаться рамки, что для текстовых таблиц обычно неприемлемо. Зато для некоторых таблиц с рисунками в ячейках может быть недопустимым расстояние между рисунками. В этом случае использование параметра cellpadding со значением 0 является обязательным.

Установка размеров таблицы и ее горизонтального расположе­ния в окне браузера осуществляется с помощью следующих па­раметров метки <TABLE>:

О wIотн= "значение"— задает ширину таблицы. Если после зна­чения ширины установлен знак %, то она задается в процентах от ширины окна браузера, в противном случае— в пикселях;

О неight="значение"— задает высоту таблицы. При наличии знака % после значения высоты, она будет определяться в процентах относительно высоты окна браузера, в противном случае— в пикселях.

Пример записи: ctable width=ioocc height=ioocc>. Результат действия параметров показан на рис. 4.4.

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

^ Примечание ^

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

□ align="значение"— позволяет задать горизонтальное распо­ложение таблицы в окне браузера. Возможны следующие значения параметра ALIGN:

• CENTER — ПО центру;

• left—слева;

• right—справа.

Для значений left и right при наличии свободного места предусмотрено обтекание таблицы с противоположной сто­роны текстом, идущим после метки </table>. Пример пока­зан на рис. 4.5.

Если параметр align не задан, то таблица будет располагать­ся слева, но обтекания текстом не будет.

Цветовое оформление таблицы может осуществляться с помо­щью параметров:

О bordercolor= "значение" — задает цвет рамки таблицы;

О BORDERCOLORLIGHT=" значение"— Задает ЦВЄТ ЛЄВОЙ И Верхней сторон рамки таблицы, правой и нижней сторон рамки ячейки;

О BORDERCOLORDARK="значение"— ЗацаЄ-T ЦВЄТ Правой И НИЖНЄЙ сторон рамки таблицы, левой и верхней сторон рамки ячейки.

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

<САРТ1СМХН1>Это заголовок таблицы</Н1х/САРТЮЫ>

Метка <caption> может иметь параметр align, определяющий положение и выравнивание заголовка. Параметр может прини­мать значения:

О тор— заголовок располагается над таблицей и выравнивается по центру (действует по умолчанию);

О left— заголовок над таблицей слева;

О right — заголовок над таблицей справа;

О bottom — заголовок располагается под таблицей и выравнива­ется по центру.

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

В метках <tr>, <td> и <тн> можно использовать следующие па­раметры:

О align="значение"— действие параметра распространяется на строку или ячейку, в метке которой он установлен. Значения параметра аналогичны значениям, приведенным выше для таблицы, но в этом случае выравнивается содержимое строки или ячейки;

О valign="значение"— позволяет задать вертикальное вырав­нивание содержимого строки или ячейки. Параметр может принимать следующие значения:

• тор — по верхнему краю,

• bottom—по нижнему краю,

• middle — по середине (действует по умолчанию);

О nowrap— запрещает браузеру разбивать текст на строки. Текст в ячейке с параметром nowrap вытянется в одну строку, увеличив ширину ячейки до ширины строки текста.

Кроме того, в метках <tr>, <td> и <тн> можно использовать па­раметры BORDERCOLOR, BORDERCOLORLIGHT И BORDERCOLORDARK, действие которых будет распространяться на строку или ячейку, в метке которой они установлены.

С целью объединения нескольких ячеек по горизонтали или по вертикали в метках <td> и <тн> используются параметры:

О COLS PAN="значение"— задает количество ячеек, объединяе­мых по горизонтали, включая текущую ячейку;

О ROWSPAN="значение"— задает количество ячеек, объединяе­мых по вертикали, включая текущую ячейку.

Пример таблицы с объединенными ячейками приведен на рис. 4.6.

Текст документа, позволяющего создать такую таблицу, приве­ден в листинге 4.2.

Листинг 4,2, Объединение ячеек по горизонтали и вертикали

<HTML>

<HEAD>

СТТТТ, F,>Ta блш тьт< /ТТТТ ,Е>

</HEAD>

<BODY>

<TABLE B0RDER=5>

<TR>

<TD></TDXTH>1< / THXTH>2</THXTH>3< / THXTH>4< / THXTH>5< / TH> </TR>

<TR>

<TH>1</TH>

<TD C0LSPAN=3 АЫИ'1=СЕЫТЕР>0бъединились ячейки 1-1, 1­2, l-3</TD>

<T 0>ЯЧЕЙКА_1 - 4 < / T DXT 0>ЯЧЕЙКА_1 - 5 < / T D>

</TR>

<TR>

<TH>2< / ТНХТ0>ЯЧЕЙКА_2 -1</TD>

<T 0>ЯЧЕЙКА_2 - 2 < / T DXT 0>ЯЧЕЙКА_2 - 3 < / T D>

<TD C0LSPAt-I=2 R0WSPAN=2>06beflMHMnMCb ячейки 2-4, 2-5, 3-4, 3-5</TD>

</TR>

<TR>

<TH>3</ТНХТО>ЯЧЕЙКА 3-l</TD>

<Т Б>ЯЧЕЙКА_3 - 2 < / Т DXT Б>ЯЧЕЙКА_3 - 3 < / Т D>

</TR>

</TABLE>

</BODY>

</HTML>

Одна из ячеек одновременно содержит параметры cols pan и rows pan, что позволяет объединить сразу четыре ячейки, две из которых располагаются в одной строке, а две в другой.

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