Tabeller hvordan?

Tabeller kan strækkes så de passer til siden eller så de passer præcist til indholdet. En tabel indeholder en eller flere rækker og kolonner.

Koden

<TABLE border=1 align=center>
<TR>
<TD>År</TD>
<TD>Salg</TD>
<TD>Overskud</TD>
</TR>
<TR>
<TD>1997</TD>
<TD>17</TD>
<TD>2,2</TD>
</TR>
<TR>
<TD>1998</TD>
<TD>21</TD>
<TD>2,4</TD>
</TR>
<TR>
<TD>1999</TD>
<TD>24</TD>
<TD>5,1</TD>
</TR>
</TABLE>

Resultat

År Salg Overskud
1997 17 2,2
1998 21 2,4
1999 24 5,1

 

Her angives tagen <TABLE border=1 align=center> som indikerer at det efterfølgende er en tabel og at der er en ramme som er størrelsen 1 og til sidst at tabellen er centreret. Border kan sættes lig nul hvilket indikerer at vi ikke kan se rammen rundt om indholdet i tabellen men indholdet vil stadig være placeret de samme steder

TR viser at det er en ny række og TD er table data altså de data som skal være i den enkelte celle.

Cell padding, spacing og width

Når du laver en tabel kan du også stille på cellpadding hvilket angiver hvor meget plads der skal være mellem indholdet i cellen og til kanterne. Her kommer et eksempel hvor cellpadding er sat til 10.

Koden

<TABLE border=1 align=center cellpadding="10">
<TR>
<TD>År</TD>
<TD>Overskud</TD>
</TR>
<TR>
<TD>1998</TD>
<TD>2,4</TD>
</TR>
<TR>
<TD>1999</TD>
<TD>5,1</TD>
</TR>
</TABLE>

Resultat

År Overskud
1998 2,4
1999 5,1

 

Som det kan ses er der mere plads både over, under og på begge sider. Cell spacing er en måde at øge pladsen mellem cellerne som du kan se i det efterfølgende eksempel. Desuden vil jeg gøre cellen bredere således at du kan bestemmer hvor bred cellerne skal være.

Koden

<TABLE border=1 align=center cellspaceing="10" width="80%">
<TR>
<TD>År</TD>
<TD>Overskud</TD>
</TR>
<TR>
<TD>1998</TD>
<TD>2,4</TD>
</TR>
<TR>
<TD>1999</TD>
<TD>5,1</TD>
</TR>
</TABLE>

Resultat

År Overskud
1998 2,4
1999 5,1

Som det ses er rammen blevet bredere cellspacing="10" og cellerne er blevet bredere width="80%". Læg mærke til at begge attributter er skrevet inden i tabel taget da det gælder for hele tabellen. Jeg har også valgt at sætte width altså bredden til 80%. Dette betyder normalt at tabellen altid vil fylde 80 procent af siden medmindre at den som her er inden i en anden tabel og fylder derfor kun 80 procent af den tabel den er inden i. Tallet som angiver bredden behøver ikke at være i procent så hvis du vil have en tabel der er en bestemt størrelse kan du angive det med tal uden det efterfølgende procenttegn.

Avancerede tabeller

Tabeller kan også oprettes således at celler deles. Desuden kan vi angive farver helt ned på det enkelte celleniveau.

Koden

<TABLE border=1 align=center cellpadding="10" bgcolor=gray>
<TR>
<TH rowspan="2">År</TH><TH colspan="3">Overskud</TH></TR>
<TR><TH>Sjælland</TH><TH>Fyn</TH><TH>Jylland</TH></TR>
<TR>
<TD bgColor=blue>1998</TD>
<TD bgColor=yellow>1,2</TD>
<TD bgColor=green>0,4</TD>
<TD bgColor=red>0,6</TD>
</TR>
<TR>
<TD>1999</TD>
<TD>3,0</TD>
<TD>0,9</TD>
<TD>2,2</TD>
</TR>
</TABLE>

Resultat

År Overskud
Sjælland Fyn Jylland
1998 1,2 0,4 0,6
1999 3,0 0,9 2,2

Her kan du se hvordan tabeller kan komme til at se ud. Hvor rowspan="2" viser at der skal være to rækker i den anden kolonne da den første skal indeholde teksten År. Colspan="3" betyder at kolonnen skal deles i tre og det er de tre nederste i rækken da den øverste række skal hedde Overskud.

Farverne angives for hele tabellen i table taget som bgcolor = gray (baggrundsfarve) eller i hex tal. Hver enkelt celle kan også få tildelt deres egen farve i TD taget og som f.eks. bgcolor=blue.