2.6. Оформление таблиц
Таблицы достаточно широко применяются в электронной документации, причем для Web-страниц они используются не только в традиционном смысле, как метод упорядоченного представления данных, но и для форматирования самих этих страниц. Описание таблицы на языке HTML размещается внутри тела документа, т. е. в контейнере <BODY> и </BODY>. Внутри документа допускается любое число таблиц, причем некоторые из них могут быть вложенными. Каждая таблица создается в пределах контейнера <TABLE> (таблица) и </TABLE>, где размещается описание структуры самой таблицы и ее содержимое. Каждая строка таблицы размещается после тэга <TR> (Table Row – строка таблицы).
Каждая ячейка таблицы в пределах строки оформляется тэгом <TH> (Table Header – заголовок таблицы) – для заголовочной части таблицы или <TD> (Table Data – табличные данные) – для ячеек, в которых размещаются данные. В заголовочной части по умолчанию применяется полужирный шрифт и выравнивание по центру. Для отображения данных по умолчанию используется нормальное (светлое) начертание и выравнивание влево. Можно отметить, что для всех тэгов, перечисленных в этом абзаце, закрывающий тэг не обязателен, т. е. он может быть опущен.
Количество строк в таблице определяется количеством строчных тэгов <TR>, а число столбцов – максимальным количеством тэгов <TH> или <TD> в одной из строк. Строкой считается все то, что следует после очередного тэга <TR> и до следующего такого же тэга. Для ячейки таблицы, не содержащей данных, следует использовать пустой контейнер <TD> и </TD>. Если пустые ячейки расположены в конце строки, то их описание может быть опущено. В этом случае браузер самостоятельно оставит необходимое число ячеек пустыми.
Таблица может иметь название, т. е. то, что в редакционной практике называется тематическим заголовком (в отличие от нумерационного заголовка, в котором содержится слово "таблица" и порядковый номер этой таблицы в тексте издания), причем, если в печатном издании заголовок обязательно расположен над таблицей, то в электронном он может быть расположен как сверху, так и снизу. Заголовок расположен внутри контейнера <CAPTION> (заголовок) и </CAPTION>. Указанный контейнер должен быть помещен внутрь тэга-контейнера <TABLE>, но вне области описания тэгов <TR>, <TH> или <TD>. Последняя спецификация HTML рекомендует размещать тэгконтейнер <CAPTION> сразу после открытия таблицы, т. е. после тэга <TABLE> и до первого тэга <TR>.
...
Заголовок нумерационный – это заголовок, обозначаемый числом, определяющим порядковый номер рубрики, таблицы и пр.
В тэге <CAPTION> первоначально был предусмотрен один необязательный параметр ALIGN, который предназначался для вертикального выравнивания (размещения заголовка) и мог принимать одно из двух значений TOP (по умолчанию) или BOTTOM. Затем выяснилась необходимость и горизонтального выравнивания с тремя стандартными параметрами LEFT, RIGHT и CENTER. Однако нельзя в одном тэге дважды использовать один и тот же параметр. Поэтому в современных версиях языка HTML параметр ALIGN (по умолчанию ALIGN=LEFT) оставлен для выравнивания по горизонтали, а вертикальное выравнивание (точнее – размещение заголовка над или под таблицей) осуществляется с помощью параметра VALIGN (Vertical Allign – вертикальное выравнивание).
В тэге <TABLE> могут использоваться следующие параметры: BORDER, CELLSPACING (расстояние между ячейками таблицы), CELLPADDING (заполнение ячеек), WIDTH, ALIGN, HEIGHT и BACKGROUND. Параметр BORDER управляет отображением рамки вокруг каждой ячейки таблицы (т. е. задает вертикальные и горизонтальные линии сетки) и вокруг всей таблицы, причем его значение задает толщину рамки в пикселах вокруг всей таблицы, а само наличие этого параметра задает линии сетки. Значение параметра BORDER появилось лишь в версии 3.2 спецификации HTML, до этого толщина рамки вокруг таблицы не регулировалась.
Параметр CELLSPACING задает расстояние между смежными по горизонтали и вертикали ячейками, причем это расстояние задается в пикселах, т. е. внутри каждой ячейки создается нечто вроде рамки и лишь при CELLSPACING=0 эти рамки отдельных ячеек сливаются в единую сетку. Параметр CELLPADDING определяет расстояние между рамкой вокруг ячейки и данными внутри ее, т. е. величину отступа символов от рамки. При значении CELLPADDING=0 текст может касаться рамки, что в плане дизайна едва ли можно приветствовать. По умолчанию значение CELLSPACING=2, а CELLPADDING=1 – в этом случае расстояние между данными в соседних ячейках одной строки будет равно 6 пикселам.
Параметры WIDTH и HEIGHT позволяют задать ширину и высоту таблицы как в абсолютных единицах – пикселах, так и в относительных – процентах относительно размера окна браузера. В большинстве случаев эти размеры не требуются браузеру, так как он автоматически вычисляет размеры таблицы, учитывая множество факторов, включая параметры документа в целом, количество ячеек в таблице и их заполнение. Браузер стремится установить ширину таблицы такой, чтобы она помещалась в окне просмотра браузера и не было необходимости в прокрутке таблицы по горизонтали, т. е. чтобы горизонтальный маркер прокрутки отсутствовал.
Надо отметить, что и при задании значений параметров WIDTH и HEIGHT нет гарантии в том, что они будут выдержаны браузером. Если ширина таблицы больше ширины окна просмотра, браузер сделает попытку уменьшить ширину до требуемой, пропорционально уменьшая размеры колонок, и только если это не удастся, установит заданную ширину таблицы, снабдив окно маркером прокрутки.
Параметр ALIGN задает горизонтальное выравнивание таблицы в окне просмотра браузера. Возможны 2 значения этого параметра: LEFT и RIGHT, каждый из которых обеспечивает обтекание таблицы текстом документа с противоположной стороны. Это соответствует клочковой таблице в печатном издании, т. е. таблице, заверстанной в оборку. По умолчанию параметр ALIGN принимает значение LEFT. Если параметр ALIGN опущен, то текста рядом с таблицей не будет вообще, т. е. таблица будет форматной или полосной (когда она занимает всю страницу по вертикали) – если использовать термины, принятые в печатных изданиях. Значение параметра ALIGN=CENTER не предусмотрено. Однако, если мы хотим ориентировать таблицу по центру, можно пойти другим путем: заключить контейнер <TABLE> и </TABLE>, который описывает всю таблицу целиком, в контейнер <CENTER> и </CENTER>. Напомним, что последний имеет уровень блока, т. е. форматирует любое количество данных, размещенных внутри его (см. разд. 2.2).
Отметим, что параметр ALIGN может использоваться и для форматирования данных внутри каждой ячейки таблицы, например:
<TABLE ALIGN=LEFT WIDTH=40% BORDER=5 >
<TR> <TH ALIGN=RIGHT> Фамилия </TH> <TH ALIGN=RIGHT> Оценка </TH>
<TR> <TD ALIGN=RIGHT > Иванов А.Н. </TD> <TD ALIGN=RIGHT> 4 </TD>
<TR> <TD ALIGN=RIGHT> Сергеев И.Д. </TD> <TD ALIGN=RIGHT > 5 </TD>
<TR> <TD ALIGN=RIGHT > Лавров В.В. </TD> <TD ALIGN=RIGHT > 3 </TD> </TABLE>
Пример отображения браузером документа, включающего в себя приведенный выше фрагмент, показан на рис. 2.8. На рисунке хорошо видна рамка вокруг таблицы и то, что таблица выровнена влево, а справа обтекается текстом. В качестве текста использован фрагмент абзаца данной книги, расположенного чуть выше по тексту. Следует обратить внимание на то, что хотя вся таблица выровнена влево, данные в каждой строке выравниваются вправо. Формально можно было бы в каждой ячейке выравнивать текст посвоему. Однако, это визуально выглядело бы очень неприглядно.
Для качественного дизайна полосы данные во всех ячейках столбца таблицы должны выравниваться одинаково, т. е. в примере на рис. 2.8 возможно было бы оставить первый столбец неизменным, а данные во втором выровнять влево (или даже по центру).
Параметр BACKGROUND, который уже был показан в примере, приведенном выше, также может использоваться как в тэге <TABLE>, так и в тэгах <TH> и <TD>, определяющих характеристики отдельных ячеек таблицы. Во всех случаях он определяет фоновый рисунок с помощью параметра HREF. В последней версии спецификации HTML в тэге <TABLE> появился параметр COLS (Column Splitting дробление колонок, разбиение столбцов), задающий общее число колонок в таблице. Эта дополнительная информация ускоряет процесс построения таблицы браузером.
При создании заголовочной части таблицы, реже боковика (левой графы таблицы, содержащей данные о строках таблицы) и прографки (составной части таблицы, содержащей сведения, относящиеся к заголовку и боковику), возникает потребность в объединении нескольких ячеек по горизонтали (в строке) или по вертикали в единое целое. Для этого используются параметры ROWSPAN (сцепление строк) и COLSPAN (сцепление столбцов), первый из которых объединяет несколько строк, а второй – столбцов, в одну ячейку. Пример описания такой таблицы приводится ниже.
<TABLE BORDER=10 SELLSPACING=3 CELLPADDING=4 WIDTH=80%>
<CAPTION> <H4> Объединение ячеек в заголовочной части</H4>
<TR> <TH ROWSPAN=2>Заголовок 1</TH><TH COLSPAN=2>Заголовок 2</TH>
