Изучение HTML 3.2 на примерах

Таблицы - tables (Нет в HTML 2.0!)

• Концепция таблиц в HTML 3.2
• Теги, используемые для представления таблиц
• Основные табличные структуры
• Дополнительные свойства; типичная таблица с текстовыми ячейками
• Параллельные тексты
• Использование таблиц для представления дефинитивных списков
• Числовые таблицы
• Использование таблиц для представления меню
• Табличные элементы, занимающие несколько строк или столбцов
• Вложенные таблицы
• Шрифты в табличных элементах

Концепция таблиц в HTML 3.2

Структура таблиц в HTML включает строки и столбцы, которые могут иметь заголовки (headers - имена, титулы, объяснения). Таблица в обычном варианте представляется в естественном виде, с согласованно расположенными столбцами. Таблицы - важнейшее улучшение в HTML 3.2 по сравнению с HTML 2.0. С другой стороны конструкция таблиц HTML 3.2 является всего лишь подмножеством Табличной модели HTML3 (RFC 1942).

D HTML табличные элементы обычно называют ячейками, чтобы избежать смешивания с табличным элементом (TABLE element), который в описании HTML соответствует всей таблице.

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

Теги, используемые для представления таблиц

Для представления таблиц используются нескольких видов тегов HTML:

• теги TABLE, которые обрамляют всю табличную спецификацию
• необязательный элемент CAPTION, специфицирующий заголовок (имя) таблицы
• теги TR, специфицирующие строки таблицы
• теги TH, специфицирующие заголовки строк и столбцов
• теги TD, специфицирующие данные в таблице, т.е. содержимое табличных ячеек

Основные табличные структуры

Давайте начнем с очень простого примера. Он связан с представлением таблицы чисел 2 на 2 (единичная матрицa) без каких либо заголовков. Код HTML выглядит следующим образом:

Пример table1.html:

<TABLE> 
<TR> <TD> 1 </TD> <TD> 0 </TD> </TR> 
<TR> <TD> 0 </TD> <TD> 1 </TD> </TR> 
</TABLE> 

и обычно представляется броузером следующим образом:

1	0
0	1

Таким образом, теги TABLE заключают в себе табличные строки, каждая из которых обрамляется тегами TR, и табличные ячейки, обрамляемые тегами TD. Это согласуется с логической структурой таблицы, как множеством строк, состоящих из ячеек. Вы можете сократить табличную структуру, опустив конечные теги TD и TR, однако утратите до некоторой степени ясность представления:

<TABLE> 
<TR> <TD> 1 <TD> 0 
<TR> <TD> 0 <TD> 1 
</TABLE> 

Более того, хотя удаление конечных тегов допустимо в HTML 3.2, отдельные броузеры (включая Netscape) не смогут без них правильно представить таблицу.

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

Дополнительные свойства; типичная таблица с текстовыми ячейками

Есть несколько элементов, которые Вы можете добавить к вышерассмотренной простой табличной модели:

• Заголовок (caption) для таблицы, связанный с самой таблицей (в дополнение к строкам текста о таблице в документе).
• Подзаголовки (headers) (объяснения) как для табличных строк, так и для колонок.
• Рамки (borders) вокруг таблицы и каждой табличной ячейки.

Следующий, довольно типичный пример показывает все вышеупомянутые особенности:

Пример table2.html:

<P>An illustration of the use of the TABLE element in HTML.</P> 
<TABLE BORDER=1> 
<CAPTION>Finnish, English, and scientific names for some animals</CAPTION> 
<TR><TH>Finnish name</TH><TH>English name</TH><TH>Scientific name</TH></TR> 
<TR><TD>hirvi</TD><TD>elk</TD><TD><I>Alces alces</I></TD></TR> 
<TR><TD>orava</TD><TD>squirrel</TD><TD><I>Sciurus vulgaris</I></TD></TR> 
<TR><TD>susi</TD><TD>wolf</TD><TD><I>Canis lupus</I></TD></TR> 
</TABLE> 

Заметьте, что некоторые табличные элементы в примере содержат разметку текста; в данном случае есть специфические причины для использования элемента I.

Параллельные тексты

Если у Вас есть логически параллельный текст, например, документ на нескольких языках, или несколько вариантов одного текста, элементы TABLE, по-видимому, наилучший способ его представления. (Использование элемента PRE - возможно, но требует утомительного форматирования, в результате которого формируется текст с одноразмерным шрифтом.)

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

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

Нижеследующий пример представляет фрагмент текста из Библии в трех вариантах и переводах:

Пример table3.html:

<TABLE> 
<CAPTION><STRONG>The beginning of Genesis 
in three languages</STRONG></CAPTION> 
<TR ALIGN=LEFT VALIGN=TOP> 
<TH><TH>Latin (Vulgate)</TH><TH>English 
(King James version)</TH> 
<TH>Finnish (1992 version)</TH> 
</TR><TR ALIGN=LEFT VALIGN=TOP> 
<TH>1</TH> 
<TD>In principio creavit Deus caelum et terram.</TD> 
<TD>In the beginning God created the heaven and the earth.</TD> 
<TD>Alussa Jumala loi taivaan ja maan.</TD> 
</TR><TR ALIGN=LEFT VALIGN=TOP> 
<TH>2</TH> 
<TD>Terra autem erat inanis et vacua et tenebrae super faciem 
abyssi et spiritus Dei ferebatur super aquas.</TD> 
<TD>And the earth was without form, and void; 
and darkness was upon the face of the deep. 
And the Spirit of God moved upon the face of the waters.</TD> 
<TD>Maa oli autio ja tyhjд, pimeys peitti syvyydet, 
ja Jumalan henki liikkui vetten yllд. </TD> 
</TR><TR ALIGN=LEFT VALIGN=TOP> 
<TH>3</TH> 
<TD>Dixitque Deus "Fiat lux" et facta est lux.</TD> 
<TD>And God said, Let there be light: and there was light.</TD> 
<TD>Jumala sanoi: "Tulkoon valo!" Ja valo tuli.</TD> 
</TR>
</TABLE> 

Заметим, что атрибуты ALIGN и VALIGN могут существенно влиять на качество отображения. Броузеры не могут определять тип таблиц по их содержанию, поэтому автор документа может подправить формат документа с помощью средств выравнивания.

Использование таблиц для представления дефинитивных списков

Как упоминалось при рассмотрении списковых элементов, подобных DL, обычно списки определений отображаются не очень удачно. Существует, однако, несколько способов улучшить такое отображение.

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

Пример table4.html:

<TABLE> 
<CAPTION>The first three letters of the Greek alphabet</CAPTION> 
<TR><TH ALIGN=LEFT>alpha</TH> 
<TD> the first letter of the Greek alphabet </TD> </TR> 
<TR><TH ALIGN=LEFT>beta</TH> 
<TD> the second letter of the Greek alphabet </TD> </TR> 
<TR><TH ALIGN=LEFT>gamma</TH> 
<TD> the third letter of the Greek alphabet. </TD> </TR> 
</TABLE> 

Числовые таблицы

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

Для числовых таблиц соответствующее выравнивание обычно важно для формирования легко читаемого представления.

Целые значения чисел в столбцах должны быть выровнены по правому краю. Этого, в принципе, добиться несложно. Существует два варианта:

• использование атрибута ALIGN=RIGHT в каждом элементе TD, или
• использование атрибута ALIGN=RIGHT в каждом элементе TR и перекрытие их атрибутами ALIGN=LEFT или ALIGN=CENTER в элементах TH, если это надо.

Числа, содержащие десятичную точку (или во многих языках - запятую) должны быть выровнены согласно этому правилу, что, к сожалению, невозможно в HTML 3.2. (Известны попытки удовлетворения подобных запросов, однако на сегодня мало кто поддерживает их.) Существует, правда, один вариант решения - представлять такие значения так, чтобы в каждой колонке справа от десятичной точки было одно и то же количество цифр и использовать при этом ALIGN=RIGHT.

Однако, отображение может получиться неудовлетворительным, если цифры используют пропорциональные шрифты, где размеры цифр существенно отличаются. Возможно, но очень утомительно, исправить это укладыванием данных в каждую ячейку с использованием элемента TT. (Заметьте, что внутри элемента TT запрещено использование элемента TABLE!)

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

Пример table5.html:

Measurement results: 
<PRE> 
time    temperature  pressure 
12:00       26         12.8 
12:15       22.5        9.8 
12:30       11          1.65 
12:45        3.3        0.03 
13:00        0.05       0.002 
</PRE> 
<TABLE> 
<CAPTION>Measurement results</CAPTION> 
<TR><TH>time</TH><TH>temperature</TH><TH>pressure</TH></TR> 
<TR ALIGN=RIGHT><TD>12:00 </TD><TD>26.00 </TD><TD>12.800 </TD></TR> 
<TR ALIGN=RIGHT><TD>12:15 </TD><TD>22.50 </TD><TD> 9.810 </TD></TR> 
<TR ALIGN=RIGHT><TD>12:30 </TD><TD>11.00 </TD><TD> 1.650 </TD></TR> 
<TR ALIGN=RIGHT><TD>12:45 </TD><TD> 3.30 </TD><TD> 0.030 </TD></TR> 
<TR ALIGN=RIGHT><TD>13:00 </TD><TD> 0.05 </TD><TD> 0.002 </TD></TR> 
</TABLE> 

Использование таблиц для представления меню

Часто требуется представить большой набор относительно малых образов. Например, у нас есть документ о различных странах и мы хотим создать меню из имен стран, чтобы использовать его, как индекс. И индекс должен использовать обычные связи, например
<A HREF="af.html">Afghanistan</A>.

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

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

Пример menu1.html:

<PRE> 
Afghanistan       Albania       Algeria
American Samoa    Andorra       Angola
Anguilla          Antarctica    Antigua and Barbuda
Arctic Ocean      Argentina     Armenia
</PRE> 

Другой вариант - представить образы просто как текстовые абзацы, с использованием пробелов или пробелов и запятых, как разделителей. Это значит, что броузер разделит текст на строки, и это представление будет очень компактным:

Пример menu2.html:

<BASE HREF="http://www.odci.gov/cia/publications/95fact/"> 
<P> 
<A HREF="af.html">Afghanistan</A>, 
<A HREF="al.html">Albania</A>, 
<A HREF="ag.html">Algeria</A>, 
<A HREF="aq.html">American Samoa</A>, 
<A HREF="an.html">Andorra</A>, 
<A HREF="ao.html">Angola</A>, 
<A HREF="av.html">Anguilla</A>, 
<A HREF="ay.html">Antarctica</A>, 
<A HREF="ac.html">Antigua and Barbuda</A>, 
<A HREF="xq.html">Arctic Ocean</A>, 
<A HREF="ar.html">Argentina</A>, 
<A HREF="am.html">Armenia</A> </P> 

Также можно обеспечить перевод строки с помощью элемента BR. Или, если Вам кажется, что образы недостаточно различимы в представлении, попробуйте ввести перед каждым образом специальный символ, подобный * (используя при этом пробел, как разделитель).

Однако, представление должно быть таким, чтобы все образы занимали одно и то же пространство. Поэтому можно либо использовать элемент PRE, либо затратить усилия на конструирование подходящего элемента TABLE. Например:

Пример menu3.html:

<BASE HREF="http://www.odci.gov/cia/publications/95fact/"> 
<TABLE><TR> 
<TD WIDTH=150><A HREF="af.html">Afghanistan</A></TD> 
<TD WIDTH=150><A HREF="al.html">Albania</A></TD> 
<TD WIDTH=150><A HREF="ag.html">Algeria</A></TD> 
<TD WIDTH=150><A HREF="aq.html">American Samoa</A></TD> </TR><TR> 
<TD WIDTH=150><A HREF="an.html">Andorra</A></TD> 
<TD WIDTH=150><A HREF="ao.html">Angola</A></TD> 
<TD WIDTH=150><A HREF="av.html">Anguilla</A></TD> 
<TD WIDTH=150><A HREF="ay.html">Antarctica</A></TD> </TR><TR> 
<TD WIDTH=150><A HREF="ac.html">Antigua and Barbuda</A></TD> 
<TD WIDTH=150><A HREF="xq.html">Arctic Ocean</A></TD> 
<TD WIDTH=150><A HREF="ar.html">Argentina</A></TD> 
<TD WIDTH=150><A HREF="am.html">Armenia</A></TD> 
</TR>
</TABLE> 

Заметим, что это решение не совсем идеальное. Оно использует структуру TABLE, в которой разделение на строки сделано только для целей компоновки, а добавление новых образов потребует полной реструктуризации таблицы. Как правило, необходимо вставить атрибут WIDTH, чтобы сохранить ширину табличных столбцов - такой спецификации свойственна независимость от технической реализации, если размеры задаются в пикселях.

Табличные элементы, занимающие несколько строк или столбцов

Иногда требуется создать табличный элемент, объединяющий две или более ячейки, как в горизонтальном, так и в вертикальном направлении. В качестве примера рассмотрим склонение латинских местоимений:

    neut. masc.  fem. 
nom. id    is    ea 
acc. id    eum   eam 
gen. eius  eius  eius 
dat. ei    ei    ei 
abl. eo    eo    ea 

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

Пример span.html:

<TABLE BORDER=1 ALIGN=CENTER CELLPADDING=3> 
<CAPTION>Declination of <I>is</I> in singular</CAPTION> 
<TR><TH></TH><TH>neuter</TH><TH>masc.</TH><TH>fem.</TH></TR> 
<TR><TH>nom.</TH><TD ROWSPAN=2 VALIGN=MIDDLE><I>id</I></TD> 
<TD><I>is</I></TD><TD><I>ea</I></TD></TR> 
<TR><TH>acc.</TH><TD><I>eum</I></TD><TD><I>eam</I></TD></TR> 
<TR><TH>gen.</TH><TD COLSPAN=3 ALIGN=CENTER><I>eius</I></TD></TR> 
<TR><TH>dat.</TH><TD COLSPAN=3 ALIGN=CENTER><I>ei</I></TD></TR> 
<TR><TH>abl.</TH><TD COLSPAN=2 ALIGN=CENTER><I>eo</I></TD> 
<TD><I>ea</I></TD></TR> 
</TABLE> 

В данном примере первая ячейка специфицируется с ROWSPAN=2, что в действительности означает, что две смежные ячейки в одном и том же столбце объединяются в одну ячейку. Заметим, что когда Вы пишете код HTML для следующей строки (второй элемент TR), вы просто пропускаете элемент ячейки, соответствующий месту, которое уже взято для использования.

Вложенные таблицы

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

Вам необходимо быть очень внимательным в написании кода HTML для вложенных таблиц. Никаких новых элементов или особенностей для этого не требуется, только сочетание того, что уже было описано. Однако из-за сложности (вложенности), легко сделать ошибки, результатом которых является "грязный" вывод, а на обнаружение ошибок требуется много времени.

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

Пример nt.html:

<TITLE>tbl</TITLE> 
<TABLE ALIGN=CENTER> 
<CAPTION>Declination of <I>is</I></CAPTION> 
<TR><TD> 
<TABLE BORDER=1 ALIGN=CENTER CELLPADDING=3> 
<CAPTION>Singular</CAPTION> 
<TR><TH></TH><TH>neuter</TH><TH>masc.</TH><TH>fem.</TH></TR> 
<TR><TH>nom.</TH><TD ROWSPAN=2 VALIGN=MIDDLE><I>id</I></TD> 
<TD><I>is</I></TD><TD><I>ea</I></TD></TR> 
<TR><TH>acc.</TH><TD><I>eum</I></TD><TD><I>eam</I></TD></TR> 
<TR><TH>gen.</TH><TD COLSPAN=3 ALIGN=CENTER><I>eius</I></TD></TR> 
<TR><TH>dat.</TH><TD COLSPAN=3 ALIGN=CENTER><I>ei</I></TD></TR> 
<TR><TH>abl.</TH><TD COLSPAN=2 ALIGN=CENTER><I>eo</I></TD> 
<TD><I>ea</I></TD></TR> 
</TABLE> 
</TD> 
<TD> 
<TABLE BORDER=1 ALIGN=CENTER CELLPADDING=3> 
<CAPTION>Plurar</CAPTION> 
<TR><TH></TH><TH>neuter</TH><TH>masc.</TH><TH>fem.</TH></TR> 
<TR><TH>nom.</TD></TH><TD ROWSPAN=2 VALIGN=MIDDLE><I>ea</I></TD> 
<TD><I>ii (ei)</I></TD><TD><I>eae</I></TD></TR> 
<TR><TH>acc.</TH><TD><I>eos</I></TD><TD><I>eas</I></TD></TR> 
<TR><TH>gen.</TH><TD COLSPAN=2 ALIGN=CENTER><I>eorum</I></TD> 
<TD><I>earum</I></TD></TR> 
<TR><TH>dat.</TH><TD COLSPAN=3 ROWSPAN=3 ALIGN=CENTER VALIGN=MIDDLE> 
<I>iis (eis)</I></TD></TR> 
<TR><TH>abl.</TH></TR> 
</TABLE> 
</TD> 
</TABLE> 

Обратите внимание на использование конечных тегов, например, </TD>. Согласно спецификациям HTML 3, такой же код с пропуском конечных тегов является эквивалентным, приведенному выше. Однако для Netscape это является ошибкой и представление вложенной таблицы будет неверным при отсутствии конечных тегов.

Шрифты в табличных элементах

У нас часто спрашивают: каким образом для данных в таблице можно задавать вид, размер и цвет шрифта?

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

Если предположить, что Вам действительно необходимо задать вид, размер и цвет шрифта, учтите, что Вы можете рассчитывать на работу HTML кода в большинстве броузеров (допуская, что они обладают полной поддержкой таблиц), но это не соответствует стандартам. В частности, в Netscape элемент BASEFONT не влияет на текст в таблицах.

Коротко по поводу вида, размера и цвета шрифта:

Вид шрифта

В HTML коде не устанавливается вообще. Можно только использовать элементы разметки, чтобы задать шрифт специфического вида (например курсив, одинакового размера, жирный). Это не может быть установлено глобально, т.е. если Вы хотите установить их во всех элементах таблицы, они должны появляться отдельно в каждом TH или TD элементе. (FACE атрибут элемента FONT является нестандартным, но он относительно безвреден. Однако в любом случае, он является "локальной" разметкой текстового уровня, поэтому необходимо устанавливать его для каждой ячейки таблицы отдельно.)

Размер шрифта

Локально (например, внутри ячейки таблицы) можно использовать SMALL, BIG или FONT SIZE=... Вы можете установить глобальный (по умолчанию) размер шрифта с помощью BASEFONT, но это обычно не действует на содержимое ячеек таблицы.

Цвет шрифта

Локально (например, в ячейке таблицы) можно использовать FONT COLOR=... Вы можете по умолчанию установить цвет текста глобально, для всего документа - с помощью BODY TEXT=... Но Вы не можете установить по умолчанию цвет для таблицы, отличный от цвета документа.

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