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.