Gå til innhold

Tabeller

Tabeller organiserer data i rader og kolonner. Bruk dem for tabulære data, ikke for layout.

Grunnleggende tabell

<table>
    <tr>
        <th>Navn</th>
        <th>Alder</th>
    </tr>
    <tr>
        <td>Anna</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Erik</td>
        <td>30</td>
    </tr>
</table>
Navn Alder
Anna 25
Erik 30

Tabell-elementer

Element Beskrivelse
<table> Selve tabellen
<tr> Table row (rad)
<th> Table header (overskriftscelle)
<td> Table data (datacelle)

Tabell med struktur

For bedre organisering, bruk thead, tbody og tfoot:

<table>
    <thead>
        <tr>
            <th>Produkt</th>
            <th>Pris</th>
            <th>Antall</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Bok</td>
            <td>299 kr</td>
            <td>2</td>
        </tr>
        <tr>
            <td>Penn</td>
            <td>49 kr</td>
            <td>5</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>843 kr</td>
            <td>7</td>
        </tr>
    </tfoot>
</table>
Element Beskrivelse
<thead> Overskriftsrader
<tbody> Hovedinnhold
<tfoot> Bunntekst/summering

Fordeler

  • Bedre for skjermlesere
  • Lettere å style med CSS
  • <tfoot> vises nederst selv om den skrives før <tbody>

Tabelltittel

<table>
    <caption>Elevresultater høst 2024</caption>
    <thead>
        ...
    </thead>
    <tbody>
        ...
    </tbody>
</table>

<caption> vises over tabellen og beskriver innholdet.

Slå sammen celler

Colspan - slå sammen kolonner

<table>
    <tr>
        <th colspan="2">Navn</th>
        <th>Alder</th>
    </tr>
    <tr>
        <td>Fornavn</td>
        <td>Etternavn</td>
        <td>År</td>
    </tr>
</table>

┌───────────────────┬───────┐
│       Navn        │ Alder │
├─────────┬─────────┼───────┤
│ Fornavn │Etternavn│  År   │
└─────────┴─────────┴───────┘

Rowspan - slå sammen rader

<table>
    <tr>
        <td rowspan="2">Mandag</td>
        <td>09:00 - Matte</td>
    </tr>
    <tr>
        <td>10:00 - Norsk</td>
    </tr>
    <tr>
        <td>Tirsdag</td>
        <td>09:00 - Engelsk</td>
    </tr>
</table>

┌─────────┬────────────────┐
│         │ 09:00 - Matte  │
│ Mandag  ├────────────────┤
│         │ 10:00 - Norsk  │
├─────────┼────────────────┤
│ Tirsdag │ 09:00 - Engelsk│
└─────────┴────────────────┘

Kombinert

<table>
    <tr>
        <th colspan="2" rowspan="2">Hjørne</th>
        <th colspan="2">Periode 1</th>
    </tr>
    <tr>
        <th>Uke 1</th>
        <th>Uke 2</th>
    </tr>
    <tr>
        <th rowspan="2">Avd A</th>
        <th>Team 1</th>
        <td>100</td>
        <td>120</td>
    </tr>
    <tr>
        <th>Team 2</th>
        <td>90</td>
        <td>110</td>
    </tr>
</table>

Tilgjengelighet

Scope-attributt

Forteller skjermlesere hva overskriften gjelder:

<table>
    <tr>
        <th scope="col">Navn</th>
        <th scope="col">Alder</th>
    </tr>
    <tr>
        <th scope="row">Anna</th>
        <td>25</td>
    </tr>
</table>
Verdi Beskrivelse
col Overskrift for kolonne
row Overskrift for rad
colgroup Overskrift for kolonnegruppe
rowgroup Overskrift for radgruppe

Headers-attributt

For komplekse tabeller:

<table>
    <tr>
        <th id="name">Navn</th>
        <th id="age">Alder</th>
    </tr>
    <tr>
        <td headers="name">Anna</td>
        <td headers="age">25</td>
    </tr>
</table>

Styling med CSS

Grunnleggende stil

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

Stripete rader

Med :nth-child() kan du style annenhver rad:

tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

Hover-effekt

tbody tr:hover {
    background-color: #e8e8e8;
}

Responsiv tabell

/* Horisontal scroll på mobil */
.table-container {
    overflow-x: auto;
}

<div class="table-container">
    <table>
        ...
    </table>
</div>

Praktiske eksempler

Karakteroversikt

<table>
    <caption>Karakterer vår 2024</caption>
    <thead>
        <tr>
            <th scope="col">Fag</th>
            <th scope="col">Karakter</th>
            <th scope="col">Poeng</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Matematikk</td>
            <td>5</td>
            <td>85</td>
        </tr>
        <tr>
            <td>Norsk</td>
            <td>4</td>
            <td>72</td>
        </tr>
        <tr>
            <td>Engelsk</td>
            <td>5</td>
            <td>88</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Snitt</td>
            <td>4.7</td>
            <td>82</td>
        </tr>
    </tfoot>
</table>

Timeplan

<table>
    <caption>Timeplan mandag-fredag</caption>
    <thead>
        <tr>
            <th>Tid</th>
            <th>Mandag</th>
            <th>Tirsdag</th>
            <th>Onsdag</th>
            <th>Torsdag</th>
            <th>Fredag</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>08:00</th>
            <td>Matte</td>
            <td>Norsk</td>
            <td>Engelsk</td>
            <td>Matte</td>
            <td>Gym</td>
        </tr>
        <tr>
            <th>09:00</th>
            <td>Matte</td>
            <td>Norsk</td>
            <td>Engelsk</td>
            <td>Naturfag</td>
            <td>Gym</td>
        </tr>
    </tbody>
</table>

Prisliste

<table>
    <thead>
        <tr>
            <th>Plan</th>
            <th>Pris/mnd</th>
            <th>Funksjoner</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Gratis</td>
            <td>0 kr</td>
            <td>Grunnleggende</td>
        </tr>
        <tr>
            <td>Pro</td>
            <td>99 kr</td>
            <td>Alt inkludert</td>
        </tr>
        <tr>
            <td>Business</td>
            <td>299 kr</td>
            <td>Ubegrenset</td>
        </tr>
    </tbody>
</table>

Oppsummering

Element Beskrivelse
<table> Tabellen
<caption> Tabelltittel
<thead> Overskriftsseksjon
<tbody> Hovedinnhold
<tfoot> Bunnseksjon
<tr> Rad
<th> Overskriftscelle
<td> Datacelle
colspan Slå sammen kolonner
rowspan Slå sammen rader
scope Tilgjengelighet

Ikke bruk tabeller for layout

Tabeller skal kun brukes for tabulære data. Bruk CSS Flexbox eller Grid for sidelayout.