htmlbook.ru - Для тех, кто делает сайты
Статьи Книги Шаг за шагом Рецепты Форум Графика для Web
Главная страница > Статьи > Списки > Нумерованные списки

Нумерованные списки

Влад Мержевич

Текстовая версия   Добавить комментарий

Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от параметров тега <OL>, который и используется для создания списка. В качестве маркеров могут быть следующие значения:

В табл. 1 приведены различные параметры тега <OL> и результат их применения.

Табл. 1. Варианты нумерованных списков
Код HTML Пример
<ol>
<li>текст</li>
<li>текст</li>
<li>текст</li>
</ol>

Нумерованный список с параметрами по умолчанию:

  1. текст
  2. текст
  3. текст
<ol start="5">

Нумерованный список начинающийся с пяти:

  1. текст
  2. текст
  3. текст
<ol type="A">

Нумерованный список с заглавными буквами латинского алфавита:

  1. текст
  2. текст
  3. текст
<ol type="a">

Нумерованный список с прописными буквами латинского алфавита:

  1. текст
  2. текст
  3. текст
<ol type="I">

Нумерованный список с римскими цифрами:

  1. текст
  2. текст
  3. текст
<ol type="i">

Нумерованный список с прописными римскими цифрами:

  1. текст
  2. текст
  3. текст
<ol type="1">

Нумерованный список с арабскими цифрами:

  1. текст
  2. текст
  3. текст
<ol type="I" start="7">

Список с римскими цифрами начинающийся с семи:

  1. текст
  2. текст
  3. текст


В примере 1 показано создание списка с использованием римской нумерации.

Пример 1. Создание нумерованного списка

Валидный HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Римские числа</title>
</head>
<body>

<ol type="I" start="8">
 <li>Король Магнум XLIV</li>
 <li>Король Зигфрид XVI</li>
 <li>Король Сигизмунд XXI</li>
 <li>Король Хусбрандт I</li>
</ol>

</body>
</html>

Результат примера показан ниже.

Рис. 1. Вид нумерованного списка

Рис. 1. Вид нумерованного списка в браузере Opera

Обратите внимание, что до и после списка автоматически добавляются вертикальные отступы, это является особенностью тега <OL>.

Статья опубликована: 07.09.2005 Последнее обновление: 26.03.2008

Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.

  1. Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
  2. Удаляются любые комментарии, которые:
    • включают множество ошибок;
    • написаны безграмотно;
    • не имеют отношения к данной статье;
    • не содержат никакой полезной информации для посетителей.
  3. Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
  4. Потренироваться в написании комментариев вы можете в песочнице.

Комментарии к статье

ShleS

17.06.2007

Влад, все отлично и как всегда понятно с первого взгляда!!
Спасибо вам!!
Но также сразу понятно, что в "Табл. 1. Варианты нумерованных списков" не хватает наглядности, что ли?! smile
То есть текст есть, а примера как выглядит сам список нет...

Влад Мержевич

19.06.2007

В таблице и приводится, как выглядит тот или иной список.

BETEP

25.06.2007

В таблице действительно нет примеров отображения, отображается например следующее
---------------------
Нумерованный список с римскими цифрами:

текст
текст
текст
---------------------

Влад Мержевич

27.06.2007

Ага, все понятно, это браузер IE обрезал маркеры. Поправил код, теперь корректно отображается и в IE.

ДиректарЪ

22.08.2007

Спасибо за материал
Один вопрос, можно ли с помощью упомянутых тегов сделать нумерованный список типа:
1)
2)
3) ...

Тоесть чтобы номеры были со скобками, а не с точками

Влад Мержевич

23.08.2007

Все виды списков приведены в табл. 1 и другие типы не предусмотрены. Можно использовать свойство content и псевдоэлемент before.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
li:before { content: ") "; }
</style>
</head>
<body>
<ol>
<li>Король Магнум XLIV</li>
<li>Король Зигфрид XVI</li>
<li>Король Сигизмунд XXI</li>
<li>Король Хусбрандт I</li>
</ol>
</body>
</html>

VD

19.10.2007

Здравстуйте!Подскажите как просто арабские цифры писать в HTML?

Ярик

27.12.2007

Прописными буквами XVI. И, кстати, не только в HTML.

Аэлита

15.02.2008

А как написать :
5.1 bla-bla-bla;
5.2 bla-bla-bla;
5.3 bla-bla-bla;

Добавить комментарий

Имя
Комментарий

Сохранить имя (используется cookie)

Поиск по сайту

Списки
Разделы
Теги по теме

LI
Тег LI определяет отдельный элемент списка. Внешний тег UL или OL устанавливает тип списка — маркированный или нумерованный.

OL
Тег OL устанавливает нумерованный список. Каждый элемент списка должен начинаться с тега LI.

Copyright 2002–2008 Влад Мержевич, по всем вопросам пишите по адресу: vlad@htmlbook.ru

О сайте | Планы на будущее | Использование сайта | Борьба с ошибками | Технологии | Поддержать проект