HTML5 tutorial 5 – Tabeller

I dette afsnit af min HTML5 tutorial vil jeg forklare hvordan du laver tabeller i HTML. 
Tabeller er meget anvendelige på hjemmesider, når du skal sætte noget data op på en overskuelig måde. For at lave en tabel i HTML bruger du <table> tagget. Herefter bruger du <tr> (table row) for hver række og <td> (table data) for hver kolonne.
Prøv f.eks. at bruge denne kode:

<table>
 <tr>
 <td>Celle 1</td>
 <td>Celle 2</td>
 </tr>
 <tr>
 <td>Celle 3</td>
 <td>Celle 4</td>
 </tr>
</table>

Dette vil give en tabel der ser således ud:

Koden fungerer altså sådan at du angiver én række adgangen. Først en ny række og så hver celle i den række. Hvis du indsætter tekst i hver celle, vil du finde ud af, at teksten ikke altid ordnes øverst.

Justering af tekst

For at få teksten justeret øverst i hver celle kan du angive attributten valign=”top” i hver <td> tag. Dette er den vertikale alignment, som du så kan angive som top.

<td valign="top">Tekst</td>

Du kan også angive en align-attribut for at styre tekstjusteringen i horisontal retning.

<td valign="top" align="center>Tekst</td>

Bredde, højde og border

For at styre bredden og højden af tabellen, kan du bruge attributterne height og width. På samme måde kan du også få en kant omkring hele tabellen.

<table width="350" border="1">

Bredden kan både være angivet i pixels og relativ til hele skærmen. Denne kode betyder altså at tabellen skal fylde 70% af hele skærmen.

<table width="70%" border="1">

Også den enkelte celle kan du indstille bredde og kant for.

<td valign="top" widht="25%" align="center" border="1">

Samlet set kan du altså have en tabel der ser således ud:

<table width="100%" border="1">
<tr>
<td valign="top" align="center" width="50%" border="1">
Celle 1
</td>
<td valign="top" align="center" width="50%" border="1">
Celle 2
</td>
</tr>
<tr>
<td valign="top" align="center" width="50%" border="1">
Celle 3
</td>
<td valign="top" align="center" width="50%" border="1">
Celle 4
</td>
</tr>
</table>

Du kan indsætte stort set alt i tabeller: tekst, billeder og links.

Colspan og Rowspan

Med attributterne colspan og rowspan kan du flette celler sammen. I nedenstående celle angiver colspan=”3″ f.eks. at celle 1 skal strække sig over 3 kolonner.

<table border="1">
<tr>
 <td colspan="3">Celle 1</td>
 </tr>
 <tr>
 <td>Celle 2</td>
 <td>Celle 3</td>
 <td>Celle 4</td>
 </tr>
</table>

På samme måde kan du også med rowspan få cellerne til at strække over flere rækker.
Det var lidt om tabeller i HTML. Når du har lært HTML, kan du evt. kaste dig over CSS hvor mulighederne for at præsentere data i tabel-lignende strukturer er meget større. I næste afsnit skal vi kigge nærmere på formularer.