2.2.3. Упорядочивание информации на странице
Упорядочивание информации на странице может быть выполнено с помощью следующих средств языка разметки:
Списков.
Таблиц.
Списки
С помощью списков можно упорядочить строки текста, снабдив их определенными маркерами и получить определенное взаимное расположение.
Существуют три вида списков, показанных в таблице 2.2.
Таблица 2.2
Типы списков
Нумерованный список |
Маркированный список |
Список определений |
<OL> <LI>строка1 <LI>строка2 ... <LI>строкаi </OL>
|
<UL> <LI>строка1 <LI>строка2 ... <LI>строкаi </UL>
|
<DL> <DT>Термин1<DD>Определение1 <DT>Термин2<DD>Определение2 ... <DT>Терминi<DD>Определениеi </DL>
|
Теги OL, UL и DL отмечают область страницы, где находится список. Тег LI отмечает строку-элемент списка его можно закрыть парным тегом </LI>. Тег DT отмечает строку термин, а тег DD строку определение этого термина, она выводится ниже термина с отступом.
В таблице 2.3 приведены теги для формирования трех разных типов списков.
Таблица 2.3
Примеры списков
Нумерованный список |
Маркированный |
Список определений |
<ol> <li>Yes <li>No <li>Ignore </ol> |
<ul> <li>Yes <li>No <li>Ignore </ul> |
<dl> <dt>Yes<dd>Да <dt>No<dd>Нет <dt>Ignore<dd>Отмена </dl> |
Результат действия тегов показан на рисунке 2.1.
Рис.2.1. Фрагмент страницы со списками в браузере
Таблицы
Создание таблицы требует использовать ряд тегов. Тегом TABLE отмечают область страницы, где будет находиться таблица. Строки таблицы размечаются тегом TR. Для создания ячеек таблицы служит тег TD, а для создания ячеек шапки таблицы можно использовать тег TH, его содержание выводится жирным шрифтом.
Таблицу можно снабдить подписью - заголовком, используя тег CAPTION. Формат тега:
<CAPTION ALIGN="Type"></CAPTION> - заголовок таблицы
Тип выравнивания Typе может принимать значения Top (заголовок над таблицей), Bottom (заголовок под таблицей).
Теги формирования ячеек можно снабдить параметром ALIGN, который задает выравнивание содержания ячеек. Форматы этих тегов примут вид: <TH ALIGN="Type"></TD>
<TD ALIGN="Type"></TD>
Здесь значение Type – тип выравнивания в ячейке: center (выравнивание по центру), left (выравнивание по левому краю), right (выравнивание по правому краю).
При создании сложных таблиц в тегах TH и TD используют параметры COLSPAN и ROWSPAN, которые позволяют задавать ширину ячейки в клетках и высоту ячейки в строках соответственно.
Пример. Дана таблица, нужно сформировать разметку для ее вывода.
One |
Two |
Three |
|
Yes |
Ok |
One |
Four |
No |
Two |
Five |
|
Cancel |
Three |
Six |
|
Разметка для вывода данной таблицы примет вид:
<table border>
<caption align="top"><b>Table sample</b></caption><tr>
<th>One</th><th>Two</th><th colspan="2">Three</th>
</tr><tr>
<td>Yes</td><td rowspan="3" align="center">Ok</td>
<td>One</td><td>Four</td>
</tr><tr>
<td>No</td><td>Two</td><td>Five</td>
</tr><tr>
<td>Cancel</td><td>Three</td><td>Six</td></tr>
</table>
Параметр BORDER тега TABLE предписывает выводить разделительные линии в таблице. Вид таблице в окне браузера показан на рисунке 2.2.
Рис.2.2. Таблица в браузере
Допускается задавать толщину линий разграфки таблицы с помощью параметра BORDER. Например, BORDER="2" задает толщину линий в 2 пиксела.