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

HTML в примерах

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

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

Теоретически очевидный ответ для реализации этого - использовать конструкцию 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, чтобы сохранить ширину табличных столбцов - такой спецификации свойственна независимость от технической реализации, если размеры задаются в пикселях.