Du har en liste med data som hører sammen: navn, byer, priser, datoer. I et avsnitt blir det rotete. I en punktliste mister du sammenhengen mellom kolonnene. Det du trenger er en HTML-tabell. Tabeller organiserer data i rader og kolonner slik at sammenhengen mellom verdiene er umiddelbar og tydelig.
Byggesteinene i en HTML-tabell
En tabell i HTML består av fire elementer som jobber sammen. table er det ytterste elementet som omslutter hele tabellen. tr (table row) lager en rad. th (table header) lager en overskriftscelle. td (table data) lager en vanlig datacelle.
Strukturen følger et tydelig hierarki: table inneholder rader, og rader inneholder celler. Tenk på det som et rutenett der du bygger rad for rad, fra venstre til høyre.
Slik lager du en enkel HTML-tabell
Si at du vil vise en tabell med fornavn og etternavn for to personer. Du trenger en overskriftsrad og to datarader:
<table>
<tr><th>Fornavn</th><th>Etternavn</th></tr>
<tr><td>Ola</td><td>Nordmann</td></tr>
<tr><td>Kari</td><td>Nordmann</td></tr>
</table>
Første rad bruker th-celler for overskriftene "Fornavn" og "Etternavn". De to neste radene bruker td-celler for selve dataen. Nettleseren viser th-tekst i fet skrift og sentrert som standard, mens td-tekst er normal og venstrejustert. Denne forskjellen hjelper brukeren å skille overskrifter fra data med en gang.
Bruk thead og tbody for bedre struktur
For tabeller med mer enn et par rader bør du dele opp innholdet med thead og tbody. Thead omslutter overskriftsraden, og tbody omslutter dataradene:
<table>
<thead>
<tr><th>Fornavn</th><th>Etternavn</th></tr>
</thead>
<tbody>
<tr><td>Ola</td><td>Nordmann</td></tr>
<tr><td>Kari</td><td>Nordmann</td></tr>
</tbody>
</table>
Resultatet ser likt ut i nettleseren, men strukturen gir to fordeler. Skjermlesere bruker thead til å forstå at første rad er overskrifter, og leser dem opp sammen med hver datacelle. Og når du senere legger til CSS, kan du style overskrifter og data separat uten ekstra klasser.
Style tabellen med CSS
En HTML-tabell uten CSS ser ganske naken ut. Ingen kantlinjer, ingen bakgrunnsfarger, ingen visuell separasjon mellom cellene. Med noen få CSS-regler blir tabellen lesbar.
De tre viktigste CSS-egenskapene for tabeller er border på th og td for å tegne streker rundt cellene, border-collapse: collapse på table-elementet for å slå sammen dobbeltstrekene til enkle linjer, og background-color på th for å gi overskriftene en visuell bakgrunn. Du trenger ikke CSS for at tabellen skal fungere, men uten styling er det vanskelig å lese data i en tabell med mange rader.
Hvis du vil lære CSS ordentlig, dekker CSS-kurset alt fra farger og fonter til layout og responsivt design.
Tabeller er for data, ikke layout
Tidligere ble HTML-tabeller brukt til å lage hele sidelayouter. Sidebarer, navigasjonsmenyer, bunntekster, alt ble lagt i tabellceller. Det fungerte visuelt, men det var en misbruk av elementet. Skjermlesere leser tabellinnhold celle for celle, og en layouttabell blir meningsløs for brukere som ikke kan se siden.
I dag bruker vi CSS (flexbox og grid) for layout. HTML-tabeller er for det de er designet for: å vise strukturert data der sammenhengen mellom rader og kolonner er viktig. Prislister, timeplaner, statistikk, sammenligninger. Tenk på data du naturlig ville lagt i et regneark.
Praktisk eksempel: boligpriser per by
Tenk deg at du vil presentere gjennomsnittlig boligpris for tre norske byer over to år. Da trenger du tre kolonner (by, 2024, 2025) og tre datarader:
<table>
<thead>
<tr><th>By</th><th>2024</th><th>2025</th></tr>
</thead>
<tbody>
<tr><td>Oslo</td><td>5 200 000</td><td>5 450 000</td></tr>
<tr><td>Bergen</td><td>3 800 000</td><td>3 950 000</td></tr>
<tr><td>Trondheim</td><td>4 100 000</td><td>4 280 000</td></tr>
</tbody>
</table>
Hver rad representerer en by, og kolonnene viser verdiene for hvert år. Overskriftscellene i thead gjør det tydelig hva hver kolonne inneholder. Uten th-celler i en overskriftsrad ville leseren måttet gjette seg til hva tallene betyr.
Vanlige feil med HTML-tabeller
Blanding av th og td. Bruk th i overskriftsraden og td i dataradene. Noen bruker td for alt og gjør teksten fet med CSS. Det ser likt ut visuelt, men skjermlesere mister informasjon om hva som er overskrifter. Bruk riktig element for riktig formål.
Ulikt antall celler per rad. Hver rad i en tabell bør ha like mange celler. Har overskriftsraden tre th-celler, bør hver datarad ha tre td-celler. Mangler en celle, forskyves innholdet, og tabellen ser ødelagt ut. Nettleseren gir deg ingen feilmelding. Den bare tegner tabellen feil.
Glemmer thead og tbody. Tabellen fungerer teknisk uten dem, men du mister struktur og tilgjengelighet. Legg det til fra starten. Det tar fem sekunder ekstra og sparer deg for problemer senere.
Tabellen strekker seg utenfor skjermen på mobil. En tabell med mange kolonner kan bli bredere enn skjermen. Brukeren må scrolle horisontalt, noe som er en dårlig opplevelse. Løsningen er å legge tabellen i en wrapper med overflow-x: auto i CSS. Da får tabellen sin egen horisontale scrollbar uten at resten av siden påvirkes.
Neste steg
Nå kan du lage HTML-tabeller med rader, kolonner, overskrifter og riktig struktur. For å lære hvordan du setter inn bilder med alt-tekst og riktige størrelser, se HTML-bilder med img-taggen. Vil du bygge inn YouTube-videoer eller kart, forklarer artikkelen om HTML iframe hvordan det fungerer. Du kan også lese mer om table-elementet i MDN-dokumentasjonen.
Denne artikkelen bygger på en videoleksjon fra HTML-kurset på Utdannet.no. I kurset bygger du tabeller steg for steg, lærer avanserte tabellstrukturer med colspan og rowspan, og får praktisk erfaring med bilder, video og skjemaer.
