Apprendre le Web

HTML tableaux avancés et accessibilité

Dans le second article de ce module, nous voyons quelques fonctionnalités plus avancées des tableaux HTML — comme les  titres / résumés et groupement de vos lignes dans l'en-tête du tableau, le corps et ou le pied de page — ainsi que l'accessibilité des tableaux pour les utilisateurs malvoyants.

Prérequis: Les bases de HTML (voir Introduction à HTML).
Objectif: En apprendre plus sur les fonctionnalités HTML plus avancées et l'accessibilité des tableaux.

Ajouter un titre à votre tableau avec <caption>

Vous pouvez donner à votre tableau un titre en le mettant dans un élément <caption> inséré dans un élément <table>. Vous devriez le poser juste après l'ouverture de la balise <table> .

<table>
  <caption>Dinosaurs in the Jurassic period</caption>

  ...
</table>

Comme vous pouvez le voir sur le bref exemple ci-dessus, le titre consiste en une description synthétique du contenu du tableau. C'est utile pour tous les lecteurs qui souhaitent savoir rapidement si le tableau peut leur être utile, sans avoir à parcourir tout le contenu, en particulier s'ils sont non-voyants. Plutôt que de faire lire au lecteur d'écran de nombreuses cellules pour savoir sur quoi porte le tableau, il ou elle peut compter sur un titre et décider de lire ou non le tableau dans le détail.

Le titre est placé directement sous la balise <table>.

Note: L'attribut summary peut aussi être utilisé dans un élément <table> pour fournir une description — ceci est également lu par les lecteurs d'écran. Cependant, nous recommandons d'utiliser plutôt l'élément <caption>,  car summary est considéré obsolète par  HTLM5, et ne peut être lu par les utilisateurs voyants (il n'apparaît pas dans la page.)

Apprentissage : Ajouter un titre

Essayons cela, revisitons un exemple rencontré dans l'article précédent.

  1. Ouvrez votre planning de la professeure de langue de la fin de Tableaux basiques en HTML, ou faites une copie de notre fichier timetable-fixed.html.
  2. Ajoutez un titre approprié pour le tableau.
  3. Enregistrez votre code et ouvrez-le dans un navigateur pour voir à quoi il ressemble.

Note: Vous pouvez trouver notre version sur GitHub — voir timetable-caption.html (voir aussi en réel).

Ajout d'une structure avec <thead>, <tfoot>, et <tbody>

Comme la structure de vos tableaux devient un peu plus complexe, il est utile de leur donner plus de définition structurelle. Un moyen clair de le faire est d'utiliser <thead>, <tfoot>, et <tbody>, qui permettent de marquer l'en-tête, le pied et le corps du tableau.

Ces éléments ne rendent pas le tableau plus accessible aux utilisateurs de lecteurs d'écran, et n'entraînent aucune amélioration visuelle par eux-mêmes. Ils sont cependant très utiles pour la présentation et la mise en page — agissant comme des accroches pour l'ajout de CSS. Pour vous donner quelques exemples intéressants, dans le cas d'un grand tableau, vous pouvez répéter l'en-tête et le pied de page sur chaque page imprimée ; vous pouvez prévoir l'affichage du corps sur une seule page et accéder au contenu par défilement vers le haut ou vers le bas.

Pour les utiliser :

  • L'élément <thead> doit couvrir la partie du tableau qui est l'en-tête — ce sera en général la première ligne contenant les en-têtes de colonnes, mais pas toujours. Dans le code, si vous utilisez les éléments  <col>/<colgroup>, l'en-tête du tableau devrait venir juste en-dessous de ceux-ci.
  • L'élément <tfoot> doit couvrir la partie du tableau qui est le pied de page — ce peut être une dernière ligne contenant par exemple les totaux. Vous pouvez inclure l'élément <tfoot>  à la suite du code contenant le corps du tableau, tel que vous souhaitez le trouver, ou juste en-dessous de l'élément <thead> (le navigateur l'affichera toujours au pied du tableau).
  • L'élément <tbody>  doit couvrir toutes les parties du tableau non contenues dans un <thead> ou un <tfoot>. Il pourra apparaître dans le code, sous la déclaration de l'en-tête ou du pied de page, selon la façon dont vous avez décidé de le structurer (voir les notes).

Note: <tbody> est toujours inclus dans tous les tableaux, implicitement si vous ne l'avez pas spécifié dans votre code. Pour le vérifier, ouvrez un de vos tableaux ne contenant pas l'élément <tbody> et regardez le code HTML dans les outils de développement de votre navigateur — vous verrez que votre navigateur a ajouté cette balise pour vous. Si vous vous demandez pourquoi  vous ennuyer à gérer ce qui est ajouté automatiquement — parce que cela vous donne plus de contrôle sur la structure et l'apparence de votre tableau.

Apprentissage : Ajout d'une structure au tableau

Mettons en oeuvre ces nouveaux éléments.

  1. D'abord, faites une copie locale des fichiers spending-record.html et minimal-table.css dans un nouveau dossier.
  2. Essayez de les ouvrir dans un navigateur — Vous verrez qu'il semble correct, mais qu'il gagnerait à être amélioré. La ligne "SUM" qui contient les totaux des montants dépensés semble être au mauvais endroit et il manque certains détails du code.
  3. Mettez la ligne d'en-têtes en évidence avec l'élément <thead> , la ligne des totaux ("SUM") dans un <tfoot>, et le reste contenu dans un <tbody>.
  4. Enregistrez et actualisez, et vous verrez que l'ajout de l'élément <tfoot> a renvoyé la ligne "SUM" en bas du tableau.
  5. Ensuite, ajoutez un attribut colspan  pour générer une cellule Total ("SUM") couvrant les quatre premières colonnes, ainsi le nombre actuel apparaît au pied de la colonne "Cost".
  6. Ajoutons un style supplémentaire au tableau, pour vous donner une idée de l'utilité de ces éléments pour l'application de CSS. Dans le <head> du document HTML, vous pouvez voir un élément <style> vide, ajoutez les lignes suivantes de code CSS :
    tbody {
      font-size: 90%;
      font-style: italic;
    }
    
    tfoot {
      font-weight: bold;
    }
    
  7. Enregistrez, actualisez et regardez le résultat. Si <tbody> et <tfoot> n'étaient pas en place, vous devriez écrire plus de commandes plus complexes (sélection/règles) pour l'application des mêmes styles.

Note: Nous ne nous attendons pas à ce que vous compreniez le CSS maintenant. Vous en apprendrez plus avec nos modules CSS (Introduction to CSS est un bon moyen de commencer ; nous avons aussi un article spécifique sur styling tables).

Le code de votre tableau fini devrait ressembler approximativement au suivant :

Note: Vous pouvez aussi le trouver sur Github  spending-record-finished.html (voir aussi le résultat).

Tableaux imbriqués

Il est possible d'inclure un tableau dans un autre, tant que vous spécifiez la structure complète, y compris l'élément <table>. Ce n'est généralement pas conseillé, car il rend le balisage plus confus et réduit l'accessiblilité pour les utilisateurs de lecteurs d'écran, alors que dans de nombreux cas, il suffit d'insérer des cellules/lignes/colonnes dans un tableau existant. Mais il est parfois nécessaire, quand par exemple vous souhaitez importer facilement des données provenant d'autres sources.

Le balisage suivant montre un tableau simple imbriqué :

<table id="table1">
  <tr>
    <th>title1</th>
    <th>title2</th>
    <th>title3</th>
  </tr>
  <tr>
    <td id="nested">
      <table id="table2">
        <tr>
          <td>cell1</td>
          <td>cell2</td>
          <td>cell3</td>
        </tr>
      </table>
    </td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
</table>

La sortie ressemble à ceci :

title1 title2 title3
cell1 cell2 cell3
cell2 cell3
cell4 cell5 cell6

Tableaux pour les utisateurs malvoyants

Rappelons brièvement comment nous utilisons les tableaux de données. Un tableau peut être un outil pratique pour accéder rapidement à une donnée et rechercher différentes valeurs. Par exemple, un bref coup d'oeil sur le tableau suivant suffit pour savoir combien de bagues ont été vendues à Gent en août dernier. Pour comprendre ces informations, nous faisons visuellement l'association entre les données du tableau et les en-têtes de colonnes et/ou de lignes.

Items Sold August 2016
    Clothes Accessories
    Trousers Skirts Dresses Bracelets Rings
Belgium Antwerp 56 22 43 72 23
Gent 46 18 50 61 15
Brussels 51 27 38 69 28
The Netherlands Amsterdam 89 34 69 85 38
Utrecht 80 12 43 36 19

Mais que faire si vous ne pouvez pas créer ces associations visuelles ? Comment pouvez-vous lire un tableau comme celui ci-dessus ? Les personnes malvoyantes utilisent souvent un lecteur d'écran qui leur lit les informations des pages web. Ce n'est pas un problème quand vous lisez du texte brut, mais l'interprêtation d'un tableau peut constituer un défi pour une personne aveugle. Néanmoins, avec le balisage approprié, nous pouvons suppléer aux associations visuelles par de la programmation.

Cette section de l'article fournit d'autres techniques pour réaliser les tableaux les plus accessibles que possible.

Utilisation des en-têtes de colonnes et de lignes

Les lecteurs d'écran identifieront tous les en-têtes et les utiliseront pour réaliser automatiquement les associations entre ces en-têtes et les cellules correspondantes.  La combinaison des en-têtes des colonnes et des lignes doit permettre d'identifier et d'interprêter les données de chaque cellule. Ainsi, les utilisateurs de lecteurs d'écran peuvent accéder aux données d'une façon similaire à celle des utilisateurs voyants.

Nous avons déjà traité des en-têtes dans notre article précédent — voir Ajouter des en-têtes avec <th> .

L'attribut scope

Un nouveau sujet pour cet article est l'attribut scope, qui peut être ajouté dans un élément <th> pour dire aux lecteurs d'écran si la cellule contient un en-tête de colonne ou de ligne. En revenant à notre exemple d'enregistrement des dépenses vu plus tôt, vous pouvez définir sans ambiguité l'en-tête de colonne en tant qu'en-tête de colonne comme ceci :

<thead>
  <tr>
    <th scope="col">Purchase</th>
    <th scope="col">Location</th>
    <th scope="col">Date</th>
    <th scope="col">Evaluation</th>
    <th scope="col">Cost (€)</th>
  </tr>
</thead>

Et chaque ligne pourrait également avoir une définition de son en-tête comme ceci (à condition d'avoir ajouté des en-têtes de lignes comme des en-têtes de colonnes):

<tr>
  <th scope="row">Haircut</th>
  <td>Hairdresser</td>
  <td>12/09</td>
  <td>Great idea</td>
  <td>30</td>
</tr>

Les lecteurs d'écran reconnaîtront un balisage structuré comme celui-ci et permettront à leurs utilisateurs de lire en une fois une colonne ou une ligne entière par exemple.

scope a deux autres valeurs possibles — colgroup et rowgroup. Ils sont utilisés pour les en-têtes qui couvrent plusieurs colonnes ou lignes. Si vous retournez voir le tableau "Items sold..." au début de cette section de l'article, vous verrez que la cellule "Clothes" se trouve au-dessus des cellules  "Trousers", "Skirts", et "Dresses". Toutes ces cellules sont marquées comme en-têtes (<th>), mais "Clothes" est un en-tête de niveau supérieur défini par les trois "sous-en-têtes". "Clothes" devrait donc comporter un attribut  scope="colgroup", et les autres doivent recevoir un attribut scope="col".

Les attributs id et headers

Une alternative à l'usage de l'attribut scope est l'utilisation des attributs id et headers pour créer une association entre en-têtes et cellules. La façon dont ils sont utilisés est la suivante :

  1. Vous ajoutez un identifiant unique id pour chaque élément <th>.
  2. Vous ajoutez un attribut d'en-tête headers dans chaque élément  <td> . Chaque attribut headers doit contenir une liste des id de tous les éléments <th> qu'il contient, séparés par des espaces.

Cela donne à votre tableau HTML explicitement la position de chaque cellule dans le tableau, définie par les header(s) de chaque colonne et chaque ligne qui en font partie, un peu comme une feuille de calcul. Pour que cela fonctionne bien, le tableau a réellement besoin d'en-têtes de colonnes et de lignes.

En revenant à notre exemple de tableau des dépenses et des coûts, les deux extraits précédents pourraient être réécrits comme ceci :

<thead>
  <tr>
    <th id="purchase">Purchase</th>
    <th id="location">Location</th>
    <th id="date">Date</th>
    <th id="evaluation">Evaluation</th>
    <th id="cost">Cost (€)</th>
  </tr>
</thead>
<tbody>
<tr>
  <th id="haircut">Haircut</th>
  <td headers="location haircut">Hairdresser</td>
  <td headers="date haircut">12/09</td>
  <td headers="evaluation haircut">Great idea</td>
  <td headers="cost haircut">30</td>
</tr>

  ...

</tbody>

Note: Cette méthode crée des associations très précises entre en-têtes et données mais elle utilise beaucoup plus de balisage et ne laisse aucune marge d'erreur.  L'approche scope est généralement suffisante pour la plupart des tableaux.

Apprentissage : jouer avec scope et headers

  1. Pour cet exercice final, nous aimerions que vous fassiez une copie locale de items-sold.html et minimal-table.css, dans un nouveau répertoire.
  2. Maintenant essayez d'ajouter un attribut scope approprié pour améliorer ce tableau.
  3. Enfin, essayez avec une autre copie du fichier initial, de faire un tableau plus accessible en utilisant les attributs id et headers.

Note: Vous pouvez contrôler votre travail en le comparant à nos exemples finis  — voir items-sold-scope.html (voir aussi en réel) et items-sold-headers.html (voir en réel également).

Résumé

Il y a quelques autres choses que vous pourriez apprendre sur les tableaux HTML, mais nous vous avons donné tout ce que vous avez besoin de savoir pour le moment. À ce stade, vous voulez peut-être en apprendre plus sur les styles de tableaux HTML — voir Styling Tables.

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : loella16, tonybengue
 Dernière mise à jour par : loella16,