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


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



Содержание раздела