Html Guide

HTML-tabeller gjort enkelt: En komplet guide til datatabeller

Lær HTML-tabeller fra grundlæggende til avancerede teknikker. Mestre table-, tr-, td-, th-elementer, tilgængelighed, responsivt design og hvornår tabeller skal bruges korrekt.

September 4, 2025

9 min læsning

HTML

tabeller

datatabeller

tilgængelighed

responsivt design

tabelelementer

HTML-tabeller gjort enkelt: En komplet guide til datatabeller

HTML-tabeller er kraftfulde værktøjer til at vise strukturerede data i rækker og kolonner. Når de bruges korrekt, giver de en tilgængelig og organiseret måde at præsentere information som statistikker, sammenligninger, tidsplaner og finansielle data. Denne omfattende guide lærer dig alt, hvad du behøver at vide om at skabe effektive HTML-tabeller.

Hvornår tabeller skal bruges (og hvornår de ikke skal)

At forstå hvornår tabeller skal bruges er afgørende for at skabe semantiske, tilgængelige hjemmesider.

✅ Hvornår tabeller skal bruges

Perfekt til tabeldata:

Finansielle rapporter og regneark
Sammenligningsdiagrammer og funktionsmatrixer
Sportsstatistikker og resultattavler
Tidsplaner og køretabeller
Produktspecifikationer
Undersøgelsesresultater og dataanalyse

Eksempel på passende tabelbrug:

<!-- Godt: Visning af strukturerede data -->
<table>
  <caption>Kvartalsrapport salg 2024</caption>
  <thead>
    <tr>
      <th>Kvartal</th>
      <th>Omsætning</th>
      <th>Vækst</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Q1</td>
      <td>1.250.000 kr</td>
      <td>+15%</td>
    </tr>
    <tr>
      <td>Q2</td>
      <td>1.437.500 kr</td>
      <td>+18%</td>
    </tr>
  </tbody>
</table>

❌ Hvornår tabeller IKKE skal bruges

Undgå tabeller til:

Sidelayout og positionering
Oprettelse af kolonner til tekstindhold
Kun styling formål
Ikke-tabelindholdsorganisation

Eksempel på upassende tabelbrug:

<!-- Forkert: Brug af tabel til layout -->
<table>
  <tr>
    <td>
      <nav>Navigation her</nav>
    </td>
    <td>
      <main>Hovedindhold her</main>
    </td>
    <td>
      <aside>Sidebar her</aside>
    </td>
  </tr>
</table>

<!-- Korrekt: Brug CSS Grid eller Flexbox -->
<div class="layout">
  <nav>Navigation her</nav>
  <main>Hovedindhold her</main>
  <aside>Sidebar her</aside>
</div>

`<table>`, `<tr>`, `<td>`, `<th>` grundlæggende

At forstå de grundlæggende tabelelementer er essentielt for at skabe velstrukturerede tabeller.

Grundlæggende tabelstruktur

<table>
  <tr>
    <th>Overskrift 1</th>
    <th>Overskrift 2</th>
    <th>Overskrift 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 4</td>
    <td>Data 5</td>
    <td>Data 6</td>
  </tr>
</table>

Essentielle tabelelementer

<table> - Containerelement for hele tabellen <tr> - Tabelrække element <th> - Tabeloverskriftscelle (automatisk fed og centreret) <td> - Tabeldatacelle

Komplet tabeleksempel

<table>
  <tr>
    <th>Produkt</th>
    <th>Pris</th>
    <th>Lager</th>
    <th>Bedømmelse</th>
  </tr>
  <tr>
    <td>Laptop Pro</td>
    <td>12.990 kr</td>
    <td>15</td>
    <td>4,8/5</td>
  </tr>
  <tr>
    <td>Trådløs mus</td>
    <td>290 kr</td>
    <td>87</td>
    <td>4,5/5</td>
  </tr>
  <tr>
    <td>USB-C Hub</td>
    <td>790 kr</td>
    <td>23</td>
    <td>4,2/5</td>
  </tr>
</table>

Tabeloverskrift attributter

Scope-attribut:

<table>
  <tr>
    <th scope="col">Navn</th>
    <th scope="col">Alder</th>
    <th scope="col">By</th>
  </tr>
  <tr>
    <th scope="row">John Doe</th>
    <td>28</td>
    <td>København</td>
  </tr>
  <tr>
    <th scope="row">Jane Smith</th>
    <td>34</td>
    <td>Aarhus</td>
  </tr>
</table>

Tilføjelse af billedtekster og sammendrag

Billedtekster og sammendrag forbedrer tabeltilgængelighed og giver kontekst for brugere.

Tabelbilledtekst

<caption>-elementet giver en titel eller beskrivelse for tabellen:

<table>
  <caption>Medarbejderpræstationsmålinger - Q3 2024</caption>
  <tr>
    <th>Medarbejder</th>
    <th>Salg</th>
    <th>Kundebedømmelse</th>
    <th>Mål opnået</th>
  </tr>
  <tr>
    <td>Sarah Johansen</td>
    <td>450.000 kr</td>
    <td>4,9/5</td>
    <td>105%</td>
  </tr>
  <tr>
    <td>Mike Chen</td>
    <td>385.000 kr</td>
    <td>4,7/5</td>
    <td>98%</td>
  </tr>
</table>

Styling af billedtekster

caption {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: left;
  color: #333;
}

/* Billedtekstpositionering */
caption {
  caption-side: top; /* Standard */
  /* caption-side: bottom; */
}

Summary-attribut (forældet)

Bemærk: summary-attributten er forældet i HTML5. Brug <caption> eller omgivende tekst i stedet:

<!-- Gammel måde (forældet) -->
<table summary="Denne tabel viser kvartalssalgsdata">

<!-- Ny måde -->
<table>
  <caption>
    Kvartalssalgsdata
    <p>Denne tabel viser omsætningstal og vækstprocenter for hvert kvartal af 2024</p>
  </caption>
  <!-- tabelindhold -->
</table>

Sammenlægning af celler med colspan og rowspan

Cellesammenlægning giver dig mulighed for at skabe mere komplekse tabellayouts ved at spænde celler over flere kolonner eller rækker.

Colspan - spænding over kolonner

<table>
  <tr>
    <th colspan="3">Salgsrapport 2024</th>
  </tr>
  <tr>
    <th>Kvartal</th>
    <th>Omsætning</th>
    <th>Vækst</th>
  </tr>
  <tr>
    <td>Q1</td>
    <td>1.000.000 kr</td>
    <td>+10%</td>
  </tr>
  <tr>
    <td>Q2</td>
    <td>1.200.000 kr</td>
    <td>+20%</td>
  </tr>
  <tr>
    <td colspan="2">Total omsætning</td>
    <td>2.200.000 kr</td>
  </tr>
</table>

Rowspan - spænding over rækker

<table>
  <tr>
    <th>Afdeling</th>
    <th>Medarbejder</th>
    <th>Rolle</th>
    <th>Løn</th>
  </tr>
  <tr>
    <td rowspan="3">Teknik</td>
    <td>John Smith</td>
    <td>Senior udvikler</td>
    <td>950.000 kr</td>
  </tr>
  <tr>
    <td>Sarah Wilson</td>
    <td>Frontend udvikler</td>
    <td>750.000 kr</td>
  </tr>
  <tr>
    <td>Mike Johnson</td>
    <td>DevOps ingeniør</td>
    <td>850.000 kr</td>
  </tr>
  <tr>
    <td rowspan="2">Marketing</td>
    <td>Lisa Brown</td>
    <td>Marketing manager</td>
    <td>700.000 kr</td>
  </tr>
  <tr>
    <td>Tom Davis</td>
    <td>Indholdsproducent</td>
    <td>550.000 kr</td>
  </tr>
</table>

Kompleks cellesammenlægning

<table>
  <tr>
    <th colspan="4">Virksomhedspræstationsdashboard</th>
  </tr>
  <tr>
    <th rowspan="2">Målinger</th>
    <th colspan="3">Kvartaler</th>
  </tr>
  <tr>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
  </tr>
  <tr>
    <td>Omsætning</td>
    <td>1.500.000 kr</td>
    <td>1.750.000 kr</td>
    <td>2.000.000 kr</td>
  </tr>
  <tr>
    <td>Profit</td>
    <td>450.000 kr</td>
    <td>520.000 kr</td>
    <td>650.000 kr</td>
  </tr>
</table>

Avanceret tabelstruktur

For komplekse tabeller, brug semantiske elementer til at forbedre struktur og tilgængelighed.

Tabelsektioner: `<thead>`, `<tbody>`, `<tfoot>`

<table>
  <caption>Årlig finansiel sammenfatning</caption>
  
  <thead>
    <tr>
      <th scope="col">Kategori</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
      <th scope="col">Q3</th>
      <th scope="col">Q4</th>
      <th scope="col">Total</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <th scope="row">Omsætning</th>
      <td>1.250.000 kr</td>
      <td>1.437.500 kr</td>
      <td>1.653.125 kr</td>
      <td>1.901.094 kr</td>
      <td>6.241.719 kr</td>
    </tr>
    <tr>
      <th scope="row">Udgifter</th>
      <td>875.000 kr</td>
      <td>1.006.250 kr</td>
      <td>1.157.188 kr</td>
      <td>1.330.766 kr</td>
      <td>4.369.204 kr</td>
    </tr>
    <tr>
      <th scope="row">Profit</th>
      <td>375.000 kr</td>
      <td>431.250 kr</td>
      <td>495.937 kr</td>
      <td>570.328 kr</td>
      <td>1.872.515 kr</td>
    </tr>
  </tbody>
  
  <tfoot>
    <tr>
      <th scope="row">Profitmargin</th>
      <td>30%</td>
      <td>30%</td>
      <td>30%</td>
      <td>30%</td>
      <td>30%</td>
    </tr>
  </tfoot>
</table>

Kolonnegrupper: `<colgroup>` og `<col>`

<table>
  <caption>Produktsammenligning</caption>
  
  <colgroup>
    <col>
    <col span="2" class="price-columns">
    <col class="rating-column">
  </colgroup>
  
  <thead>
    <tr>
      <th>Produkt</th>
      <th>Almindelig pris</th>
      <th>Udsalgspris</th>
      <th>Bedømmelse</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>9.990 kr</td>
      <td>7.990 kr</td>
      <td>4,5/5</td>
    </tr>
    <tr>
      <td>Tablet</td>
      <td>5.990 kr</td>
      <td>4.990 kr</td>
      <td>4,2/5</td>
    </tr>
  </tbody>
</table>

.price-columns {
  background-color: #f0f8ff;
}

.rating-column {
  background-color: #fff8dc;
  text-align: center;
}

Tilgængelighed i tabeller

At gøre tabeller tilgængelige sikrer, at alle brugere kan forstå og navigere dine data effektivt.

Essentielle tilgængelighedsfunktioner

1. Brug tabeloverskrifter korrekt:

<table>
  <tr>
    <th scope="col">Navn</th>
    <th scope="col">Afdeling</th>
    <th scope="col">Løn</th>
  </tr>
  <tr>
    <th scope="row">John Doe</th>
    <td>Teknik</td>
    <td>750.000 kr</td>
  </tr>
</table>

2. Giv klare billedtekster:

<table>
  <caption>
    Medarbejderlønoplysninger
    <span class="sr-only">
      Denne tabel indeholder medarbejdernavne, afdelinger og lønoplysninger
    </span>
  </caption>
  <!-- tabelindhold -->
</table>

3. Brug ARIA-etiketter når nødvendigt:

<table aria-label="Månedlig budgetopdeling">
  <tr>
    <th id="category">Kategori</th>
    <th id="budgeted">Budgetteret</th>
    <th id="actual">Faktisk</th>
    <th id="difference">Forskel</th>
  </tr>
  <tr>
    <td headers="category">Bolig</td>
    <td headers="budgeted">12.000 kr</td>
    <td headers="actual">11.500 kr</td>
    <td headers="difference">-500 kr</td>
  </tr>
</table>

Kompleks tabeltilgængelighed

For tabeller med flere overskriftsniveauer:

<table>
  <caption>Salgsdata efter region og kvartal</caption>
  <thead>
    <tr>
      <th rowspan="2" id="region">Region</th>
      <th colspan="4" id="quarters">2024 kvartaler</th>
    </tr>
    <tr>
      <th id="q1" headers="quarters">Q1</th>
      <th id="q2" headers="quarters">Q2</th>
      <th id="q3" headers="quarters">Q3</th>
      <th id="q4" headers="quarters">Q4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="north" headers="region">Nord</th>
      <td headers="north q1">1.250.000 kr</td>
      <td headers="north q2">1.430.000 kr</td>
      <td headers="north q3">1.650.000 kr</td>
      <td headers="north q4">1.900.000 kr</td>
    </tr>
    <tr>
      <th id="south" headers="region">Syd</th>
      <td headers="south q1">980.000 kr</td>
      <td headers="south q2">1.120.000 kr</td>
      <td headers="south q3">1.280.000 kr</td>
      <td headers="south q4">1.450.000 kr</td>
    </tr>
  </tbody>
</table>

Skærmlæserovervejelser

/* Kun skærmlæsertekst */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Spring over tabelnavigation */
.skip-table {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-table:focus {
  position: static;
  width: auto;
  height: auto;
}

Styling af tabeller med CSS

Transformer grundlæggende HTML-tabeller til visuelt tiltalende, professionelle datavisninger.

Grundlæggende tabelstyling

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-family: Arial, sans-serif;
}

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

th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #333;
  text-transform: uppercase;
  font-size: 0.9em;
  letter-spacing: 0.5px;
}

tr:hover {
  background-color: #f5f5f5;
}

/* Alternerende rækkefarver */
tr:nth-child(even) {
  background-color: #f9f9f9;
}

Moderne tabeldesign

.modern-table {
  width: 100%;
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 0.9em;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  min-width: 400px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.modern-table thead tr {
  background-color: #009879;
  color: #ffffff;
  text-align: left;
}

.modern-table th,
.modern-table td {
  padding: 12px 15px;
}

.modern-table tbody tr {
  border-bottom: 1px solid #dddddd;
}

.modern-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

.modern-table tbody tr:last-of-type {
  border-bottom: 2px solid #009879;
}

.modern-table tbody tr:hover {
  background-color: #f1f1f1;
  transform: scale(1.02);
  transition: all 0.3s ease;
}

Responsivt tabeldesign

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

@media screen and (max-width: 768px) {
  .responsive-table {
    border: 0;
  }

  .responsive-table caption {
    font-size: 1.3em;
  }
  
  .responsive-table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  .responsive-table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: 10px;
  }
  
  .responsive-table td {
    border: none;
    border-bottom: 1px solid #eee;
    display: block;
    font-size: 0.8em;
    text-align: right;
    padding-left: 50%;
    position: relative;
  }
  
  .responsive-table td:before {
    content: attr(data-label);
    position: absolute;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    font-weight: bold;
    text-align: left;
  }
}

<table class="responsive-table">
  <thead>
    <tr>
      <th>Navn</th>
      <th>Position</th>
      <th>Kontor</th>
      <th>Løn</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Navn">John Doe</td>
      <td data-label="Position">Udvikler</td>
      <td data-label="Kontor">København</td>
      <td data-label="Løn">750.000 kr</td>
    </tr>
  </tbody>
</table>

Tabel med handlingsknapper

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

.action-table th,
.action-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8em;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s;
}

.btn-edit {
  background-color: #007bff;
  color: white;
}

.btn-edit:hover {
  background-color: #0056b3;
}

.btn-delete {
  background-color: #dc3545;
  color: white;
}

.btn-delete:hover {
  background-color: #c82333;
}

<table class="action-table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Navn</th>
      <th>E-mail</th>
      <th>Handlinger</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>John Doe</td>
      <td>john@example.com</td>
      <td>
        <div class="action-buttons">
          <a href="#" class="btn btn-edit">Rediger</a>
          <button class="btn btn-delete">Slet</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Almindelige tabelfejl at undgå

1. Brug af tabeller til layout

<!-- Forkert: Tabel til sidelayout -->
<table>
  <tr>
    <td>Overskrift</td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td>Sidebar</td>
          <td>Indhold</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<!-- Korrekt: CSS Grid til layout -->
<div class="page-layout">
  <header>Overskrift</header>
  <aside>Sidebar</aside>
  <main>Indhold</main>
</div>

2. Manglende tabeloverskrifter

<!-- Forkert: Ingen overskrifter -->
<table>
  <tr>
    <td>Navn</td>
    <td>Alder</td>
    <td>By</td>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>København</td>
  </tr>
</table>

<!-- Korrekt: Korrekte overskrifter -->
<table>
  <tr>
    <th>Navn</th>
    <th>Alder</th>
    <th>By</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>København</td>
  </tr>
</table>

3. Inkonsistent cellestruktur

<!-- Forkert: Inkonsistente kolonner -->
<table>
  <tr>
    <th>Navn</th>
    <th>Alder</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>Ekstra celle</td> <!-- Dette ødelægger strukturen -->
  </tr>
</table>

<!-- Korrekt: Konsistent struktur -->
<table>
  <tr>
    <th>Navn</th>
    <th>Alder</th>
    <th>Noter</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>Ny medarbejder</td>
  </tr>
</table>

4. Dårlig mobiloplevelse

<!-- Forkert: Ingen mobilovervejelse -->
<table style="width: 1200px;">
  <!-- Meget bred tabel med mange kolonner -->
</table>

<!-- Korrekt: Responsiv tilgang -->
<div class="table-container">
  <table class="responsive-table">
    <!-- Tabel med mobilvenligt design -->
  </table>
</div>

Avancerede tabelteknikker

Sorterbare tabeller

<table class="sortable-table">
  <thead>
    <tr>
      <th data-sort="string">Navn <span class="sort-arrow">↕</span></th>
      <th data-sort="number">Alder <span class="sort-arrow">↕</span></th>
      <th data-sort="number">Løn <span class="sort-arrow">↕</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>28</td>
      <td>750000</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>34</td>
      <td>850000</td>
    </tr>
  </tbody>
</table>

Filtrerbare tabeller

<div class="table-controls">
  <input type="text" id="table-filter" placeholder="Filtrer tabel...">
</div>

<table class="filterable-table">
  <thead>
    <tr>
      <th>Produkt</th>
      <th>Kategori</th>
      <th>Pris</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>Elektronik</td>
      <td>9.990 kr</td>
    </tr>
    <tr>
      <td>Skrivebordsstol</td>
      <td>Møbler</td>
      <td>2.990 kr</td>
    </tr>
  </tbody>
</table>

Udvidelige rækker

<table class="expandable-table">
  <thead>
    <tr>
      <th></th>
      <th>Ordre ID</th>
      <th>Kunde</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr class="expandable-row">
      <td><button class="expand-btn">+</button></td>
      <td>#12345</td>
      <td>John Doe</td>
      <td>2.990 kr</td>
    </tr>
    <tr class="detail-row" style="display: none;">
      <td colspan="4">
        <div class="order-details">
          <p><strong>Varer:</strong> Laptop, Mus, Tastatur</p>
          <p><strong>Forsendelse:</strong> Ekspreslevering</p>
          <p><strong>Status:</strong> Behandles</p>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Sammenfatning af bedste praksis

Brug kun tabeller til tabeldata, ikke til layout
Inkluder altid korrekte tabeloverskrifter med scope-attributter
Giv meningsfulde billedtekster for kontekst
Sørg for tilgængelighed med ARIA-etiketter og korrekt markup
Design til mobil med responsive teknikker
Hold tabeller simple og undgå unødvendig kompleksitet
Brug semantiske elementer som thead, tbody og tfoot
Test med skærmlæsere for at verificere tilgængelighed
Style med CSS, ikke forældede HTML-attributter
Overvej performance for store datasæt

Konklusion

HTML-tabeller er kraftfulde værktøjer til at præsentere strukturerede data når de bruges korrekt. Ved at forstå korrekt tabelmarkup, tilgængelighedskrav og responsive designteknikker kan du skabe tabeller der er både funktionelle og brugervenlige på tværs af alle enheder og hjælpeteknologier.

Husk at tabeller skal forbedre dataforståelse, ikke komplicere den. Fokuser på klar struktur, meningsfulde overskrifter og tilgængeligt design for at skabe tabeller der tjener alle dine brugere effektivt.

Begynd at implementere disse tabelteknikker i dine projekter, og du vil skabe mere professionelle, tilgængelige og brugervenlige datapræsentationer der fungerer smukt på tværs af alle platforme og enheder.

HTML-tabeller gjort enkelt: En komplet guide til datatabeller

HTML-tabeller gjort enkelt: En komplet guide til datatabeller

Hvornår tabeller skal bruges (og hvornår de ikke skal)

✅ Hvornår tabeller skal bruges

❌ Hvornår tabeller IKKE skal bruges

<table>, <tr>, <td>, <th> grundlæggende

Grundlæggende tabelstruktur

Essentielle tabelelementer

Komplet tabeleksempel

Tabeloverskrift attributter

Tilføjelse af billedtekster og sammendrag

Tabelbilledtekst

Styling af billedtekster

Summary-attribut (forældet)

Sammenlægning af celler med colspan og rowspan

Colspan - spænding over kolonner

Rowspan - spænding over rækker

Kompleks cellesammenlægning

Avanceret tabelstruktur

Tabelsektioner: <thead>, <tbody>, <tfoot>

Kolonnegrupper: <colgroup> og <col>

Tilgængelighed i tabeller

Essentielle tilgængelighedsfunktioner

Kompleks tabeltilgængelighed

Skærmlæserovervejelser

Styling af tabeller med CSS

Grundlæggende tabelstyling

Moderne tabeldesign

Responsivt tabeldesign

Tabel med handlingsknapper

Almindelige tabelfejl at undgå

1. Brug af tabeller til layout

2. Manglende tabeloverskrifter

3. Inkonsistent cellestruktur

4. Dårlig mobiloplevelse

Avancerede tabelteknikker

Sorterbare tabeller

Filtrerbare tabeller

Udvidelige rækker

Sammenfatning af bedste praksis

Konklusion

`<table>`, `<tr>`, `<td>`, `<th>` grundlæggende

Tabelsektioner: `<thead>`, `<tbody>`, `<tfoot>`

Kolonnegrupper: `<colgroup>` og `<col>`