Lektion 8: Tables

Denne lektion lærer dig at lave tabeller. Tabeller er nyttige når du skal have struktureret indholdet på dine websider.

Når indhold (f.eks. tekst og grafik) skal placeres på en webside, eller hvis du skal lave tabeller bør du bruge <table>s.

At mestre tables i HTML er nødvendigt hvis du vil lave god HTML og/eller kreative designs.

En simpel table

En table er defineret som alt hvad der står imellem <table> ..og.. </table>. En tabel består af rækker - disse række har celler. I cellerne placeres indhold til tabellen.

En række starter med <tr> og slutter med </tr>. En celle starter med <td> og slutter med </td>.

Lad os tage et simpelt eksempel:

noget tekst	anden tekst
tredie tekst	fjerde tekst

Tabellen herover består af to rækker med hver to celler i. Koden ser således ud:

<table border="1">
<tr>
<td>noget tekst</td>
<td>anden tekst</td>
</tr>
<tr>
<td>tredie tekst</td>
<td>fjerde tekst</td>
</tr>
</table>

Forklaret lidt anderledes:

En lidt udvidet tabel

Der er en række koder du kan og bør bruge i hendholdsvis <table> tag'n og i <td> tag'n. Af hensyn til god HTML kodning anbefaler vi at du altid minimum bruger flg. koder i din <table> tag:

• border="" angiver kant på tabel og celler. Kan have værdien 1-15 (pixels).
• cellspacing="" angiver luft imellem cellerne. Kan have værdien 1-15 (pixels).
• cellpadding="" angiver luft inde i cellernes venstre side, højre side, top og bund. Kan have værdien 1-15 (pixels).

Her ud over er der en lang række andre mulige koder til <table> tag'n.. Her har du de mest brugte:

• width="" bredde af tabellen i pixels eller %.
• aling=" placering af tabellen. F.eks. "left", "center" eller "right".
• bgcolor="" baggrundsfarve til tabellen. Angives i Hex farver - f.eks. bgcolor="#F03333".

Følgende koder er også gode at bruge i <td> tag'sne:

• width="" angiver bredde på cellen i pixels eller procent. Bemærk: Hvis du angiver bredde i både <table> og <td> tags bør "matematikken gå op". Det nytter ikke noget at skrive width="200" i <table> tag'n og derefter skirve width="100" og width="50" (=150) i de to <td> tags.
• aling="" angiver placering af indhold inde i en celle. F.eks. "left", "center" og "right".
• valign="" angiver vertical placering af indhold i en celle. F.eks. "top", "middle" og "bottom".
• bgcolor="" angiver en baggrundsfarve til cellen i Hex farver. F.eks. bgcolor="#3390333".

Lad os tage samme eksempel fra før. Denne gang bruger vil lidt flere koder. Resultatet ser nu pænere ud:

noget tekst	anden tekst
tredie tekst	fjerde tekst

Koden til tabellen herover ser således ud:

<table border="1" cellspacing="0" cellpadding="5" width="300">
<tr>
<td width="50%">noget tekst</td>
<td width="50%">anden tekst</td>
</tr>
<tr>
<td width="50%">tredie tekst</td>
<td width="50%">fjerde tekst</td>
</tr>
</table>

Vi anbefaler fra klikamok.dk's side flg. "skelet" som standard for alle tabeller:

<table border="" cellspacing="" cellpadding="" width="">
<tr>
<td width="" valign="top">...</td>
</tr>
</table>

Avanceret brug af tabeller

Måske ønsker du dine celler placeret lidt mere fleksibelt. Vha. koden rowspan="" og colspan="" i dine <td> tags er det muligt at få celler til at have anden størrelse - i forhold til andre celler. Dette er lettest forklaret med to eksempler.

I følgende tabel fylder den første celle 2 celler i bredden. Denne effekt er opnået vha. koden colspan="2":

første celle
anden celle	tredie celle

Koden til tabellen herover ser således ud:

<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td colspan="2">første celle</td>
</tr>
<tr>
<td>anden celle</td>
<td>tredie celle</td>
</tr>
</table>

I tabellen herunder tvinger vi en celle til at fylde 2 celler i højden, ved at skrive rowspan="2" i cellen:

første celle	anden celle
	tredie celle

Koden til tabellen herover ser således ud (bemærk at vi vha. koden valign="top" tvinger indhold af den første celle til at stå i toppen af cellen):

<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td rowspan="2" valign="top">første celle</td>
<td>anden celle</td>
</tr>
<tr>
<td>tredie celle</td>
</tr>
</table>

Fletning af tabeller

I stedet for, eller som tillæg, til at bruge rowspan="" og colspan="" i celler, kan vi putte tabeller ind i tabeller. Denne effekt bruges meget - f.eks. i forbindelse med layout.

Dette er sidste eksempel på en tabel på denne side og måske synes du den er svær. Men kan du lave / bruge tabeller som denne, er du kommet langt:

Dagens tilbud:

Vare Pris 10 tomater Kr. 9,95 PIII 800MHz processor Kr. 799,95

Koden til tabellen herover ser således ud:

<table border="0" cellspacing="0" cellpadding="0" width="425">
<tr>
<td valign="top" width="150">
        Dagens tilbud:
        </td>
<td valign="top" width="275">
        <table border="0" cellspacing="0" cellpadding="1" width="100%">
        <tr>
        <td bgcolor="#C0C0C0">Vare</td>
        <td bgcolor="#C0C0C0" colspan="2">Pris</td>
        </tr>
        <tr>
        <td>10 tomater</td>
        <td>Kr.</td>
        <td align="right">9,95</td>
        </tr>
        <tr>
        <td>PIII 800MHz processor</td>
        <td>Kr.</td>
        <td align="right">799,95</td>
        </tr>
        </table>
        </td>
</tr>
</table>

Tabeller og tekst

En sidste bemærkning: Bruger du ikke CSS til at erklære hvordan tekst ser ud, er det nødvendigt for dig at bruge <font> tags to steder i forbindelse med tabeller.

1. Hver gang du har tekst i en celle skal du gentage/give en <font> erklæring. F.eks. således:

<td><font color="#000000" size="-2" face="Arial">
        ..noget tekst..
        </font></td>

2. Hver gang du har tekst efter en tabel, skal du gentage <font> erklæring. F.eks. således:

<table>
(her er en tabel)
</table>
<font color="#000000" size="-2" face="Arial">
..noget indhold her..
</font>

Når du laver din side og kigger i Internet Explorer er de to ovenstående punkter ikke altid nødvendige. Men pga. et fænomen der hedder "bred browser kompatibilitet", er det alligevel en god idé at gøre det til en vane.

Skrevet okt. 2001 af Niels Rune Bøggild

Tilføjet af Simon Glue den 02-12-2003 - Hits: 3849