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.

Om du skulle vilja göra ett block som ser ut

#tjosan {
   border-color: red;
   border-style: solid;
   border-top: 0;
   border-right: 4px;
   border-bottom: 0;
   border-left: 4px;
}

Detta kan sammanfattas till

#tjosan {
   border-width: 0 4px;
}

Det är nämligen så att man kan ange flera olika värden i följd. Om man anger två värden (i det här fallet 0 och 4px) så gäller det första värdet för top och bottom, det andra för right och left

Detta kan vidareutvecklas om vi gör följande block:

I ovanstående block är top 4px röd, right 8px grön, bottom 12px blå och left 16px gul. Detta kan uppnås på liknande sätt som i det förra exemplet, men med fyra värden i följd. Till exempel så här:

border-style: solid;
border-width: 4px 8px 12px 16px;
border-color: #ff0000 #00ff00 #0000ff #ffff00;


I det här fallen räknas värdena alltid medsols från top, alltså: top, right, bottom och left. Alltid i samma ordning. Tänk dig en klocka som börjar på klockan tolv.

Sammanfattning: vid två värden: top/bottom och sedan right/left.
Vid fyra värden: top, right, bottom och sedan left.

Om du kommer ihåg den ordningen kan du använda den i många olika sammanhang när du vill korta ned din kod.