Tabeller i HTML

En tabel som kan indeholde data kan skabes med tagget <table>.

Inde i <table>-tagget kan man tilføje rækker i tabellen med tagget <tr>.

For hver række i tabellen skal der også indsættes en dataværdi, hvilket kan gøres med tagget <td>.

For at tilføje titlerne til hver kolonne i den øverste række skal man benytte tagget <th> i stedet for <td> når man indsætter dataværdierne.

For at tilføje et tabelnavn kan man benytte tagget <caption>.

For at specificere hvilken del af tabellen som er tabellens hovedsektion (tabellens øverste kolonne) kan man benytte <thead>.

For at specificere hvilken del af tabellen som er tabellens datasektion (tabellens data) kan man benytte <tbody>.

For at specificere hvilken del af tabellen som er tabellens fodsektion (tabellens nederste række) kan man benytte <tfoot>.

I nedenstående eksempel er der blevet skabt en tabel med navnet “Yndlingssange” som har kolonnetitlerne “Sang”, “Kunstner” og “Album”:

<table>
  <caption>Yndlingssange</caption>
  <thead>  
    <tr>
      <th>SANG</th>
      <th>KUNSTNER</th>
      <th>ALBUM</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Sky Walker</td>
      <td>Miguel</td>
      <td>War & Leisure</td>
    </tr>
    <tr>
      <td>HiiiPower</td>
      <td>Kendrick Lamar</td>
      <td>Section.80</td>
    </tr>
    <tr>
      <td>The Box</td>
      <td>Roddy Ricch</td>
      <td>Excuse Me For Being Antisocial</td>
    </tr>
  </tbody>
</table>

Ovenstående kodestykke vil resultere i følgende tabel:

Yndlingssange

Sang	Kunstner	Album
Sky Walker	Miguel	War & Leisure
HiiiPower	Kendrick Lamar	Section.80
The Box	Roddy Ricch	Excuse Me For Being Antisocial

Attributten colspan kan tilføjes indeni et <th>– eller et <td>-tag. Attributtens værdi skal være lig med antallet af kolonner som dataværdien skal række.

Attributten rowspan kan tilføjes indeni et <th>– eller et <td>-tag. Attributtens værdi skal være lig med antallet af rækker som dataværdien skal række.

 

Gå videre til Formularer i HTML her →