HTML Academy · Lektion

table, tr, td og th

Opret grundlæggende tabeller med rækker, dataceller og headerceller.

Lektion 1 af 413 trin

table, tr, td og th er en gratis HTML Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i HTML Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. HTML Academy-kurset indeholder 4 lektioner i alt.

HTML-tabeller

Tabeller viser data i rækker og kolonner. Brug dem til tabeldata — ikke til sidens layout.

<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>95</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>87</td>
  </tr>
</table>

Elementerne table, tr og td

De vigtigste tabelelementer:

<table> — tabelbeholderen
<tr> — en tabelrække
<td> — en datacelle i tabellen
<th> — en tabeloverskriftscelle (fed og centreret som standard)

th kontra td

Brug <th> til overskriftsceller — de har en semantisk betydning:

<table>
  <tr>
    <th>Language</th>    <!-- header: bold + centered by default -->
    <th>Year Created</th>
    <th>Type</th>
  </tr>
  <tr>
    <td>HTML</td>         <!-- data cell -->
    <td>1991</td>
    <td>Markup</td>
  </tr>
</table>

Grundlæggende tabelstruktur

En minimal, men komplet tabel:

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Stock</th>
  </tr>
  <tr>
    <td>Widget Pro</td>
    <td>$49.99</td>
    <td>In Stock</td>
  </tr>
  <tr>
    <td>Widget Lite</td>
    <td>$19.99</td>
    <td>Out of Stock</td>
  </tr>
</table>

Tabelkanter med CSS

Browsere viser som standard tabeller uden kanter. Tilføj dem med CSS:

table {
  border-collapse: collapse;  /* merge double borders into one */
  width: 100%;
}

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

th {
  background-color: #f5f5f5;
  font-weight: 600;
}

Tabeller er ikke til layout

I 1990'erne blev tabeller brugt til sidens layout. Det er forældet og skadeligt:

Skærmlæsere fortolker tabeller som data — layouttabeller forvirrer brugerne
Tabeller er ufleksible på små skærme
CSS Grid og Flexbox har erstattet alle behov for layout
Brug kun <table> til faktiske tabeldata

Responsive tabeller

Tabeller flyder ud over små skærme. Pak dem ind, så de kan rulles vandret:

<div class="table-wrapper" style="overflow-x: auto;">
  <table>
    <!-- table content -->
  </table>
</div>

/* Or use CSS: */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

Tomme celler

Håndter tomme celler bevidst:

<tr>
  <td>Alice</td>
  <td>95</td>
  <td></td>          <!-- Empty: renders blank -->
</tr>

/* CSS to style empty cells */
td:empty::before {
  content: '—';
  color: #999;
}

Forhåndsvisning af thead og tbody

Tabeller bør bruge <thead> og <tbody> til at adskille overskriftsrækker fra datarækker — det gennemgås i næste lektion:

<table>
  <thead>
    <tr><th>Name</th><th>Score</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>95</td></tr>
  </tbody>
</table>

col og colgroup til kolonnestil

Anvend typografier på hele kolonner med <colgroup> og <col>:

<table>
  <colgroup>
    <col style="width: 200px; background: #f9f9f9;">
    <col style="width: 100px;">
    <col style="width: 100px;">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Score</th>
    <th>Grade</th>
  </tr>
</table>

Zebrastriber med CSS

Skiftende rækkefarver gør dataene lettere at læse:

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

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

/* nth-child(even) for even rows instead */

Hurtigt tjek

Hvad er forskellen på td og th i en tabel?

Besvar den i den interaktive lektion

Opsamling: table tr td th

Det grundlæggende om tabeller:

<table> — tabelbeholder
<tr> — tabelrække
<td> — datacelle
<th> — overskriftscelle (semantisk og fed som standard)
Brug border-collapse: collapse for ensartede kanter
Tabeller er kun til data — ikke til sidens layout

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 40
Lektioner: 159

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “table, tr, td og th” gratis?

Ja — alle 3 lektioner i læringssporet HTML Academy, inklusive “table, tr, td og th”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. HTML Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “table, tr, td og th”?

Opret grundlæggende tabeller med rækker, dataceller og headerceller. Du øver dig i HTML Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på HTML Academy?

Der kræves ingen tidligere erfaring. HTML Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “table, tr, td og th”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne HTML Academy-lektion?

Ja. Alle HTML Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til HTML Academy