Frontend
Backend
Verktøy og Rammeverk
Sikkerhet

Tabeller og Lister i HTML

Lær hvordan du lager strukturerte tabeller og forskjellige typer lister i HTML.

HTML Lister

HTML tilbyr tre typer lister for å organisere innhold:

Uordnet Liste (Bullet Points)

Uordnede lister bruker <ul> taggen og er perfekte for lister hvor rekkefølgen ikke er viktig. Hver listeoppføring markeres med en bullet point.

Eksempel på uordnet liste:

  • Epler
  • Bananer
  • Appelsiner
<ul>
    <li>Epler</li>
    <li>Bananer</li>
    <li>Appelsiner</li>
</ul>

Ordnet Liste (Nummerert)

Ordnede lister bruker <ol> taggen og er ideelle for sekvenser eller trinn hvor rekkefølgen er viktig. Hver oppføring nummereres automatisk.

Eksempel på ordnet liste:

  1. Kok opp vann
  2. Tilsett pasta
  3. Kok i 10-12 minutter
<ol>
    <li>Kok opp vann</li>
    <li>Tilsett pasta</li>
    <li>Kok i 10-12 minutter</li>
</ol>

Definisjonsliste

Definisjonslister bruker <dl> taggen og er perfekte for å liste opp termer med deres definisjoner eller beskrivelser.

Eksempel på definisjonsliste:

HTML
HyperText Markup Language - språket som brukes for å strukturere nettsider.
CSS
Cascading Style Sheets - språket som brukes for å style nettsider.
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language - språket som brukes for å strukturere nettsider.</dd>
    
    <dt>CSS</dt>
    <dd>Cascading Style Sheets - språket som brukes for å style nettsider.</dd>
</dl>

HTML Tabeller

Tabeller i HTML brukes for å organisere data i rader og kolonner. De er perfekte for å vise strukturert informasjon som prislister, timeplan eller statistikk.

Grunnleggende Tabellelementer

  • <table> - Definerer en tabell
  • <tr> - Definerer en rad (table row)
  • <th> - Definerer en overskriftscelle (table header)
  • <td> - Definerer en datacelle (table data)

Eksempel på enkel tabell:

Produkt Pris Antall
T-skjorte 299 kr 50
Bukse 599 kr 30 
<table>
    <tr>
        <th>Produkt</th>
        <th>Pris</th>
        <th>Antall</th>
    </tr>
    <tr>
        <td>T-skjorte</td>
        <td>299 kr</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Bukse</td>
        <td>599 kr</td>
        <td>30</td>
    </tr>
</table>

Avanserte Tabellfunksjoner

HTML tilbyr flere elementer for å gjøre tabeller mer strukturerte og lettere å forstå:

  • <thead> - Grupperer overskriftsinnhold
  • <tbody> - Grupperer hovedinnholdet
  • <tfoot> - Grupperer bunntekst
  • <caption> - Legger til en tabelltittel

Eksempel på avansert tabell:

Salgsrapport 2024
Produkt Q1 Q2 Q3 Q4
Laptop 150 200 180 300
Mobil 400 380 420 500
Total 550 580 600 800 
<table>
    <caption>Salgsrapport 2024</caption>
    <thead>
        <tr>
            <th>Produkt</th>
            <th>Q1</th>
            <th>Q2</th>
            <th>Q3</th>
            <th>Q4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Laptop</td>
            <td>150</td>
            <td>200</td>
            <td>180</td>
            <td>300</td>
        </tr>
        <tr>
            <td>Mobil</td>
            <td>400</td>
            <td>380</td>
            <td>420</td>
            <td>500</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Total</th>
            <td>550</td>
            <td>580</td>
            <td>600</td>
            <td>800</td>
        </tr>
    </tfoot>
</table>

Celle- og Kolonnespenn

Du kan la celler strekke seg over flere rader eller kolonner ved hjelp av rowspan og colspan attributtene:

  • colspan="2" - Lar en celle strekke seg over 2 kolonner horisontalt. For eksempel vil dette la en overskriftscelle dekke to kolonner under seg.
  • rowspan="3" - Lar en celle strekke seg over 3 rader vertikalt. Dette er nyttig når samme informasjon gjelder for flere rader.

Eksempel på tabell med celle- og kolonnespenn:

Kontaktinformasjon
Navn: Ola Nordmann
Telefon: 123 45 678

Her bruker vi colspan="2" for å la overskriften "Kontaktinformasjon" strekke seg over begge kolonnene i tabellen.

Eksempel med både colspan og rowspan:

Produkt Salg
2023 2024
Laptop 150 200

I dette eksempelet:

  • rowspan="2" på "Produkt" gjør at cellen dekker to rader
  • colspan="2" på "Salg" gjør at overskriften dekker både 2023 og 2024 kolonnene
<table>
    <tr>
        <th rowspan="2">Produkt</th>
        <th colspan="2">Salg</th>
    </tr>
    <tr>
        <th>2023</th>
        <th>2024</th>
    </tr>
    <tr>
        <td>Laptop</td>
        <td>150</td>
        <td>200</td>
    </tr>
</table>

HTML Innhold

1. Grunnleggende HTML 2. Semantiske Elementer 3. Skjemaer 4. Tabeller og Lister 5. Bilder og Multimedia 6. Lenker 7. Metadata