<<< Förra avsnittet Innehåll Nästa avsnitt >>>

Listor

Det finns tre sorters listor i HTML: Listor kan staplas, d.v.s. man kan ha en lista inuti en lista. Håll bara koll på slutkoderna, annars kan det bli väldigt rörigt!

Punktlista

En punktlista görs med styrkoden <UL> som står för unordered list. Listan inleds med <UL> och avslutas med </UL>. Varje punkt på listan inleds med <LI> (list item). Det går att skjuta in en rubrik till listan innan första <LI>. Rubriken är inte en punkt på listan och ska alltså inte ha <LI>.

KodVisas som 
<UL>
<B>Några huvudstäder 
i Europa</B>
<LI>London
<LI>Paris
<LI>Madrid
<LI>Rom
</UL>
    Några huvudstäder i Europa
  • London
  • Paris
  • Madrid
  • Rom

I en grafisk webbläsare kommer listans innehåll att dras in lite åt höger. För varje <LI> kommer webbläsaren lägga ut en inledande fet punkt. Listor inuti listor får annorlunda utseende på punkterna. Den första listnivån får en fylld cirkel, nivå två får en ofylld cirkel och nivå tre får en fyrkant.

Man kan själv styra utseendet på punkterna med attributet TYPE. TYPE="DISC" ger en fylld cirkel, TYPE="SQUARE" ger en fyrkant och TYPE="CIRCLE" ger en ofylld cirkel. Du kan alltså få alla punkter att se likadana ut eller ändra ordningen.

Anges TYPE till <UL> gäller typen hela listan, och anges TYPE till <LI> gäller typen för en individuell listpunkt.

Andra symboler än cirklar och fyrkanter kan åstadkommas med style sheets (se detta avsnitt).

KodVisas som 
<UL>
<LI>Kända torg i London
<UL>
<LI>Picadilly Circus
<LI>Trafalgar Square
</UL>
<LI>Kända byggnadsverk i Paris
<UL TYPE="SQUARE">
<LI>Eiffeltornet
<LI>Triumfbågen
</UL>
</UL>
  • Kända torg i London
    • Picadilly Circus
    • Trafalgar Square
  • Kända byggnadsverk i Paris
    • Eiffeltornet
    • Triumfbågen

Numrerad lista

En numrerad lista görs med styrkoden <OL> som står för ordered list. Samma princip som onumrerad lista: inled med <OL>, varje punkt på listan inleds med <LI> och hela listan avslutas med </OL>. Varje punkt på listan kommer automatiskt numreras i ordning.

KodVisas som 
<OL>
<B>Sveriges största sjöar</B>
<LI>Vänern
<LI>Vättern
<LI>Mälaren
<LI>Hjälmaren
</OL>
    Sveriges största sjöar
  1. Vänern
  2. Vättern
  3. Mälaren
  4. Hjälmaren

Varianter:

<OL TYPE="A"> listan numreras A, B, C, D...
<OL TYPE="a"> listan numreras a, b, c, d...
<OL TYPE="I"> listan numreras I, II, III, IV...
<OL TYPE="i"> listan numreras i, ii, iii, iv...
<OL START="4"> numreringen startar från 4. Ange alltid startvärdet som en siffra, även om du angett något annat som TYPE.
<LI VALUE="4"> denna listpunkt har värdet 4, gäller härifrån och framåt

Definitionslista

En definitionslista kan användas då man skriver ordförklaringar, uppslagssidor etc. Den här listtypen skiljer sig mot de två tidigare då du här måste varva term och definition. Börja som vanligt med en inledande styrkod <DL>. Sedan kommer "termkoden" <DT> och första termen. Därefter "definitionskoden" <DD> och definitionen. Varken <DT> eller <DD> behöver någon slutkod. Hela definitionslistan ska avslutas med </DL>

Den här typen av lista är speciellt användbar när man har mycket textmassa i definitionen, då blir raderna snyggt indragna. Indraget blir lika stort som för de andra listtyperna.

Termen får bara innehålla formaterad text, medan definitionsdelen kan innehålla flera stycken, separerade med t.ex. <P>.

Normalt sett hamnar term och definition på varsin rad efter varandra. Om man anger listan som <DL COMPACT> så sätter webbläsaren både termen och definitionen på samma rad om de får plats. Detta tillägg accepteras inte av alla webbläsare.

KodVisas som 
<DL>
<DT>Onumrerad lista
<DD>Allt innehåll har samma prioritet. 
<DT>Numrerad lista
<DD>Ordningen på innehållet är en värdering.
<DT>Definitionslista
<DD>Den varvar termer med definitioner.
</DL>
Onumrerad lista
Allt innehåll har samma prioritet.
Numrerad lista
Ordningen på innehållet är en värdering.
Definitionslista
Den varvar termer med definitioner.

Äldre listtyper

Förutom <UL>, <OL> och <DL> finns det även två äldre listtyper: <DIR> och <MENU>. För båda dessa listtyper markeras listpunkterna med <LI>.

Tanken var att en <DIR>-lista skulle visas som en meny i flera spalter, och att en <MENU>-lista skulle visas som en enspaltig meny, men i praktiken visas båda dessa listor likadant som en <UL>-lista.

HTML-specifikationen rekommenderar att man inte använder dessa listtyper.

<<< Förra avsnittet Innehåll Nästa avsnitt >>>

Copyright © Anders Hultman 1998-02-21