Tabeller i HTML — table-tagget og semantisk tabeldata

Hvad er HTML-tabeller?

HTML-tabeller bruges til at vise relationel data i rækker og kolonner — prisoversigter, sammenligninger, statistik, specifikationer og skemaer. Tabeller er ikke beregnet til layout (det var en gammel, forkert praksis) men til data der er strukturelt tabelform.

Korrekt tabel-markup hjælper Googlebot med at forstå sammenhængen mellem tabellens data og kan bidrage til featured snippets.

Grundlæggende tabelstruktur

<table>
  <caption>Prissammenligning — løbeskopakker 2026</caption>
  <thead>
    <tr>
      <th scope="col">Pakke</th>
      <th scope="col">Pris</th>
      <th scope="col">Inkluderer</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Basis</td>
      <td>499 kr.</td>
      <td>1 par sko</td>
    </tr>
    <tr>
      <td>Pro</td>
      <td>899 kr.</td>
      <td>2 par sko + taske</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Priser inkl. moms. Levering ikke inkluderet.</td>
    </tr>
  </tfoot>
</table>

Tabelens elementer

<table> er container-elementet for hele tabellen.

<caption> er tabelens overskrift — placeres som første child af <table>. Caption er vigtig for SEO og tilgængelighed: den giver tabellen kontekst og hjælper Googlebot med at forstå hvad data handler om. Skærmlæsere annoncerer caption-teksten når brugeren navigerer til tabellen.

<thead> gruperer header-rækker. Indholdet gentages typisk ved print over flere sider.

<tbody> gruperer data-rækker. Selve tabellens indhold.

<tfoot> gruperer footer-rækker — f.eks. summer, noter eller opsummering.

<tr> (table row) er en enkelt række.

<th> (table header) er en header-celle. Vises typisk fed og centreret som standard. Brug til kolonne- og rækkeoverskrifter.

<td> (table data) er en almindelig datacelle.

scope-attributten — semantisk kontekst

scope-attributten på <th> fortæller browsers og skærmlæsere om headeren gælder for en kolonne eller en række:

<!-- Kolonneoverskrift -->
<th scope="col">Pris</th>

<!-- Rækkeoverskrift -->
<th scope="row">Januar</th>

<!-- Gruppe af kolonner -->
<th scope="colgroup" colspan="3">Kvartal 1</th>

Korrekt scope er essentielt for at skærmlæserbrugere kan navigere komplekse tabeller og forstå sammenhængen. Google bruger det også som signal om tabelstruktur.

colspan og rowspan

Celler kan spænde over flere kolonner eller rækker:

<td colspan="2">Spænder over to kolonner</td>
<td rowspan="3">Spænder over tre rækker</td>

Brug med måde — for komplekse tabeller med mange colspan/rowspan kan det skabe forvirring for skærmlæsere og Googlebot.

Tabeller til layout — undgå!

I 1990’erne og 2000’erne brugte udviklere tabeller til at opbygge side-layouts — kolonner, header, footer. Det er forkert praksis og bør aldrig bruges i ny kode:

• Skaber et semantisk rod — Googlebot ser “tabel-data” i stedet for layout-elementer
• Besværligt for skærmlæsere at navigere
• Tabeller er stive og ikke responsivt mobile-venlige
• Moderne CSS (Flexbox, Grid) er langt bedre til layout

Responsivt tabel-problem

Tabeller bryder responsivt design — de har en fast minimum-bredde baseret på kolonnernes indhold. På smalle mobil-skærme kan tabeller skabe vandret scroll.

Løsninger:

/* Wrap tabellen i en container med overflow-x: auto */
.tabel-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

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

Alternativt: omform tabellen til kort-layout på mobil via CSS media queries.

Structured data og tabeller

Google understøtter ikke et specifikt Table schema, men indhold i velstrukturerede tabeller kan vises som featured snippets i SERP. Prisoversigter og sammenligninger i tabelformat er hyppige featured snippet-kandidater.

---

Hvornår skal jeg bruge table frem for en liste? Brug tabeller til data med klare relationer på tværs af rækker og kolonner — sammenligninger, specifikationer, skemaer. Brug lister til sekventielle eller grupperede elementer uden kolonne-relation.

Er caption obligatorisk? Teknisk nej, men stærkt anbefalet. Caption giver tabellen en titel der er synlig for alle brugere, hjælper skærmlæsere og giver Googlebot kontekst.

Kan tabeller hjælpe med featured snippets? Ja. Google viser tabeller som featured snippets for sammenlignings-forespørgsler. Korrekt tabel-markup med caption og th-headers øger chancen for tabel-featured snippets.

Sidst opdateret: marts 2026. Denne artikel er en del af Stegger.dk’s SEO-ordbog.