Tabeller i HTML

En tabell i HTML fungerar ungefär som en tabell i till exempel ett ordbehandlingsprogram, det är ett sätt att ställa upp och arrangera data, det kan vara text, siffror, bilder eller annat du kan tänka dig, i rader och kolumner.

Vad du inte ska använda tabeller till

Under nittiotalet och tidiga tjugohundratalet var det vanligt att HTML-tabeller användes för layout av hela webbsidor, framför allt skedde detta innan CSS slog igenom och det alltså inte fanns något riktigt bra alternativ. Vissa fortsatte dock även efter CSS genombrott att använda tabeller till att dela in hela sidan, på grund av gammal vana eller okunskap.

Att använda tabeller för layout är dåligt av fler än ett skäl:

• Semantiskt innebär <table> information uppställd i tabellform (<table> = tabell). Det är så sökmotorer och webbläsare förstår det, och det är så elementet ska användas.
• HTML = innehåll. CSS = utformning. HTML ska inte användas för formgivning.
• Att göra en hel webbsida i en tabell ger tillkrånglad kod. Koden blir svår att underhålla och lätt att skriva fel i.

Vad du ska använda tabeller till

Allt innehåll som passar att organiseras i tabellform! Text, siffror, bilder, vad som helst. Tabeller finns överallt!

Hur du gör

OBS! Tabellexemplen nedan har getts kantlinjer med CSS för att bli tydligare.

En tabell i HTML definieras med elementet <table>.

I sin enklaste form fyller man sedan tabellen med tabellrader: <tr>, i dessa placerar man sedan så många tabellceller, <td> (table definition) som man behöver. I dessa placerar man sitt innehåll, som kan vara av vilket slag som helst, även om det naturligtvis oftast är text eller siffror.

Antalet kolumner behöver man vanligtvis inte bekymra sig om, antalet tabellceller i raden med flest sådana avgör hur många kolumner som skapas.

Alltså ger koden:

<table>
   <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>
</table>

resultatet:

En tabell behöver ju oftast ha en rubrikrad. Detta gör man genom att lägga till en rubrikrad med kolumnrubriker. I denna byter man ut mot , table header, tabellrubrik.

Tabellen ovan, men med rubrikrad över, kan se ut så här…

<table>
   <tr>
      <th>Kolumn 1</th>
      <th>Kolumn 2</th>
      <th>Kolumn 3</th>
      <th>Kolumn 4</th>
   </tr>
   <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>
</table>

…och ge det här resultatet:

För att få en tabellrubrik, en överskrift för hela tabellen lägger du till elementet innan den första tabellraden, :

<table>
   <caption>En viktig tabell</caption>
   <tr>
      <th>Kolumn 1</th>
      <th>Kolumn 2</th>
      <th>Kolumn 3</th>
      <th>Kolumn 4</th>
   </tr>
   <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>
</table>

som ger:

Alla element i tabellen kan naturligtvis ges utseende med CSS.

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.