Оформление таблиц

Таблицы достаточно широко применяются в электронной документации, причем для Web-страниц они используются не только в традиционном смысле, как метод упорядоченного представления данных, но и для форматирования самих этих страниц. Описание таблицы на языке HTML размещается внутри тела документа, т. е. в контейнере <BODY> и </BODY>. Внутри документа допускается любое число таблиц, причем некоторые из них могут быть вложенными. Каждая таблица создается в пределах контейнера <ТАВLЕ> и </ТАВLЕ>, где размещается описание структуры самой таблицы и ее содержимое.

Каждая строка таблицы размещается после тега <TR> (Table Row). Каждая ячейка таблицы в пределах строки оформляется тегом <ТН> (Table Header) - для заголовочной части таблицы или <TD> (Table Data) - для ячеек, в которых размещаются данные. В заголовочной части по умолчанию применяется полужирный шрифт и выравнивание по центру. Для отображения данных по умолчанию используется нормальное (светлое) начертание и выравнивание влево. Можно отметить, что для всех тегов, перечисленных в этом абзаце, закрывающий тег не обязателен, т. е. он может быть опущен.

Количество строк в таблице определяется количеством строчных тегов <TR>, а число столбцов - максимальным количество тегов <ТН> или <TD> в одной из строк. Строкой считается все то, что следует после очередного тега <TR> и до следующего такого тега. Для ячейки таблицы, не содержащей данных, надо использовать пустой контейнер <TD> и </TD>. Если пустые ячейки расположены в конце строки, то их описание может быть опущено - браузер самостоятельно оставит необходимое число ячеек пустыми.

Таблица может иметь название - то, что в редакционной практике называется тематическим заголовком (в отличие от нумерационного), причем если в печатном издании заголовок обязательно расположен над таблицей, то в электронном он может быть расположен как сверху, так и снизу. Заголовок расположен внутри контейнера <CAPTION> и </CAPTION>.
Указанный контейнер должен быть помещен внутрь тега-контейнера <ТАВLЕ>, но вне области описания тегов <TR>, <TH> или

<TD>. Последняя спецификация HTML рекомендует размещать тег-контейнер <CAPTION> сразу после открытия таблицы, т. е. после тега <TABLE> и до первого тега <TR>.

В теге <CAPTION> первоначально был предусмотрен один необязательный параметр ALIGN, который предназначался для вертикального выравнивания и мог принимать одно из двух значений ТОР (по умолчанию) или BOTTOM. Затем выяснилась необходимость и горизонтального выравнивания стремя стандартными параметрами LEFT, RIGHT и CENTER. Однако нельзя в одном теге дважды использовать один и тот же параметр. Поэтому в современных версиях языка HTML параметр ALIGN (по умолчанию ALIGN=LEFT) оставлен для выравнивания по горизонтали, а вертикальное выравнивание (точнее - размещение заголовка над или под таблицей) осуществляется с помощью параметра VALIGN.

В теге <TABLE> могут использоваться следующие параметры: BORDER, CELLSPACING, CELLPADDING, WIDTH, ALIGN, HEIGHT и BACKGROUND. Параметр BORDER управляет отображением рамки вокруг каждой ячейки таблицы (т. е. задает вертикальные и горизонтальные линии сетки) и вокруг всей таблицы, причем его значение задаеттолщину рамки в пикселах вокруг всей таблицы, а само наличие этого параметра задает линии сетки. Значение параметра BORDER появилось лишь в версии 3.2 спецификации HTML, до это го тол щи на рамки вокруг таблицы не регулировалась.

Параметр CELLSPACING задает расстояние между смежными по горизонтали и вертикали ячейками, причем это расстояние задается в пикселах, т. е. внутри каждой ячейки создается нечто вроде рамки и лишь при CELLSPACING=0 эти рамки отдельных ячеек сливаются в единую сетку. Параметр CELLPADDING определяет расстояние между рамкой вокруг ячейки и данными внутри ее, т. е. величину отступа символов от рамки. При значении CELLPADDING=0 текст может касаться рамки, что в плане дизайна едва ли можно приветствовать.

По умолчанию значение CELLSPACING=2, a CELLPADDING=1, в этом случае расстояние между данными в соседних ячейках будет равно б пикселам.

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

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

Параметр ALIGN задает горизонтальное выравнивание таблицы в окне просмотра браузера. Возможны два значения этого параметра: LEFT и RIGHT, каждый из которых обеспечивает обтекание таблицы текстом документа с противоположной стороны. Это соответствует оборочной таблице в печатном издании. По умолчанию параметр ALIGN принимает значение LEFT. Если параметр ALIGN опущен, то текста рядом с таблицей не будет вообще, т. е. таблица будет форматной или полосной (когда она занимает всю страницу по вертикали), если использовать термины, принятые в печатных изданиях. Значение параметра ALIGN=CENTER не предусмотрено. Однако если мы хотим ориентировать таблицу по центру, можно пойти другим путем: заключить контейнер <TABLE> n</TABLE>, который описывает всю таблицу целиком, в контейнер <CENTER> и </CENTER>. Напомним, что последний имеет уровень блока, т. е. форматирует любое количество данных, размещенных внутри его (см.

§ 2.2).

Отметим, что параметр ALIGN может использоваться и для форматирования данных внутри каждой ячейки таблицы, например:

<TABLE ALIGN=LEFT WIDTH=40% BORDER=5 >

<TR><TH > Фамилия </ТН><TH > Оценка</TH>

<TR><TD > Иванов A.H. </TD><TD >

4 </TD>

<TR><TD > Сергеев И.Д. </TD><TD >5 </TD>

<TR><TD > Лавров В.В. </TD><TD > 3</TD>

</TABLE>

Пример отображения браузером документа, включающего в себя приведенный выше фрагмент, показан на рис. 2.8

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

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

возможно было бы оставить первый столбец неизменным, а данные во втором выровнять влево (или даже по центру).

Параметр BACKGROUND, который уже был показан в примере, приведенном выше, также может использоваться как в теге <ТАВLЕ>, так и в тегах <ТН> и <TD>, определяющих характеристики отдельных ячеек таблицы. Во всех случаях он определяет фоновый рисунок с помощью параметра HREF. В последней версии спецификации HTML в теге <ТАВLЕ> появился параметр COLS, задающий общее число колонок в таблице. Эта дополнительная информация ускоряет процесс построения таблицы браузером.

При создании заголовочной части таблицы, реже боковика и прографки (основной части таблицы, где размещаются данные), возникает потребность в объединении нескольких ячеек по горизонтали (в строке) или по вертикали в единое целое.

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

<TABLE BORDER=10 SELLSPACING=3 CELLPADDING=4 WIDTH=80%>

<CAPTION><H4> Объединение ячеек в заголовочной части</Н4>

<TR><TH ROWSPAN=2>3aголовок </TH><TH COLSPAN=2> Заголовок 2 </ТН>

<TR><TH>Заголовок 2-1</ТН><ТН>Заголовок 2-2 </ТН>

<TR ALIGN=CENTER><TD> 1 <TD> 2 <TD> 3

</TABLE>

Показанный ниже рис. 2.9

построен на основании HTML-документа, в теле которого содержится приведенный выше контейнер <TABLE> и </TABLE> со всем его содержимым. По сравнению с таблицей, показанной на рис. 2.8

, здесь с помощью тега <CAPTION> добавлен тематический заголовок, выровненный по центру таблицы. В таблице хорошо видны рамки ячеек и рамка вокруг таблицы в целом. В ячейке «Заголовок 1» объединены две строки, а в ячейке «Заголовок 2» - два столбца, что соответствует исходному HTML-коду. В третьей строке, как это часто делают для длинных узких таблиц, указаны номера колонок, что позволяет при переносе на следующую полосу не повторять заголовка целиком. Отметим, что используя параметры ROWSPAN и COLSPAN можно составить многоуровневые заголовки таблиц любой степени сложности.

2.7.

Содержание раздела