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>)
• tabellfot (<tfoot>)

I tabellens huvud (<thead>) placerar man sina kolumnrubriker (<th>), i tabellkroppen (<tbody>) alla vanliga celler (<td>) och i tabellfoten (<tfoot>) upprepar man normalt sett kolumnrubrikerna, vilket kan göra tabellen mer lättbegriplig.

Först i tabellen kommer alltså huvudet, som följs av kroppen och sist kommer foten.

Nu kommer jag till det som gör att tabeller med thead, tbody och tfoot kan sägas avvika från vanlig HTML-syntax.

Normalt sätt läses och laddas HTML-kod i webbläsaren uppifrån och ned, från vänster till höger (även om du kan ändra ordningen med CSS). I det här fallet ser det annorlunda ut.

Det speciella ä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. Först laddas tabellens ytterdelar, och sedan fylls den på inifrån.

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:

Obs! Det går alldeles utmärkt att använda rubriker, <th>, även på andra ställen än i <thead> eller <tfoot>, om du till exempel vill ha rubriker för rader i en kolumn. Ett bra tips är att då ge attributet scope till dina <th> för att tala om ifall det är en rubrik för en rad eller kolumn. Detta kommer inte påverka hur tabellen ser ut, men gör det enklare för t.ex screenreaders att tolka tabellen.

<th scope="row"> om rubriken är för en rad och <th scope="col"> om den är för en kolumn.

Tabeller: colspan och rowspan

De attribut till <th> och <td> du kanske kommer att använda mest är colspan och rowspan. Dessa anger att en cell kan gå över flera kolumner (colspan) eller rader (rowspan).

colspan

Tabellexemplet som använts tidigare saknar, som du antagligen sett, två celler i fjärde kolumnen. Med hjälp av colspan kan man få cellerna i den tredje och fjärde radens tredje kolumn att fylla också den fjärde:

<table class="tabellexempel">
   <caption>Tabell med colspan</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 colspan="2">Item</td>
      </tr>
      <tr>
         <td>Item</td>
         <td>Item</td>
         <td colspan="2">Item</td>
      </tr>
   </tbody>
</table>

colspan="2" i exemplet anger att just den cellen ska spänna över två kolumner.

rowspan

Om man i stället vill att den sista cellen i den fjärde kolumnen ska ta upp tre rader, använder man rowspan:

<table class="tabellexempel">
   <caption>Tabell med rowspan</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 rowspan="3">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>

Både colspan och rowspan

<table class="tabellexempel">
    <caption>Imse vimse spindel&hellip;</caption>
    <thead>
        <th>Imse</th>
        <th>vimse</th>
        <th>spindel</th>
        <th>klättrade</th>
        <th>uppför</th>
        <th>trå'n</th>
    </thead>
    <tfoot>
        <th>Imse</th>
        <th>vimse</th>
        <th>spindel</th>
        <th>klättrade</th>
        <th>uppför</th>
        <th>trå'n</th>
    </tfoot>
    <tbody>
        <tr>
            <td colspan="2">Imse</td>
            <td>vimse</td>
            <td>spindel</td>
            <td>klättrade</td>
            <td>uppför</td>
        </tr>
        <tr>
            <td>Imse</td>
            <td>vimse</td>
            <td>spindel</td>
            <td>klättrade</td>
            <td>uppför</td>
            <td>trå'n</td>
        </tr>
        <tr>
            <td colspan="4" rowspan="2">Imse</td>
            <td rowspan="3">vimse</td>
            <td>spindel</td>
        </tr>
        <tr>
            <td>klättrade</td>
        </tr>
        <tr>
            <td>vimse</td>
            <td>spindel</td>
            <td>klättrade</td>
            <td>uppför</td>
            <td>trå'n</td>
        </tr>
    </tbody>
</table>