U bent hier: Home › De richtlijnen › Inhoud › Eenvoudige gegevenstabellen ›

Tabelhoofdingen zijn goed geplaatst

Opgelet! Nieuwe ijkpunten

De ijkpunten in deze rubriek zijn niet meer van toepassing. De nieuwe AnySurfer checklist op 2dot0.anysurfer.be vervangt de oude richtlijnenset van 2006.

U maakt het zichzelf gemakkelijk door kolomhoofdingen in de bovenste rij van de tabel te plaatsen en de rijhoofdingen in de eerste kolom. Als u de tabel anders wil structureren, dan moet u de attributen id en headers gebruiken. Meer hierover leest u in het ijkpunt over Complexe gegevenstabellen.

Voorbeeld

In deze tabel kunnen de th tags hun functie niet optimaal vervullen omdat ze niet in de eerste rij staan.

<table>
  <tr>
    <td>Openingsuren</td>
    <td>gemeentehuis</td>
    <td>stad X</td>
  </tr>
  <tr>
    <th>Dag</th>
    <th>Voormiddag</th>
    <th>Namiddag</th>
  </tr>
  <tr>
    <th>Maandag</th>
    <td>8u-12u</td>
    <td>14u-18u</td>
  </tr>
  <tr>
    <th>Dinsdag</th>
    <td>8u-12u</td>
    <td>Gesloten</td>
  </tr>
  <tr>
    <th>Woensdag</th>
    <td>8u-12u</td>
    <td>14-20u</td>
  </tr>
  <tr>
    <th>Donderdag</th>
    <td>Gesloten</td>
    <td>14u-18u</td>
  </tr>
  <tr>
    <th>Vrijdag</th>
    <td>8u-12u</td>
    <td>Gesloten</td>
  </tr>
</table>

De eenvoudigste oplossing is ervoor te zorgen dat de kolomhoofdingen wel bovenaan in de tabel staan:

<p>Openingsuren gemeentehuis stad X</p>
<table>
  <tr>
    <th>Dag</th>
    <th>Voormiddag</th>
    <th>Namiddag</th>
  </tr>
  <tr>
    <th>Maandag</th>
    <td>8u-12u</td>
    <td>14u-18u</td>
  </tr>
</table>

De oplossing met de attributen headers="" en id="" is een stuk complexer:

<table>
  <tr>
    <td>Openingsuren</td>
    <td>gemeentehuis</td>
    <td>stad X</td>
  </tr>
  <tr>
    <th>Dag</th>
    <th id="vm">Voormiddag</th>
    <th id="nm">Namiddag</th>
  </tr>
  <tr>
    <th id="ma">Maandag</th>
    <td headers="ma, vm">8u-12u</td>
    <td headers="ma, nm">14u-18u</td>
  </tr>
  <tr>
    <th id="di">Dinsdag</th>
    <td headers="di, vm">8u-12u</td>
    <td headers="di, nm">Gesloten</td>
  </tr>
  <tr>
    <th id="wo">Woensdag</th>
    <td headers=wo, vm">8u-12u</td>
    <td headers="wo, nm">14-20u</td>
  </tr>
  <tr>
    <th id="do">Donderdag</th>
    <td headers="do, vm">Gesloten</td>
    <td headers="do, nm">14u-18u</td>
  </tr>
  <tr>
    <th id="vr">Vrijdag</th>
    <td headers="vr, vm">8u-12u</td>
    <td headers="vr, nm">Gesloten</td>
  </tr>
</table>

Gebruikersgroepen die baat hebben bij het toepassen van dit ijkpunt

Blinden

Wie waakt over het respecteren van dit ijkpunt?

Webredacteur (teksten en afbeeldingen)
Webontwikkelaar (programmatie en implementatie CMS)

Betrokken tags en attributen

zie voorbeeld

Overeenkomstige richtlijnen

BlindSurfer: richtlijn 2
WCAG: ijkpunt 5.2

Naar boven

De richtlijnen