Таблицы - tables (Нет в HTML 2.0!)
Концепция таблиц в 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>
и обычно представляется броузером следующим образом:
Таким образом, тег 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 e
Очевидно, этот пример лучше реализовать с помощью таблицы 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ил FONTSIZE=... Вы можете установить глобальный (по умолчанию)размер шрифта с помощь BASEFONT, но это обычно не действует на содержимое ячеек таблицы
- Цвет шрифт
- Локально (например, в ячейке таблицы)можно использоват FONTCOLOR=... Вы можете по умолчанию установить цвет текста глобально, дл всегодокумента - с помощь BODYTEXT=... Но Вы не можете установить по умолчанию цвет для таблицы, отличный от цвета документа
Таблицы стилейпредоставляют инструментальные средства для более детального исполнения, но поддержка некоторых из них в броузерах все еще в стадии разработки
