HTML - Tabeller

Tabeller i HTML brukes til å presentere data i rader og kolonner, omtrent som i et regneark. Det er viktig å merke seg at tabeller kun skal brukes for å vise data, og ikke til layout eller design av nettsiden.

Oppbyggingen av en tabell

For å bygge en ryddig tabell bruker vi <table> som hovedelement. Vi deler gjerne tabellen inn i et hode (<thead>) og en kropp (<tbody>). Inne i disse oppretter vi rader (<tr>). Hver rad må inneholde det samme antallet celler for å danne kolonner: enten overskriftsceller (<th>) eller dataceller (<td>).

<table>
   <thead>
     <tr>
       <th>Navn</th>
       <th>Alder</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>Ola Nordmann</td>
       <td>30</td>
     </tr>
     <tr>
       <td>Kari Nilsen</td>
       <td>28</td>
     </tr>
   </tbody>
 </table>

<table> er selve tabellen.
<thead> brukes for å gruppere overskriftsraden(e) øverst i tabellen.
<tbody> grupperer innholdsradene (selve dataene).
<tr> (Table Row) definerer en ny rad. Eksempelet over har 3 rader totalt.
<th> og <td> bestemmer antall kolonner. Siden hver rad i eksempelet har to slike celler, får tabellen 2 kolonner.

Rammer rundt tabellen (CSS)

Som standard vises ikke rammer (borders) i HTML-tabeller, eller de vises som "doble" rammer hvis vi setter dem på alt. For å få tabellen til å se ryddig ut med enkle, tynne linjer rundt alle celler, bruker vi en kombinasjonsselektor og en spesiell CSS-egenskap for tabeller.

table, th, td {
   border: 1px solid white;
   border-collapse: collapse;
 }

Tips: Ved å skrive table, th, td (atskilt med komma) sørger du for at selve tabellen og alle cellene inni får en ramme. Egenskapen border-collapse: collapse; ber nettleseren om å slå sammen rammene mellom cellene slik at de deler én enkelt linje i stedet for at det blir doble linjer overalt.