Lad os begynde med at diskutere tabeller. Specifikt vil vi undersøge følgende tekstorganisering:

Tabeller

Tabeller i HTML bruges til at vise data i rækker og kolonner, hvilket giver en struktureret måde at organisere information på.

Oprettelse af tabeller

<table>-tagget bruges til at oprette en tabel i HTML. Tabeller består af rækker (<tr>) og celler (<td>), som definerer tabellens struktur og indhold. Den grundlæggende tabelstruktur vil være som følger.
Eksempel:

I eksemplet ovenfor:

• <table>-tagget bruges til at oprette en tabel;
• Hvert <tr>-tag repræsenterer en række i tabellen;
• Inden for hver række repræsenterer <td>-tags celler, der definerer indholdet af hver celle.

Selvom det er muligt at afslutte arbejdet med tabeller her, kan deres semantik forbedres for at gøre det lettere for søgemaskiner at forstå deres indhold.

Tabeloverskrifter

<th>-tagget definerer tabeloverskrifter, der repræsenterer kolonne- eller rækkerubrikker. Det skal anvendes inden for en tabels <thead>-sektion.
Eksempel:

I eksemplet ovenfor:

• <thead>-sektionen indeholder tabeloverskriftsceller defineret med <th>-tagget;
• Hver <th>-tag repræsenterer en overskriftscelle.

Tabelkrop

tbody-sektionen skal placeres efter thead-sektionen og omslutte alle tabeldata undtagen overskrifterne. Alle elementer inden for tbody forbliver uændrede.
Eksempel:

Opsummering

Tabeller er struktureret med et hierarki af elementer:

1. Tabel

<table>-tagget er det overordnede element, der definerer hele tabellen. Det indeholder alle rækker og kolonner i tabellen.

<table></table>

2. Tabelhoved

<thead>-tagget bruges til at gruppere tabelhovedets rækker. Det indeholder en eller flere rækker (<tr>) med headerceller (<th>), som definerer kolonneoverskrifter.

<table>
  <thead></thead>
</table>

3. Tabelkrop

<tbody>-tagget bruges til at gruppere hovedindholdets rækker i tabellen. Det indeholder en eller flere rækker (<tr>) med dataceller (<td>), som definerer tabelindholdet.

<table>
  <thead></thead>
  <tbody></tbody>
</table>

4. Tabelrækker

<tr>-tagget repræsenterer en række i tabellen. Det indeholder en eller flere tabelceller (<td> eller <th>), som definerer indholdet af hver kolonne i rækken.

<table>
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr></tr>
    <tr></tr>
  </tbody>
</table>

5. Tabelceller

<td>-tagget repræsenterer en standard datacelle i tabelkroppen. <th>-tagget repræsenterer en overskriftscelle i tabelhovedet. Hver celle indeholder det faktiske indhold i tabellen, såsom tekst, billeder eller andre HTML-elementer.

<table>
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Text 1</td>
      <td>Text 2</td>
    </tr>
    <tr>
      <td>Text 3</td>
      <td>Text 4</td>
    </tr>
  </tbody>
</table>

Videovejledning