Wstawianie list numerowanych w HTML-u

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 2580 razy

Wstawianie listy numerowanej w kodzie strony

Oto przykład utworzenia listy numerowanej:

<p>Lista pięciu największych jezior w Polsce:</p> <ol><li>Śniardwy</i> <li>Mamry</li> <li>Łebsko</li> <li>Dąbie</li> <li>Miedwie</li></ol>

Wynik działania powyższego kodu:

Lista pięciu największych jezior w Polsce:

  1. Śniardwy
  2. Mamry
  3. Łebsko
  4. Dąbie
  5. Miedwie

Listy można zagnieżdżać:

<style>li ol{ /* dla elementu ol znajdującego się wewnątrz elementu li ustaw następujące style */ list-style-type: lower-alpha; } </style> <p>Lista pięciu największych jezior w Polsce:</p> <ol><li>Śniardwy <ol><li>powierzchnia: 11487,5 ha</li> <li>głębokość maksymalna: 23,4 m</li></ol> </li> <li>Mamry <ol><li>powierzchnia: 9851,0 ha</li> <li>głębokość maksymalna: 43,8 m</li></ol> </li> <li>Łebsko <ol><li>powierzchnia: 7020,0 ha</li> <li>głębokość maksymalna: 6,3 m</li></ol> </li> <li>Dąbie <ol><li>powierzchnia: 5408 ha</li> <li>głębokość maksymalna: 4,2 m</li></ol> </li> <li>Miedwie <ol><li>powierzchnia: 3491,0 ha</li> <li>głębokość maksymalna: 43,8 m</li></ol> </li></ol>

Wynik powyższego kodu:

Lista pięciu największych jezior w Polsce:

  1. Śniardwy
    1. powierzchnia: 11487,5 ha
    2. głębokość maksymalna: 23,4 m
  2. Mamry
    1. powierzchnia: 9851,0 ha
    2. głębokość maksymalna: 43,8 m
  3. Łebsko
    1. powierzchnia: 7020,0 ha
    2. głębokość maksymalna: 6,3 m
  4. Dąbie
    1. powierzchnia: 5408 ha
    2. głębokość maksymalna: 4,2 m
  5. Miedwie
    1. powierzchnia: 3491,0 ha
    2. głębokość maksymalna: 43,8 m

Użyteczne style CSS

Dla znacznika <ol> dostępne są style specjalne, sterujące sposobem wyświetlania listy. Za pomocą stylu list-style-type można zmienić domyślny sposób numerowania:

list-style-type: armenian|cjk-ideographic|decimal|decimal-leading-zero|georgian|hebrew|hiragana|hiragana-iroha|katakana|katakana-iroha|lower-alpha|lower-greek|lower-latin|lower-roman|none|upper-alpha|upper-latin|upper-roman|initial|inherit; /* ustawia znacznik listy numerowanej */

Przykład:

<p>Lista pięciu największych jezior w Polsce:</p> <ol style="list-style-type: upper-roman"><li>Śniardwy</li> <li>Mamry</li> <li>Łebsko</li> <li>Dąbie</li> <li>Miedwie</li></ol>

Wynik działania powyższego kodu:

Lista pięciu największych jezior w Polsce:

  1. Śniardwy
  2. Mamry
  3. Łebsko
  4. Dąbie
  5. Miedwie
Propozycje książek