Tabeller i HTML

En tabell är ett rutnät att lägga ut strukturerad data i. Ungefär som ett Excel-blad. Att skapa en tabell i HTML är ganska enkelt. Här följer ett exempel på en tabell i minimalistiskt utförande.

<table>
  <thead>
    <tr>
      <th>Rubrik 1</th>
      <th>Rubrik 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Rad 1, kolumn 1</td>
      <td>Rad 1, kolumn 2</td>
    </tr>
    <tr>
      <td>Rad 2, kolumn 1</td>
      <td>Rad 2, kolumn 2</td>
    </tr>
  </body>
</table>

<table> – Startar tabellen

<thead> – Startar tabellen huvud, här i lägger man rubriker för kolumnerna.

<tr> – Påbörjar en rad i tabellen

<th>En rubrik</th> – Skriver ut en rubrik överst kolumn 1

</tr> – Avslutar en rad.

</thead> – Avslutar tabellen huvud.

<tbody> – Här på börjas tabellens kropp, som innehåller värden.

<tr> – I <tbody> har man normal många rader. Varje rad påbörjas med <tr> och avslutas med </tr>

<td>Rad 1, kolumn 1</td> – Skriver ut data i en kolumn.

</tbody> – Avslutar tabellkroppen.

</table> – Avslutar hela tabellen.

Se hur man i <thead> normalt använder <th></th> för att skriva ut rubriker, men i <tbody> brukar man använda <td>. Jag är ganska övertygad om att th betyder table header och td betyder table data.

Ungefär som nedan ser tabellen ut.

Enkel tabell i HTML

Olika stora kolumner i en HTML-tabell

Ibland vill man inte att alla kolumner ska vara lika stora. Någon kolumn kanske ska ta upp lika mycket plats som 2 eller 3 (eller fler) kolumner. Då gör man såhär.

<table>
  <thead>
    <tr>
      <th>Rubrik 1</th>
      <th>Rubrik 2</th>
      <th>Rubrik 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Rad 1, kolumn 1</td>
      <td>Rad 1, kolumn 2</td>
      <td>Rad 1, kolumn 3</td>
    </tr>
    <tr>
      <td>Rad 2, kolumn 1</td>
      <td colspan="2">Rad 2, kolumn 2 & 3</td>
    </tr>
    <tr>
      <td>Rad 3, kolumn 1</td>
      <td>Rad 3, kolumn 2</td>
      <td>Rad 3, kolumn 3</td>
    </tr>
  </body>
</table>

Resultatet blir som nedan.

HTML-tabell med colspan

Trixet är colspan=”2″ som anger hur många kolumner nuvarande kolumn ska vara.

Olika stora rader i en HTML-tabell

På motsvarande sätt kan man göra med rader. Kika på exemplet.

<table>
  <thead>
    <tr>
      <th>Rubrik 1</th>
      <th>Rubrik 2</th>
      <th>Rubrik 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Rad 1, kolumn 1</td>
      <td>Rad 1, kolumn 2</td>
      <td>Rad 1, kolumn 3</td>
    </tr>
    <tr>
      <td>Rad 2, kolumn 1</td>
      <td rowspan="2">Rad 2 & 3, kolumn 2</td>
      <td>Rad 2, kolumn 3</td>
    </tr>
    <tr>
      <td>Rad 3, kolumn 1</td>
      <td>Rad 3, kolumn 3</td>
    </tr>
  </body>
</table>

Här används istället rowspan och resultatet blir som nedan.

HTML-tabell med olika stora rader

I din testfil (se minimalt html-dokument här) kan du prova de olika tabellerna ovan. Kopiera och klistra in. Prova sedan genom att själv ändra lite och se vad som händer. Det är ett bra sätt att lära sig.

För att skapa svarta linjer (så det blir tydligare) runt alla kolumner kan du lägga till detta i din fil också. Gärna över koden för tabellen.

<style>
    th, td
    {
        border:1px solid #000;
    }
</style>