Учебник по программированию на HTML

HTML в примерах

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

Часто требуется представить большой набор относительно малых образов. Например, у нас есть документ о различных странах и мы хотим создать меню из имен стран, чтобы использовать его, как индекс. И индекс должен использовать обычные связи, например:

<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>

Представление меню

Рис. Пример на web-странице.

Также можно обеспечить перевод строки с помощью элемента 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>

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

Рис. Пример на web-странице.

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