Tabeller er ret komplekse strukturer, der består af rækker og kolonner. Den ydre grundstruktur af tabeller dannes altid af table-elementet.
<table> … </table>
Inden i dette element sker den faktiske tabeldefinition. Det anbefales i øvrigt at tildele tabellen en ramme under implementeringen i HTML. På denne måde kan man bedre følge, hvordan rækker og kolonner præcist kører. Dette opnås ved at tildele attributværdikombinationen border="1" til det indledende <table>. (Bemærk, at attributten border ikke bør bruges i HTML. Her skal man i stedet benytte de tilsvarende CSS-egenskaber. Men mere om det senere).
<table border="1"> … </table>
Næste skridt er definitionen af tabelrækker. Dette gøres ved hjælp af elementet tr.
<table border="1"> <tr></tr> </table>
Men dette fører stadig ikke til den ønskede output. Næste trin er nemlig at definere kolonnerne. Dette gøres igen ved hjælp af td-elementet.
<table border="1">
<tr>
<td></td>
</tr>
</table>Nu kan du definere det første tabelindhold. Dette gøres mellem <td> og </td>.
<table border="1">
<tr>
<td>Indhold 1</td>
</tr>
</table>
Først nu er det værd at se resultatet i browseren.
Dette er sandsynligvis ikke særlig spektakulært, da tabellen i øjeblikket kun består af en tabelcelle. Du kan nu tilføje en ekstra kolonne. Dette gøres igen ved hjælp af et td-element. Vær opmærksom på at definere dette inden for tr-elementet.
<table border="1">
<tr>
<td>Indhold 1</td>
<td>Indhold 2</td>
</tr>
</table>
Igen, se resultatet her.
For at tilføje yderligere rækker til tabellen, opretter du blot et andet tr-element, hvori de ønskede td-elementer defineres.
Igen et eksempel hertil:
<table border="1">
<tr>
<td>Indhold 1</td>
<td>Indhold 2</td>
</tr>
<tr>
<td>Indhold 3</td>
<td>Indhold 4</td>
</tr>
</table>
Se resultatet i browseren for at få følgende resultat:
På denne måde kan du også oprette omfattende tabeller.
Fastlæg hoved, krop og fod
Tabeller kan opdeles i logiske områder. Dette omfatter en hoved-, en eller flere databere og en fod.
<table border="1">
<thead>
<tr>
<th>Afgang</th>
<th>Ankomst</th>
<th>Perron</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Berlin</td>
<td>Stralsund</td>
<td>5</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Berlin</td>
<td>Hamborg</td>
<td>1</td>
</tr>
<tr>
<td>München</td>
<td>Berlin</td>
<td>3</td>
</tr>
</tbody>
</table>Og her er resultatet i browseren:
Opdelingen i de nævnte områder har åbenlyst ikke nogen visuel effekt. Der opstår selvfølgelig et spørgsmål: Hvorfor skulle man så besvære sig med at definere disse områder? Der er to gode grunde til dette:
• Ved hjælp af CSS kan områderne formateres forskelligt efter behov.
• Når lange tabeller udskrives, kan browsere gentage tabellens overskrift og fod på hver side.
Tabellens overskrift indledes med thead. Herefter følger de rækker i tabellen, som hører til overskriftsområdet. Husk at lukke overskriftsområdet </thead>.
Hvis tabellen skal have en fod, skal denne absolut defineres før tabellens krop. Foden indledes med <tfoot>. Herefter kan en eller flere rækker følge, som hører til fodområdet. Luk foden med </tfoot>.
Den faktiske tabelkrop defineres inden for tbody-elementet. Dette tbody kan forekomme flere gange. Luk en tabelkrop ved hjælp af </tbody> hver gang.
Hvorfor skulle man f.eks. bruge flere tbody-elementer i en tabel? Et godt eksempel kunne være Bundesliga-tabellen. I en sådan tabel er der normalt flere områder.
• Mester
• Champions League-deltagere
• Champions League-kvalifikationsvinder
• Europa League-deltagere
• Det grå midtfelt
• Nedrykningsplads
• Nedrykkere
Hver af disse områder kunne pakkes i sit eget tbody-element, og sådan kan de forskellige områder formateres anderledes med CSS.
Definer kolonner på forhånd
Hvordan tabellen vises af browsere afhænger naturligvis primært af antallet af rækker og kolonner. Processen med at vise en tabel er dog ikke helt enkel for browseren. Faktisk skal en browser altid først læse hele tabellen, før den kan vise tabellen. Især med meget omfattende tabeller kan det selvfølgelig tage lidt tid. Dette problem kan undgås ved direkte at informere browseren om, hvor mange kolonner tabellen faktisk består af.
<table>
<colgroup span="2"></colgroup>
<tr>
<th>ISBN</th>
<th>Titel</th>
<th>Pris</th>
</tr>
<tr>
<td>23223423434</td>
<td>En kort historie om næsten alt</td>
<td>29,95 Euro</td>
</tr>
</table>
Med colgroup indledes forhåndsdefinitionen af kolonneangivelserne. Bemærk at de fleste af attributterne tilgængelige i tidligere HTML-versioner ikke længere er tilladt i HTML5 for colgroup. Blandt disse er kun span-attributtet tilladt. Dette attribut forventer antallet af kolonner i tabellen som dets værdi.
Elementet colgroup placeres direkte bag det initielle <table>. Kolonnerne defineres derefter gennem de enkelte col-elementer.
Ved brug af colgroup er der grundlæggende to muligheder:
• Med span-attribut
• Uden span-attribut
Hvis man ikke bruger span-attributtet, skal der defineres et col-element for hver kolonne, som kolonnegruppen skal strække sig over, inde i colgroup-elementet. Bemærk at col er et standalone-element.
<table>
<colgroup>
<col />
<col />
</colgroup>
<tr>
<th>ISBN</th>
<th>Titel</th>
<th>Pris</th>
</tr>
<tr>
<td>23223423434</td>
<td>En kort historie om næsten alt</td>
<td>29,95 Euro</td>
</tr>
</table>
Der findes i øvrigt også en blanding af begge muligheder.
<table> <colgroup> <col> </colgroup> <colgroup span="2"></colgroup> …
Dette er praktisk, når en kolonne skal defineres separat, men man ønsker at gruppere de andre sammen.
