HTML/Basiscursus/Tabellen

Tabellen kunnen in HTML worden gebruikt om data overzichtelijk weer te geven in rijen en kolommen. Vroeger werd deze techniek ook gebruikt om de lay-out van een HTML-pagina te bepalen, deze techniek is echter sterk af te raden, beter is het om gebruik te maken van CSS.

Basis

Voor de bouw van tabellen beschikt u over de volgende elementen:

table-tag: Hiermee maakt u een nieuwe tabel.
tr-tag: "Table Row"; Hiermee wordt een nieuwe rij begonnen.
td-tag: "Table Data"; Een nieuwe datacel,
th-tag: "Table Header"; Net als <td> maar wordt gebruikt voor een titelveld.

Een simpele tabel kan er dus als volgt uitzien:

HTML-code: Een simpele tabel

<table>
  <tr>
    <td></td>
    <th>Kolom 1</th>
    <th>Kolom 2</th>
  </tr>
  <tr>
    <th>Rij 1</th>
    <td>Kolom 1 - Rij 1</td>
    <td>Kolom 2 - Rij 1</td>
  </tr>
  <tr>
    <th>Rij 2</th>
    <td>Kolom 1 - Rij 2</td>
    <td>Kolom 2 - Rij 2</td>
  </tr>
</table>

Dit wordt als volgt weergegeven in een browser:

	Kolom 1	Kolom 2
Rij 1	Kolom 1 - Rij 1	Kolom 2 - Rij 1
Rij 2	Kolom 1 - Rij 2	Kolom 2 - Rij 2

We hebben één tabel (<table>) gemaakt met daarin drie rijen (<tr>). In de eerste rij bevindt zich een lege cel (<td>) en twee titelcellen voor de kolommen (<th>). In de tweede en derde rij bevindt zich een titelcel gevolgd door twee datacellen.

Geavanceerd

Cellen die meerdere kolommen en/of rijen beslaan

Soms is het nodig om cellen samen te voegen zodat deze meerdere rijen of kolommen beslaan, dit is mogelijk met de colspan- en rowspan-attributen.

Let in de voorbeelden goed op hoeveel keer de <th>- en <td>-elementen worden gebruikt.

HTML-code: Gebruik colspan- en rowspan-attribuut

<table>
  <tr>
    <td colspan="2"></td>
    <th>Kangoeroe</th>
  </tr>
  <tr>
    <th rowspan="2">Vertalingen</th>
    <th>Engels</th>
    <td>Kangaroo</td>
  </tr>
  <tr>
    <th>Latijn</th>
    <td>Kangaroo</td>
  </tr>
</table>

		Kangoeroe
Vertalingen	Engels	Kangaroo
Vertalingen	Latijn	Kangaroo

Kolommen

Met de col-tag kunt u in één keer attributen toepassen op alle tabelcellen in deze kolom, zo kunt u met behulp van het class-element een (beperkt aantal) CSS-regels op alle cellen toepassen, bijvoorbeeld:

HTML-code: Gebruik col-element

{|
<table>
  <col class="naam">
  <tr>
    <th>Naam</th>
    <th>Klasse</th>
  </tr>
  <tr>
    <td>Kangoeroe</td>
    <td>Zoogdieren</td>
  </tr>
</table>

Deze tabel wordt samen met de CSS-regel .naam {color: honeydew;} als volgt getoond in een browser:

Naam	Klasse
Kangeroe	Zoogdieren

Het col element kan los voorkomen of in een colgroup-element. U kunt deze twee niet door elkaar gebruiken; als er een colgroup-element wordt gebruikt moeten alle col-elementen genest worden in colgroup-elementen.

Het <caption>-element

Om uw tabel een titel te geven kunt u het caption-element gebruiken direct na het openen van de tabel, bijvoorbeeld:

HTML-code: Gebruik <caption>-element

<table>
<caption>Een simpele tabel</caption>
  <tr>
    <th>Naam</th>
    <th>Klasse</th>
  </tr>
  <tr>
    <td>Kangoeroe</td>
    <td>Zoogdieren</td>
  </tr>
</table>

Dit wordt als volgt getoond in een browser:

Een simpele tabel
Naam	Klasse
Kangoeroe	Zoogdieren

Rijgroepen en kolomgroepen

Rijgroepen

Er zijn 3 verschillende rijgroepen; thead, tbody en tfoot. thead bevat rijen met titelcellen die informatie geven over deze kolommen. Hetzelfde geldt voor tfoot (totaalaantallen bijvoorbeeld), tbody bevat de data. Door met rijgroepen te werken is het bijvoorbeeld mogelijk een scrollbar in de tbody te tonen terwijl de titelcellen blijven staan.

Let goed op de plaats van tfoot, deze komt voor tbody maar wordt in de pagina wel aan de onderkant getoond.

HTML-code: Rijgroepen

<table>
  <thead>
    <tr>
      <td></td>
      <th>Eten</th>
      <th>Transport</th>
      <th>Totalen</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Totaal</th>
      <td>44</td>
      <td>47</td>
      <td>91</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <th>Dag 1</th>
      <td>14</td>
      <td>21</td>
      <td>35</td>
    </tr>
    <tr>
      <th>Dag 2</th>
      <td>12</td>
      <td>8</td>
      <td>20</td>
    </tr>
    <tr>
      <th>Dag 3 </th>
      <td>18</td>
      <td>18</td>
      <td>36</td>
    </tr>
  </tbody>
</table>

Kolomgroepen

U kunt kolommen groeperen met behulp van het colgroup-element. Als u een colgroup-element gebruikt kunt u geen losse col-elementen meer gebruiken.

Toegankelijke tabellen

Tabellen zijn heel moeilijk voor screenreaders (browsers die een pagina voorlezen) te begrijpen. Er zijn enkele technieken om tabellen toegankelijker te maken voor mensen die gebruik maken van screenreaders.

Samenvatting

Voor screenreaders kan een korte samenvatting worden gegeven van de inhoud van de tabel zodat de gebruiker direct kan zien of de tabel interessant is, bijvoorbeeld:

HTML-code: Gebruik summary-attribuut

<table summary="Namen en klasses van dieren">
<caption>Een simpele tabel</caption>
  <tr>
    <th>Naam van het dier</th>
    <th>Klasse</th>
  </tr>
  <tr>
    <td>Kangoeroe</td>
    <td>Zoogdieren</td>
  </tr>
</table>

Afkortingen

Een screenreader leest voor elke datacel de bijbehorende headercel op, bijvoorbeeld: Naam van het dier: kangoeroe, Klasse: Zoogdieren.

Bij lange tabellen is het vervelend om constant "Naam van het dier" te horen, met het abbr-attribuut kan een kortere naam worden gegeven.

HTML-code: Gebruik abbr-attribuut

<table summary="Namen en klasses van dieren">
<caption>Een simpele tabel</caption>
  <tr>
    <th abbr="Naam">Naam van het dier</th>
    <th>Klasse</th>
  </tr>
  <tr>
    <td>Kangoeroe</td>
    <td>Zoogdieren</td>
  </tr>
</table>

Deze tabel wordt nu als volgt voorgelezen: Naam: Kangoeroe, Klasse: Zoogdieren

Titelcellen

Bij ingewikkelde tabellen is het vaak voor niet-visuele gebruikers en computer moeilijk te zien welke titelcellen betrekking hebben op welke datacellen. Er zijn verschillende manieren om dit duidelijk te maken.

Axis-attribuut

Headers-attribuut

Scope-attribuut

Als er titelcellen (<th>) worden gebruikt in zowel de eerste rij als in de eerste kolom kan die problemen opleveren voor screenreaders, dit is op te lossen met het scope-attribuut. Met het scope-attribuut kunt u duidelijk maken of een titelcel informatie geeft over de rij of over de kolom.

HTML-code: Gebruik scope-attribuut

<table>
  <tr>
    <td></td>
    <th scope="col">Klasse</th>
    <th scope="col">Orde</th>
  </tr>
  <tr>
    <th scope="row">Kangoeroe</th>
    <td>Zoogdieren</td>
    <td>Klimbuideldieren</td>
  </tr>
</table>

	Klasse	Orde
Kangeroe	Zoogdieren	Klimbuideldieren

Een andere mogelijkheid is:

HTML-code: Gebruik scope-attribuut (2)

<table>
  <tr>
    <th scope="col">Naam</th>
    <th scope="col">Klasse</th>
    <th scope="col">Orde</th>
  </tr>
  <tr>
    <td scope="row">Kangoeroe</td>
    <td>Zoogdieren</td>
    <td>Klimbuideldieren</td>
  </tr>
</table>

Naam	Klasse	Orde
Kangoeroe	Zoogdieren	Klimbuideldieren

In plaats van de waardes col en row kunt u ook colgroup en rowgroup gebruiken, hiermee geeft u aan dat de cel titelinformatie bevat voor de gehele kolomgroep of rijgroep.

Voorbeeld

Dit is een voorbeeld van een geavanceerde tabel die begrijpbaar is voor computers en ook toegankelijke voor visueel gehandicapten:

HTML-code: Geavanceerde, toegankelijke tabel

<table summary="Deze tabel bevat de uitgaven die zijn gedaan tijdens mijn verblijf in San Jose en Seattle">
  <caption>
  Rapport reisuitgaven
  </caption>
  <colgroup class="b1">
  <col>
  </colgroup>
  <colgroup class="uitgaven" span="3"></colgroup>
  <colgroup>
  <col class="b2">
  </colgroup>
  <thead>
    <tr>
      <td rowspan="2"></td>
      <th colspan="3">Uitgaves</th>
      <td rowspan="2">subtotalen</td>
    </tr>
    <tr>
      <th id="a2" axis="uitgaven">Eten</th>
      <th id="a3" axis="uitgaven">Hotels</th>
      <th id="a4" axis="uitgaven">Transport</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Totalen</th>
      <td>196.27</td>
      <td>442.00</td>
      <td>162.00</td>
      <td>800.27</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <th id="a6" axis="locatie">San Jose</th>
      <th></th>
      <th></th>
      <th></th>
      <td></td>
    </tr>
    <tr>
      <td id="a7" axis="datum">25-Aug-97</td>
      <td headers="a6 a7 a2">37.74</td>
      <td headers="a6 a7 a3">112.00</td>
      <td headers="a6 a7 a4">45.00</td>
      <td></td>
    </tr>
    <tr>
      <td id="a8" axis="datum">26-Aug-97</td>
      <td headers="a6 a8 a2">27.28</td>
      <td headers="a6 a8 a3">112.00</td>
      <td headers="a6 a8 a4">45.00</td>
      <td></td>
    </tr>
    <tr class="subtotalen">
      <td>subtotalen</td>
      <td>65.02</td>
      <td>224.00</td>
      <td>90.00</td>
      <td>379.02</td>
    </tr>
    <tr>
      <th id="a10" axis="locatie">Seattle</th>
      <th></th>
      <th></th>
      <th></th>
      <td></td>
    </tr>
    <tr>
      <td id="a11" axis="datum">27-Aug-97</td>
      <td headers="a10 a11 a2">96.25</td>
      <td headers="a10 a11 a3">109.00</td>
      <td headers="a10 a11 a4">36.00</td>
      <td></td>
    </tr>
    <tr>
      <td id="a12" axis="datum">28-Aug-97</td>
      <td headers="a10 a12 a2">35.00</td>
      <td headers="a10 a12 a3">109.00</td>
      <td headers="a10 a12 a4">36.00</td>
      <td></td>
    </tr>
    <tr class="subtotalen">
      <td>subtotalen</td>
      <td>131.25</td>
      <td>218.00</td>
      <td>72.00</td>
      <td>421.25</td>
    </tr>
  </tbody>
</table>

Met CSS toegepast wordt deze tabel als volgt getoond in browsers:

Geavanceerde tabel