Verkorte titel
Hu8 Semantisch correcte opmaak: gebruik van tabelopmaak uitsluitend voor tabeldata

Volledige titel van de techniek

Hu8: Gebruik tabellen voor het weergeven van tabeldata en niet voor het realiseren van presentatie, zoals kolomweergave (HTML)

Toepasbaarheid

Alle webpagina's die gebruik maken van HTML.

Deze techniek is van toepassing op:

• Succescriterium U.1.1 Semantisch correcte opmaak.

Beschrijving

De elementen in HTML zijn bedoeld om de betekenis van de content aan te geven. De visuele weergave van deze inhoud dient door de ontwikkelaar middels een stijltaal of door de style sheet van de user agent te worden bepaald. Het table element en gerelateerde elementen lenen zich voor het creëren van lay-out effecten. Deze praktijk stamt uit een tijd dat de technische mogelijkheden voor visuele presentatie beperkt waren. Nog steeds worden regelmatig elementen uit een opmaaktaal gebruikt voor lay-out. Voor lay-outdoeleinden zijn al lang betere alternatieven beschikbaar, zoals CSS. Het table element is bedoeld voor het markeren/structureren van tabulaire data.

Toepassing van deze techniek draagt bij aan het semantisch gebruik van HTML en een scheiding tussen lay-out en gestructureerde content.

Voorbeelden

Opmerking: Voorbeelden hebben uitsluitend een informatieve functie. Het is niet de bedoeling om een succescriterium te beoordelen enkel op basis van de hier gepresenteerde voorbeelden.

Correct gebruik van een table element voor een eenvoudig tabel (in HTML5):

<table>
  <caption>Boeken over HTML5</caption>
  <thead>
    <tr>
      <th scope="col">Titel</th>

      <th scope="col">Auteur</th>
      <th scope="col">Uitgever</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <th scope="row">
        <a href="http://introducinghtml5.com/">Introducing HTML5</a></th>
      <td>Bruce Lawson, Remy Sharp</td>
      <td>New Riders</td>

    </tr>
    <tr>
      <th scope="row">
        <a href="http://www.abookapart.com/products/html5-for-web-designers">
        HTML5 for Web Designers</a></th>
      <td>Jeremy Keith</td>
      <td>A Book Apart</td>

    </tr>
  </tbody>
</table>

Deze code heeft de volgende tabel als resultaat:

Informatiebronnen

Opmerking: Informatiebronnen zijn uitsluitend informatief bedoeld. Ze maken geen deel uit van de Webrichtlijnen. Deze opsomming impliceert geen goedkeuring van de bronnen door de opstellers of toezichthouders van deze specificatie.

• (HTML 4.01) Tables
• Tabular data (HTML5 for Web Developers)

Gerelateerde technieken

• Hu9: Semantisch correcte opmaak: gebruik van blockquote uitsluitend voor citaten

Toetsen

Procedure

1. Controleer of het table element of table-gerelateerde elementen (zoals th en td) in het document worden gebruikt;
2. Controleer of al deze elementen zijn gebruikt uitsluitend voor het markeren/structureren van tabulaire data.

Verwacht toetsresultaat

Er wordt aan het succescriterium voldaan bij de volgende uitkomst:

1. Controle 2 is waar.

Opmerking: Alle technieken hebben een informatieve status - het is niet verplicht om ze te gebruiken. De "afdoende technieken" worden als afdoende beschouwd om aan succescriteria te voldoen; het is echter niet noodzakelijk om deze technieken toe te passen.
Het staat eenieder vrij om nieuwe technieken voor te stellen.