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>

Kopiera en komplex tabell

Kopiera en tabellstruktur efter en bild

• Skapa en ny mapp (katalog), med namnet spindelmannen. Skapa i denna en ny index.html och en tillhörande stilmall (css).
• Återskapa i spindelmannen/index.html tabellen nedan.
• Lägg till en länk i menyn på din förstasida/landing page (som vanligt).
• Tabellen och cellerna ska ha kantlinjer, så att den blir tydlig och lättolkad.
• Bilden finns att hämta här.
• Färgerna är red, green och blue, men du kan välja andra om du vill.
• Tabellen ska ha en <caption>
• Tabellen ska ha <thead>, <tfoot> och <tbody>

Du får gärna duplicera tabellen exakt, men det som är viktigt är att du löser själva tabellkonstruktionen, hur tabellen är uppbyggd och indelad.

Exakt vilka färger du väljer, eller hur kantlinjerna är utformade, typsnitt, vilka ord som står i cellerna och så vidare är mindre viktigt. Dock ska det vara en bild där det är en bild, och text där det är text.

Dokumentet ska vara komplett och korrekt. Det ska innehålla korrekt DTD, teckenuppsättning och ha en <title>.

Om du har glömt någonting finns all nödvändig information för att du ska klara uppgiften här på kurssajten.

Du har två lektioner på dig.