banner

6.2: Ongeordende / Ongesorteerde lijsten

Als je paragraaf 6.1 begrepen hebt, dan is de ongesorteerde lijst gemakkelijk. In plaats van <ol> gebruik je <ul> (Unordered List). In plaats van nummers of letters wordt ieder List Item (li) uit je lijst dan vooraf gegeaan door een 'opsommingsteken'. Een ongesorteerde lijst sluit je natuurlijk af met </ul>

Ook de verschijningsvorm van het opsommingsteken kun je aanpassen door in het <ul>-element het volgende stijl attribuut toe te voegen:

<ul style="list-style-type:disc;">
  • standaard opsomming
  • standaard opsomming
<ul style="list-style-type:square;">
  • opsomming met vierkantjes
  • opsomming met vierkantjes
<ul style="list-style-type:circle;">
  • opsomming met open rondjes
  • opsomming met open rondjes
Met <ul> maak je een ongeordende lijst die bestaat uit rondjes (standaard), vierkantjes of open cirkels. In de laatste twee gevallen zet je resp. list-style-type: square; en list-style-type: circle; in het <ul> element

Het is ook mogelijk om binnen één lijst verschillende opsommingstekens te laten zien. Je neemt dan het list-style-type: attribuut niet op in het <ul> element, maar in het <li> element

<ul>
  • opsomming standaard
  • opsomming met open rondje (<li style="list-style-type:circle">...</li>)
  • opsomming met vierkantje (<li style="list-style-type:square">...</li>)
</ul>

Opdracht 15: Ongeordende lijsten

Open de pagina sport.html en kies een ongeordende opsommingsmethode om alle spelers van jouw team te noemen. Bewaar daarna deze pagina.

Een opsomming binnen een opsomming (lijst met meerdere niveau's)

Binnen een listitem (li) van een lijst kun je weer een hele nieuwe lijst maken. Dit is vooral handig als een onderwerp uit je lijst zelf ook weer uit meerdere onderwerpen bestaat.
Achter een <li> element gebruik je gewoon weer <ol> of <ul>.

<ol>
  <li>Groente</li>
  <li>Fruit
        <ul style="list-style-type: square;">
            <li>appels</li>
            <li>peren</li>
            <li>bananen</li>
        </ul>
  </li>
  <li>Vlees</li>
</ol>
Geeft het volgende als resultaat:
  1. Groente
  2. Fruit
    • appels
    • peren
    • bananen
  3. Vlees
Let op dat de <li> waarin de andere lijst komt pas afgesloten wordt nadat je die andere lijst ook hebt afgesloten!

Opdracht 16: Meerdere niveau's

Verander de pagina sport.html door er een opsomming met twee niveau's in te maken:
  • Eerste niveau: Geordende lijst met veldposities (bijv: doel / verdediger/ middenvelder / aanvaller)
  • Tweede niveau: Ongeordende lijst met spelers per positie