Задание.

1. Запустите текстовый редактор и создайте html-документ с табличным представлением данных.

Название страницы: Библия.

Содержимое страницы: Библия на трех языках: английском, латинском и финском..

Например

The beginning of Genesis in three languages

Latin (Vulgate)	English (King James version)	Finnish (1992 version)
1. In principio creavit Deus caelum et terram.	In the beginning God created the heaven and the earth.	Alussa Jumala loi taivaan ja maan.
2.Terra autem erat inanis et vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas.	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.	Maa oli autio ja tyhjд, pimeys peitti syvyydet, ja Jumalan henki liikkui vetten yllд
3. Dixitque Deus "Fiat lux" et facta est lux.	And God said, Let there be light: and there was light.	Jumala sanoi: "Tulkoon valo!" Ja valo tuli.

2. Сохраните полученный документ под названием lab7.Htm.

3. Запустите браузер ms Internet Explore для просмотра данного документа. Лабораторная работа №8

Тема: Различные способы использования таблиц в HTML-документе..

Цель работы: Научиться использовать таблицы для представления списков, меню, числовых данных в HTML-языке.

Инструменты: Текстовый редактор NotePad. HTML-браузер MS Internet Explore.

Краткие сведения из теории

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

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

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

Пример

<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. Нижеследующие примеры содержат вручную отформатированную таблицу, представленную с использованием элемента 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 для следующей строки (второй элемент TR), вы просто пропускаете элемент ячейки, соответствующий месту, которое уже взято для использования.