Структура таблиц в HTML включает строки и столбцы, которые могут иметь заголовки (headers - имена, титулы, объяснения). Таблица в обыкновенном варианте представляется в обычном виде, с согласованно расположенными столбцами. Таблицы - значимое совершенствование в HTML 3.2 по сопоставлению с HTML 2.0. С иной стороны конструкция таблиц HTML 3.2 является каждого лишь подмножеством Табличной модели HTML3 (RFC 1942).
D HTML табличные элементы обыкновенно называют ячейками, дабы избежать смешивания с табличным элементом (TABLE element), тот, что в изложении HTML соответствует каждой таблице.
Неудивительно, что таблицы еще не поддерживаются всеми броузерами, и, если даже помощь существует, она может быть не дюже добротной. Следственно для представления данных, имеющих конструкцию, сходственную матрице, не неизменно применяются таблицы.
Для представления таблиц применяются нескольких видов тегов HTML:
Давайте начнем с дюже простого примера. Он связан с представлением таблицы чисел 2 на 2 (единичная матрицa) без каких либо заголовков. Код 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).
Есть несколько элементов, которые Вы можете добавить к вышерассмотренной примитивный табличной модели:
Следующий, достаточно нормальный пример показывает все вышеупомянутые особенности:
<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 (с признаками по умолчанию), тот, что содержит исключительную строку с двумя ячейками данных, всякая из которых включает абзац.
В больше всеобщем случае Вы обязаны поделить параллельный текст на логические части (абзацы), и сделать всякую часть ячейкой таблицы. Это может затребовать определенной работы (если у Вас нет соответствующей программы для этого), потому что Вы обязаны уделить внимание положительной последовательности работы с текстом: позже первой части первого текста Вы обязаны трудиться с первой частью второго текста и т.д.
Нижеследующий пример представляет фрагмент текста из Библии в 3 вариантах и переводах:
<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 и нижеприведенный пример:
<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>
Для многих людей таблицы - это таблицы числовых данных, но таблицы также отменно могут представлять и другие данные.
Для числовых таблиц соответствующее выравнивание обычно значимо для образования легко читаемого представления.
Целые значения чисел в столбцах обязаны быть выровнены по правому краю. Этого, в тезисе, добиться нетрудно. Существует два варианта:
Числа, содержащие десятичную точку (либо во многих языках - запятую) обязаны быть выровнены согласно этому правилу, что, к сожалению, нереально в HTML 3.2. (Вестимы попытки удовлетворения сходственных запросов, впрочем на сегодня немного кто поддерживает их.) Существует, правда, один вариант решения - представлять такие значения так, дабы в всей колонке справа от десятичной точки было одно и то же число цифр и применять при этом ALIGN=RIGHT.
Однако, отображение может получиться неудовлетворительным, если цифры применяют пропорциональные шрифты, где размеры цифр значительно отличаются. Допустимо, но дюже изнурительно, поправить это укладыванием данных в всякую ячейку с применением элемента TT. (Подметьте, что внутри элемента TT запрещено применение элемента TABLE!)
Нижеследующие примеры содержат вручную отформатированную таблицу, представленную с применением элемента PRE, а после этого для тех же данных применяется элемент TABLE. В всеобщем, для применения элемента TABLE требуется огромнее работы и внимания, впрочем итоги нередко много отличнее.
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). Для ясности дальнейший пример представлен без связей:
<PRE> Afghanistan Albania Algeria American Samoa Andorra Angola Anguilla Antarctica Antigua and Barbuda Arctic Ocean Argentina Armenia </PRE>
Другой вариант - представить образы примитивно как текстовые абзацы, с применением пробелов либо пробелов и запятых, как разделителей. Это значит, что броузер поделит текст на строки, и это представление будет дюже суперкомпактным:
<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. Скажем:
<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, как это показано ниже:
<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 для дальнейшей строки (2-й элемент TR), вы примитивно пропускаете элемент ячейки, соответствующий месту, которое теснее взято для применения.
Таблицы могут быть вложенными, потому что элементы TD и TH могут содержать и блоковый элемент и табличный. Во вложенных таблицах легко сделать ошибки, впрочем их применение все же обоснованно.
Вам нужно быть очень внимательным в написании кода HTML для вложенных таблиц. Никаких новых элементов либо особенностей для этого не требуется, только сочетание того, что теснее было описано. Впрочем из-за трудности (вложенности), легко сделать ошибки, итогом которых является "грязный" итог, а на выявление ошибок требуется много времени.
Простейший случай - таблица с исключительной строкой, состоящей из 2-х элементов, весь из которых - таблица. Это может быть использовано для сравнительного представления 2-х сходственных таблиц. Усложняя наш грамматический пример, дальше приводим таблицу, содержащую две таблицы - одна для склонений в исключительном числе, иная - во множественном:
<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 не влияет на текст в таблицах.
Коротко по поводу вида, размера и цвета шрифта:
Таблицы стилей предоставляют инструментальные средства для больше детального исполнения, но помощь некоторых из них в броузерах все еще в стадии разработки.