Tabeller bruges til at præsentere tabulær data (dvs. data som bedst vises i rækker og kolonner).
Opbygningen af tabeller i HTML kan virke kompliceret og uoverskueligt, men hvis man holder hovedet koldt og tungen lige i munden, er det egentlig meget simpelt og logisk.
Eksempel 1:
<table>
<tr>
<td>Celle 1</td>
<td>Celle 2</td>
</tr>
<tr>
<td>Celle 3</td>
<td>Celle 4</td>
</tr>
</table>
Vil se sådan ud i browseren:
| Celle 1 | Celle 2 |
| Celle 3 | Celle 4 |
Jeg sagde jo, at det kunne virke kompliceret og uoverskueligt. Men lad os prøve at gøre det simpelt og logisk:
Der bruges 3 grundlæggende typer tags i tabeller:
Det der sker i Eksempel 1 er altså, at tabellen startes med et <table>, efterfulgt af et <tr>, der fortæller, at her begynder en række. I denne række indsættes to celler: <td>Celle 1</td> og <td>Celle 2</td>. Rækken afsluttes derefter med et </tr> og en ny række <tr> startes umiddelbart bagefter. Den nye række indeholder ligeledes to celler inden den afsluttes. Tabellen afvikles med </table>.
Lige for at slå det fast: rækker er celler horisontalt og kolonner er celler vertikalt:
| Celle 1 | Celle 2 |
| Celle 3 | Celle 4 |
Celle 1 og celle 2 udgør altså en række. Celle 1 og celle 3 er en kolonne.
I ovenstående eksempel havde tabellen to rækker og to kolonner. En tabel kan dog have ubegrænset antal rækker og kolonner:
Eksempel 2:
<table>
<tr>
<td>Celle 1</td>
<td>Celle 2</td>
<td>Celle 3</td>
<td>Celle 4</td>
</tr>
<tr>
<td>Celle 5</td>
<td>Celle 6</td>
<td>Celle 7</td>
<td>Celle 8</td>
</tr>
<tr>
<td>Celle 9</td>
<td>Celle 10</td>
<td>Celle 11</td>
<td>Celle 12</td>
</tr>
</table>
Vil se sådan ud i browseren:
| Celle 1 | Celle 2 | Celle 3 | Celle 4 |
| Celle 5 | Celle 6 | Celle 7 | Celle 8 |
| Celle 9 | Celle 10 | Celle 11 | Celle 12 |
Selvfølgelig er der attributter. Med attributten border kan du f.eks. sætte en ramme om din tabel:
Eksempel 3:
<table border="1">
<tr>
<td>Celle 1</td>
<td>Celle 2</td>
</tr>
<tr>
<td>Celle 3</td>
<td>Celle 4</td>
</tr>
</table>
Vil se sådan ud i browseren:
| Celle 1 | Celle 2 |
| Celle 3 | Celle 4 |
Tykkelsen på rammen angives i pixels (se lektion 9)
Ligesom med billeder kan du også styre en tabels bredde (width) i pixels - men du kan også angive den i procent af skærmen:
Eksempel 4:
<table border="1" width="30%">
Vil i browseren svare til 30% af et helt skærmbillede. Prøv selv.
Der er masser af attributter til tabeller. Her er to mere:
align: Styrer centreringen i hele tabellen, i en række eller i en enkelt celle (se lektion 7)valign: Styrer indholdet vertikalt i den enkelte celle - f.eks. top, middle eller bottomEksempel 5:
<td align="right" valign="top">Celle 1</td>
Du kan stort set indsætte alt i din tabeller: tekst, links og billeder... MEN tabeller er lavet til præsentere tabel-data - det vil sige data som meningsfuldt kan præsenteres i kolonner og rækker - så undlad at proppe ting ind i tabeller blot fordi du vil have det til at stå ved sidan af hinanden.
I de gamle dag - få få år siden - blev tabeller ofte brugt til at styre layout på websites, men hvis du vil styre placering af tekst og billeder, er der nu en meget mere tjekket måde at gøre det på (hint: CSS, men mere om det senere).
Prøv nu selv at lave en række tabeller med forskellige størrelser, attributter og indhold. Det kan man sagtens få mange timer til at gå med.
