La oss starte med å diskutere tabeller. Spesielt skal vi se nærmere på følgende tekstorganisering:

Tabeller

Tabeller i HTML brukes til å vise data i rader og kolonner, og gir en strukturert måte å organisere informasjon på.

Oppretting av tabeller

<table>-taggen brukes for å lage en tabell i HTML. Tabeller består av rader (<tr>) og celler (<td>), som definerer strukturen og innholdet i tabellen. Den grunnleggende tabellstrukturen vil være som følger.
Eksempel:

I eksemplet ovenfor:

• <table>-taggen brukes for å lage en tabell;
• Hver <tr>-tagg representerer en rad i tabellen;
• Innenfor hver rad representerer <td>-tagger celler, og definerer innholdet i hver celle.

Selv om vi kunne stoppet arbeidet med tabeller her, kan vi forbedre semantikken for å gjøre det enklere for søkemotorer å forstå innholdet.

Tabelloverskrifter

<th>-taggen definerer tabelloverskrifter som representerer kolonne- eller radrubrikk. Den skal brukes innenfor en tabells <thead>-seksjon.
Eksempel:

I eksemplet ovenfor:

• <thead>-seksjonen inneholder tabelloverskriftsceller definert med <th>-taggen;
• Hver <th>-tagg representerer en overskriftscelle.

Tabellkropp

tbody-seksjonen skal plasseres etter thead-seksjonen og omslutte alle tabellens data bortsett fra overskriftene. Alle elementene inne i tbody forblir uendret.
Eksempel:

Oppsummering

Tabeller er strukturert med et hierarki av elementer:

1. Tabell

<table>-taggen er overordnede element som definerer hele tabellen. Den inneholder alle radene og kolonnene i tabellen.

<table></table>

2. Tabellhode

<thead>-taggen brukes til å gruppere radene i tabellhodet. Den inneholder én eller flere rader (<tr>) med overskriftsceller (<th>), som definerer kolonneoverskrifter.

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

3. Tabellkropp

<tbody>-taggen brukes til å gruppere hovedinnholdet i tabellen. Den inneholder én eller flere rader (<tr>) med dataceller (<td>), som definerer hovedinnholdet i tabellen.

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

4. Tabellrader

<tr>-taggen representerer en rad i tabellen. Den inneholder én eller flere tabellceller (<td> eller <th>), som definerer innholdet i hver kolonne i raden.

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

5. Tabellceller

<td>-taggen representerer en standard datacelle i tabellkroppen. <th>-taggen representerer en overskriftscelle i tabellhodet. Hver celle inneholder det faktiske innholdet i tabellen, for eksempel tekst, bilder 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>

Videoveiledning