HTML

Tabellens delar

<thead>, <tbody> och <tfoot>

För att få mer ordning på tabeller, i synnerhet om det är fråga om större tabeller, bör den delas upp i tre delar: tabellhuvud (<thead>), tabellkropp (<tbody>) och tabellfot (<tfoot>)

I tabellens huvud placerar man sina kolumnrubriker, i tabellkroppen alla vanliga celler och i tabellfoten upprepar man normalt sett kolumnrubrikerna, vilket kan göra tabellen mer lättbegriplig. först i tabellen kommer huvudet som följs av kroppen, sist kommer foten.

Någonting som är lite speciellt med detta är att man, i sin HTML-kod, ska placera <tfoot> direkt efter <thead>, alltså före <tbody>. Trots detta kommer foten att visas efter kroppen. Anledningen till detta är att det tar tid att ladda data. Om tabellen är mycket omfattande vill man att huvudet och foten ska vara laddade från början, även om tabellen innehåller tusentals celler.

Det tidigare exemplet organiserat i sina tre delar (med tillagd tabellfot) skulle se ut så här:

<table>
   <caption>En viktig tabell</caption>
   <thead>
      <tr>
         <th>Kolumn 1</th>
         <th>Kolumn 2</th>
         <th>Kolumn 3</th>
         <th>Kolumn 4</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th>Kolumn 1</th>
         <th>Kolumn 2</th>
         <th>Kolumn 3</th>
         <th>Kolumn 4</th>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td>Item</td>
         <td>Item</td>
         <td>Item</td>
         <td>Item</td>
      </tr>
      <tr>
         <td>Item</td>
         <td>Item</td>
         <td>Item</td>
      </tr>
      <tr>
         <td>Item</td>
         <td>Item</td>
         <td>Item</td>
      </tr>
   </tbody>
</table>
…och resultera i:
En viktig tabell
Kolumn 1 Kolumn 2 Kolumn 3 Kolumn 4
Kolumn 1 Kolumn 2 Kolumn 3 Kolumn 4
Item Item Item Item
Item Item Item
Item Item Item

Fortsätt läsa om celler som spänner över flera rader och kolumner, <colspan> och <rowspan>… →