Registreren

[Theo]

Inleiding
Ik kwam er vandaag achter dat je met tabellen veel meer kunt dan de meeste mensen denken. Daarom heb ik mij er in verdiept en heb er een artikel over geschreven. Ik leg je uit welke tags je kunt gebruiken binnen tabellen.


Table
Om een tabel te maken beginnen we met de <table>-tag. Deze is je wellicht bekend. Hier wil ik dan ook niet verder op in gaan. Wat ik wel wil bespreken zijn twee attributen. Namelijk summary en rules. Die zal ik hieronder toelichten.

Summary
De naam van het attribuut verklapt het al: je geeft een samenvatting van de inhoud van de tabel. Dit is vooral voor zoekmachines makkelijk. Deze lezen dat uit en weten vervolgens welke data er in de tabel verwerkt staat. Een voorbeeld:

HTML

Code: Alles selecteren

<table summary="Bezoekersstatistieken van de website Mastercode">
<tr>
   <td>Vandaag:</td><td>100</td>
</tr>
<tr>
   <td>Gisteren:</td><td>100</td>
</tr>
<tr>
   <td>Eergisteren:</td><td>100</td>
</tr>
</table>

Rules
Met dit attribuut bepaal je welke randen er tussen de cellen weergegeven moeten worden. Je kunt hierbij kiezen uit de volgende waarden: (klik op links voor voorbeelden)

• none: geen randen;
• groups: randen tussen de verschillende groepen (thead, tfoot, tbody, colgroup, col)
• rows: randen tussen de rijen.
• cols: randen tussen de kolommen.
• all: randen tussen de kolommen en rijen (niet rondom de tabel)

Caption
<caption> betekend letterlijk inleiding, titel. Met de <caption> tag omschrijven we dus wat in de tabel wordt weergegeven. Deze tag mag maar één keer voorkomen in een tabel. Voorbeeldcode:

HTML

Code: Alles selecteren

<table>
   <caption>Tabel titel</caption>
   <tr>
      <td>....</td>
      ...
   </tr>
</table>

Resultaat.


Rijen groeperen
Wanneer we een tabel horizontaal in stukjes snijden krijgen we vier verschillende delen, te weten:

• <caption>: titel van de tabel.
• <thead>: de koptekst van de tabel.
• <tfoot>: de voettekst van de tabel.
• <tbody>: de inhoud van de tabel.

Wanneer je gebruikt maakt van de <thead> en <tfoot> tags creeëren we een kop- en voettekst. Wanneer we de tabel uitprinten zal, indien van toepassing, op elke nieuwe pagina de kop- en voettekst van de tabel herhaald worden.

Wanneer je <tfoot> gebruikt moet deze altijd voor de <tbody>('s) komen. Dan kan de browser deze renderen voordat de inhoud weergegeven wordt. Dan wordt hij dus netjes onderaan elke pagina gezet.

De <thead> en <tfoot> moeten informatie bevatten over de tabel, de <tbody> bevat de inhoud (rijen van de tabel). Elk element moet, indien aanwezig, minimaal één rij (tr) bevatten. Het aantal kolommen in de alle drie moet gelijk zijn. Een voorbeeldcode:

HTML

Code: Alles selecteren

<table>
<thead>
   <tr>
      <td>Koptekst 1</td>
      <td>Koptekst 2</td>
      <td>Koptekst 3</td>
   </tr>
</thead>
<tfoot>
   <tr>
      <td>Voettekst 1</td>
      <td>Voettekst 2</td>
      <td>Voettekst 3</td>
   </tr>
</tfoot>
<tbody>
   <tr>
      <td>Inhoud 1.1</td>
      <td>Inhoud 1.2</td>
      <td>Inhoud 1.3</td>
   </tr>
   <tr>
      <td>Inhoud 2.1</td>
      <td>Inhoud 2.2</td>
      <td>Inhoud 2.3</td>
   </tr>
</tbody>
</table>

Kolommen groeperen
Naast het groeperen van rijen kunnen we ook kolommen groeperen. Dit doen we met de tags <colgroup> en <col>. Het grote voordeel wat je hier mee kunt halen is dat je een kolom (onafhankelijk van het aantal rijen) dezelfde id of class kunt geven en dus op die manier makkelijk in CSS kunt aanroepen. Tevens kun je in één keer de opbouw van de kolommen bepalen.

Met <colgroup> maken we een groep van kolommen. Met het attribuut span bepalen we het aantal kolommen binnen de <colgroup>. Met het width attribuut kunnen we de kolommen een breedte meegeven. Die is dan voor alle kolommen gelijk. Dat wil zeggen dat:

HTML

Code: Alles selecteren

<table>
<colgroup>
   <col width="10" />
   <col width="10" />
   <col width="10" />
   <col width="10" />
   <col width="10" />
</colgroup>
...
</table>

ook geschreven kan worden als:

HTML

Code: Alles selecteren

<table>
<colgroup span="5" width="10">
</colgroup>
...
</table>

Wanneer we een enkele kolom willen defineren gebruiken we de <col>-tag. Binnen een <colgroup> kunnen we één enkele <col> ook aanpassen, dat doen we als volgt:

HTML

Code: Alles selecteren

<table>
<colgroup span="30">
   <col span="29" />
   <col class="de_aparte_col" />
</colgroup>
...
</table>

De <col>-tag kunnen we ook buiten de <colgroup> gebruiken om een losse kolom te definiren. Zo kunnen we bovenstaand voorbeeld ook als volgt schrijven:

HTML

Code: Alles selecteren

<table>
<colgroup span="29">
</colgroup>
<col class="de_aparte_col" />
...
</table>

Rijen
Wanneer we een rij willen maken in een tabel gebruiken we de <tr>-tag. Deze kunnen we los in een tabel gebruiken, maar ook binnen de thead, tfoot, tbody.


Cellen
Binnen onze rijen maken we gebruik van cellen. Hierin maken we onderscheidt in twee soorten, namelijk cellen die 'header' informatie bevatten (de <th>) en cellen die data bevatten (<td>).


Cellen samenvoegen
We kunnen cellen ook samenvoegen. Daarvoor hebben de attributen colspan en rowspan. De namen zeggen het al: met colspan overspannen we de kolommen en met rowspan de rijen. Dit wordt het duidelijkst met twee voorbeelden:

HTML

Code: Alles selecteren

<table border="1">
<tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
</tr>
<tr>
   <td colspan="2">4</td>
   <td>5</td>
</tr>
<tr>
   <td>6</td>
   <td>7</td>
   <td>8</td>
</tr>
</table>

Resultaat.

HTML

Code: Alles selecteren

<table border="1">
<tr>
   <td>1</td>
   <td rowspan="2">2</td>
   <td>3</td>
</tr>
<tr>
   <td>4</td>
   <td>5</td>
</tr>
<tr>
   <td>6</td>
   <td>7</td>
   <td>8</td>
</tr>
</table>

Resultaat.