HTML

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; text, siffror, bilder och annat du kan tänka dig, i rader och kolumner.

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 oftest är text.

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:
Item Item Item Item
Item Item Item
Item Item Item

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 <td> mot <th>, 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:
Kolumn 1 Kolumn 2 Kolumn 3 Kolumn 4
Item Item Item Item
Item Item Item
Item Item Item

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

<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:
En viktig tabell
Kolumn 1 Kolumn 2 Kolumn 3 Kolumn 4
Item Item Item Item
Item Item Item
Item Item Item

Fortsätt läsa om tabellens delar, <thead>, <tfoot> och <tbody>… →