8. Tabeller
Tabeller er en vigtig hjælp til opsætning af et HTML dokument. Man kan f.eks. ikke
lave kolonne opsætning uden tabeller, ligesom man heller ikke kan placere billeder
vilkårlige steder i et HTML dokument uden tabeller. Så tabeller er en uundværlig hjælp
for enhver web designer.
Et eksempel på en meget enkel tabel:
| venstretop |
højretop |
| venstrebund |
højrebund |
Og dette er koden som skaber den:
<table border="1">
<tr>
<td width="100">venstretop</td>
<td width="100">højretop</td>
</tr>
<tr>
<td width="100">venstrebund</td>
<td width="100">højrebund</td>
</tr>
</table>
En hurtig gennemgang af de brugte tags:
<table>
- <table> fortæller browseren, at her startes et system af tabeller.
<tr>
- <tr> står for table row, altså tabel række, og den fortæller, at
det der står mellem <tr> og </tr> ligger på samme horizontale række.
<td>
- <td> står for table data, altså data eller indhold af cellen
i tabellen ligger mellem <td> og </td>.
</table>
- Indikerer afslutning på systemet af tabeller.
Brugen af <table> tag'et:
I eksemplet før havde jeg kun defineret en ting for tabellen, nemlig rammetykkelsen:
border="1". Men det er muligt at definere meget mere end blot rammetykkelsen, f.eks.
baggrundsfarve/-grafik, rammefarve og opstilning.
Et eksempel på koden til en tabel med rød baggrund:
<table bgcolor="#ff0000">
Et eksempel på koden til en tabel med et stykke baggrundsgrafik:
<table background="grafik.type">
Et eksempel på koden til en tabel som er centreret:
<table align="center">
Og de kan så kombineres:
<table align="center" bgcolor="#ff0000">
Det vil så give en centreret tabel med rød baggrund.
Brugen af <tr> tag'et:
I eksemplet før havde jeg ikke defineret nogle specifikationer for <tr>, da det
sjældent er nødvendigt. Det er muligt at give den aktuelle række en anden
baggrundsfarve end resten, f.eks. sådan her:
<tr bgcolor="#00ff00">
Brugen af <td> tag'et:
I eksemplet før havde jeg defineret en bredde (width) på tabel data cellen,
det er også muligt at definere en højde og opstillingen i cellen.
Et eksempel på koden til en celle med en fast højde:
<td height="100">
Et eksempel på koden til en celle med en fast bredde:
<td width="100">
Et eksempel på koden til en celle med højrestillet data:
<td align="right">
Og de kan kombineres:
<td height="100" width="100" align="right">