Tabeller

I denna lektionen går vi igenom hur tabeller fungerar i HTML. Vi går igenom taggarna <table>, <tr>, <td>, <th>, <thead>, <tbody> och <tfoot>.

I HTML kan man även infoga tabeller. Taggen <table> anger vart tabellen börjar och slutar. "Table" betyder "tabell" på svenska.

HTML - HyperText Markup Language
<table> <!-- Här bygger man upp tabellens struktur --> </table>

Med taggen <tr> infogar man rader i tabellen, och med taggen <td> infogar man en tabellcell i en rad. Tr står för table row, som betyder tabellrad, och td står för table data, som betyder tabelldata. I <td>-taggen skriver vi även in den information som ska visas i just den cellen i tabellen.

HTML - HyperText Markup Language
<!-- Exempel som visar en tabell med 1 rad och 3 kolumner --> <table> <tr> <td>Rad 1, kolumn 1</td> <td>Rad 1, kolumn 2</td> <td>Rad 1, kolumn 3</td> </tr> </table>
Rad 1, kolumn 1 Rad 1, kolumn 2 Rad 1, kolumn 3

Man ser knappt att det är en tabell som visas i exemplet ovan, men det är det faktiskt. För att åskådliggöra det bättre lägger vi till attributet border i taggen <table> som ger tabellen svarta kanter (border betyder kant på svenska). Värdet i attributet anger kanternas tjocklek.

HTML - HyperText Markup Language
<!-- Samma som innan, fast med kanter --> <table border="2"> <tr> <td>Rad 1, kolumn 1</td> <td>Rad 1, kolumn 2</td> <td>Rad 1, kolumn 3</td> </tr> </table>
Rad 1, kolumn 1 Rad 1, kolumn 2 Rad 1, kolumn 3

Om vi vill ha fler rader är det bara att lägga till fler <tr>-taggar med <td>-taggar i:

HTML - HyperText Markup Language
<!-- 3 rader, 3 kolumner --> <table border="5"> <tr> <td>Rad 1, kolumn 1</td> <td>Rad 1, kolumn 2</td> <td>Rad 1, kolumn 3</td> <td>Rad 1, kolumn 4</td> </tr> <tr> <td>Rad 2, kolumn 1</td> <td>Rad 2, kolumn 2</td> <td>Rad 2, kolumn 3</td> <td>Rad 2, kolumn 4</td> </tr> <tr> <td>Rad 3, kolumn 1</td> <td>Rad 3, kolumn 2</td> <td>Rad 3, kolumn 3</td> <td>Rad 3, kolumn 4</td> </tr> </table>
Rad 1, kolumn 1 Rad 1, kolumn 2 Rad 1, kolumn 3 Rad 1, kolumn 4
Rad 2, kolumn 1 Rad 2, kolumn 2 Rad 2, kolumn 3 Rad 2, kolumn 4
Rad 3, kolumn 1 Rad 3, kolumn 2 Rad 3, kolumn 3 Rad 3, kolumn 4

Svårare än såhär är det inte att skapa tabeller i HTML, men egentligen borde vi använda några fler taggar, nämligen <thead>, <tbody> och <tfoot> för att märka ut vad som är vad i tabellen. Detta gör man bland annat för att sökmotorer ska kunna urskilja vad som är vad i tabellen.

HTML - HyperText Markup Language
<table border="1"> <!-- Huvudet på tabellen som beskriver datan som finns i tabellen --> <thead> <tr> <td>Förnamn</td> <td>Efternamn</td> <td>Födelseår</td> </tr> </thead> <!-- Datan i tabellen --> <tbody> <tr> <td>Lisa</td> <td>Sturesson</td> <td>1964</td> </tr> <tr> <td>Pelle</td> <td>Sundström</td> <td>1995</td> </tr> <tr> <td>Lotta</td> <td>Evertsson</td> <td>1953</td> </tr> </tbody> <!-- <tfoot> passar inte in i denna tabellen --> </table>
Förnamn Efternamn Födelseår
Lisa Sturesson 1964
Pelle Sundström 1995
Lotta Evertsson 1953

Här kommer ett exempel där man använder <tfoot>.

HTML - HyperText Markup Language
<table border="1"> <!-- Huvudet på tabellen som beskriver datan som finns i tabellen --> <thead> <tr> <td>Vara</td> <td>Kostnad</td> </tr> </thead> <!-- Datan i tabellen --> <tbody> <tr> <td>Mjölk</td> <td>8</td> </tr> <tr> <td>Chips</td> <td>19</td> </tr> <tr> <td>Chocklad</td> <td>23</td> </tr> </tbody> <!-- Den totala summan visas i <tfoot> --> <tfoot> <tr> <td>Totalt</td> <td>50</td> </tr> </tfoot> </table>
Vara Kostnad
Mjölk 8
Chips 19
Chocklad 23
Totalt 50

Huvudcellerna (vanligtvis de celler som finns i taggen <thead>) ska egentligen finnas i taggen <th> istället för <td>, så egentligen borde vår kod se ut såhär:

HTML - HyperText Markup Language
<table border="1"> <!-- Huvudet på tabellen som beskriver datan som finns i tabellen --> <thead> <tr> <!-- Använd <th>, och inte <td>, i tabellhuvudet --> <th>Vara</th> <th>Kostnad</th> </tr> </thead> <!-- Datan i tabellen --> <tbody> <tr> <td>Mjölk</td> <td>8</td> </tr> <tr> <td>Chips</td> <td>19</td> </tr> <tr> <td>Chocklad</td> <td>23</td> </tr> </tbody> <!-- Den totala summan visas i <tfoot> --> <tfoot> <tr> <td>Totalt</td> <td>50</td> </tr> </tfoot> </table>
Vara Kostnad
Mjölk 8
Chips 19
Chocklad 23
Totalt 50

Som du ser visas det som standard mycket snyggare om man använder taggen <th> i tabellhuvudet istället för <td>.

Man kan även slå ihop två (eller flera) intilliggande celler till en med hjälp av attributen rowspan och colspan. Då kan man skapa tabeller i stil med följande exempel:

HTML - HyperText Markup Language
<table border="1"> <!-- Huvudet på tabellen som beskriver datan som finns i tabellen --> <thead> <tr> <th>Vara</th> <th>Antal</th> <th>Kostnad</th> <th>Total</th> </tr> </thead> <!-- Datan i tabellen --> <tbody> <tr> <td>Mjölk</td> <td>3</td> <td>8</td> <td>24</td> </tr> <tr> <td>Chips</td> <td>1</td> <td>19</td> <td>19</td> </tr> <tr> <td>Chocklad</td> <td>2</td> <td>23</td> <td>46</td> </tr> </tbody> <!-- Den totala summan visas i <tfoot> --> <tfoot> <tr> <!-- Colspan=3 gör att denna cellen är lika bred som 3 celler --> <td colspan="3">Att betala:</td> <!-- Hoppar över denna <td>, då cellen till vänster sträcker sig ut över denna --> <!-- Hoppar över denna <td>, då cellen till vänster sträcker sig ut över denna --> <td>89</td> </tr> </tfoot> </table>
Vara Antal Kostnad Total
Mjölk 3 8 24
Chips 1 19 19
Chocklad 2 23 46
Att betala: 89

Som synes gör attributet colspan att en cell smälter ihop med cellerna till höger om den. På motsvarande sätt gör attributet rowspan att en cell smälter ihop med celler nedanför den.

HTML - HyperText Markup Language
<table border="1"> <!-- Huvudet på tabellen som beskriver datan som finns i tabellen --> <thead> <tr> <th>Medlemstyp</th> <th>Förnamn</th> <th>Efternamn</th> <th>Födelseår</th> </tr> </thead> <!-- Datan i tabellen --> <tbody> <tr> <td rowspan="3">Guldmedlem</td> <td>Lisa</td> <td>Sturesson</td> <td>1964</td> </tr> <tr> <!-- Skippar en <td> här, då cellen ovan sträcker sig ner över denna --> <td>Pelle</td> <td>Sundström</td> <td>1995</td> </tr> <tr> <!-- Skippar en <td> här, då cellen ovan sträcker sig ner över denna --> <td>Lotta</td> <td>Evertsson</td> <td>1953</td> </tr> <tr> <td rowspan="2">Vanlig medlem</td> <td>Gunnar</td> <td>Berg</td> <td>1945</td> </tr> <tr> <!-- Skippar en <td> här, då cellen ovan sträcker sig ner över denna --> <td>Arne</td> <td>Nedstrand</td> <td>1989</td> </tr> </tbody> </table>
Medlemstyp Förnamn Efternamn Födelseår
Guldmedlem Lisa Sturesson 1964
Pelle Sundström 1995
Lotta Evertsson 1953
Vanlig medlem Gunnar Berg 1945
Arne Nedstrand 1989

Gå till nästa lektion, Bilder och länkar.