Dans le second article de ce module, nous examinerons quelques dispositions avancées des tableaux HTML — comme intitulés ou résumés, groupement des rangées dans l'en-tête, le corps ou le pied de page du tableau — ainsi que l'accessibilité des tableaux aux utilisateurs malvoyants.
| Prérequis : | Les bases de HTML (voir Introduction au HTML). |
|---|---|
| Objectif : | En apprendre plus sur les fonctionnalités HTML plus avancées et l'accessibilité aux tableaux. |
Vous pouvez intituler un tableau en mettant son titre dans un élément {{htmlelement("caption")}} et en englobant le tout dans un élément {{htmlelement("table")}}. Mettez le titre juste après la balise ouvrante <table>.
<table> <caption>Dinosaures dans le Jurassique</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 malvoyants. Plutôt que de faire lire au lecteur d'écran de nombreuses cellules pour savoir sur quoi porte le tableau, il ou elle peut se fier au titre, puis décider de lire ou non le tableau dans le détail.
Le titre est placé directement sous la balise <table>.
Note : L'attribut {{htmlattrxref("summary","table")}} peut aussi être utilisé dans un élément <table> pour fournir une description — il sera lu également par les lecteurs d'écran. Toutefois, nous nous devons de recommander plutôt l'utilisation de l'élément <caption>, car summary est considéré comme {{glossary("deprecated", "obsolète")}} par la norme HTLM5, et ne peut être lu par l'utilisateur courant (il n'apparaît pas dans la page).
Essayons en revisitant un exemple rencontré dans l'article précédent.
Note: Vous pouvez trouver notre version sur GitHub — voir timetable-caption.html (voir aussi directement).
Comme vos tableaux deviennent un peu plus structurellement complexes, il est utile d'en améliorer la définition. Une façon claire d'y parvenir consiste à utiliser les éléments {{htmlelement("thead")}}, {{htmlelement("tfoot")}} et {{htmlelement("tbody")}}, qui vous 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 des 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 :
<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 {{htmlelement("col")}}/{{htmlelement("colgroup")}}, l'en-tête du tableau devrait venir juste en-dessous de ceux-ci.<tfoot> doit envelopper la partie du tableau qui est le pied de page — ce peut être une dernière ligne contenant, par exemple, la somme des rangées précédentes. Vous pouvez inclure l'élément <tfoot> à la suite du code contenant le corps du tableau, là où vous souhaitez le trouver, ou juste en-dessous de l'élément <thead> (le navigateur l'affichera toujours en pied de tableau).<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 ci‑dessus).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 tableau ne contenant pas l'élément <tbody> et regardez le code HTML dans les outils de développement de votre navigateur — vous verrez que le 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.
Mettons en œuvre ces nouveaux éléments.
<thead> , la ligne des totaux ("SUM") dans un <tfoot>, et le reste du contenu dans un <tbody>.<tfoot> a renvoyé la ligne "SUM" en bas du tableau.tbody {
font-size: 90%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
<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 les CSS maintenant. Vous en apprendrez plus avec les modules à propos des CSS (Introduction aux CSS est un bon moyen de commencer ; il y a aussi un article spécifique sur l'esthétique des tables).
Le code de votre tableau fini devrait ressembler à quelque chose comme :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Enregistrer mes dépenses</title>
<style>
html {
font-family: sans-serif;
}
table {
border-collapse: collapse;
border: 2px solid rgb(200,200,200);
letter-spacing: 1px;
font-size: 0.8rem;
}
td, th {
border: 1px solid rgb(190,190,190);
padding: 10px 20px;
}
th {
background-color: rgb(235,235,235);
}
td {
text-align: center;
}
tr:nth-child(even) td {
background-color: rgb(250,250,250);
}
tr:nth-child(odd) td {
background-color: rgb(245,245,245);
}
caption {
padding: 10px;
}
tbody {
font-size: 90%;
font-style: italic;
}
tfoot {
font-weight: bold;
}
</style>
</head>
<body>
<table>
<caption>Comment j'ai choisi de dépenser mon argent</caption>
<thead>
<tr>
<th>Achats</th>
<th>Où ?</th>
<th>Date</th>
<th>Avis</th>
<th>Coût (€)</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">SUM</td>
<td>118</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Coupe de cheveux</td>
<td>Coiffeur</td>
<td>12/09</td>
<td>Bonne idée</td>
<td>30</td>
</tr>
<tr>
<td>Lasagnes</td>
<td>Restaurant</td>
<td>12/09</td>
<td>Regrets</td>
<td>18</td>
</tr>
<tr>
<td>Souliers</td>
<td>Chaussures</td>
<td>13/09</td>
<td>Gros regrets</td>
<td>65</td>
</tr>
<tr>
<td>Dentifrice</td>
<td>Supermarché</td>
<td>13/09</td>
<td>Bien</td>
<td>5</td>
</tr>
</tbody>
</table>
</body>
</html>
{{ EmbedLiveSample('Hidden_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}
Note : Vous pouvez aussi le trouver sur Github spending-record-finished.html (voir aussi le résultat directement).
Il est possible d'inclure un tableau dans un autre, à condition d'en spécifier la structure complète, y compris l'élément <table>. Ce n'est généralement pas vraiment conseillé, car cette opération rend le balisage plus confus et moins accessible pour les utilisateurs de lecteurs d'écran, alors que dans de nombreux cas, il suffit d'insérer des cellules/lignes/colonnes supplémentaires dans un tableau existant. Mais il est parfois nécessaire de le faire, 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>
Voici la sortie qui en résulte :
| title1 | title2 | title3 | |||
|---|---|---|---|---|---|
|
cell2 | cell3 | |||
| cell4 | cell5 | cell6 |
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 à Gand 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.
| Vêtements | Accessoires | |||||
|---|---|---|---|---|---|---|
| Pantalons | Jupes | Robes | Bracelets | Bagues | ||
| Belgique | Anvers | 56 | 22 | 43 | 72 | 23 |
| Gand | 46 | 18 | 50 | 61 | 15 | |
| Bruxelles | 51 | 27 | 38 | 69 | 28 | |
| Pays-bas | 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 remplacer des associations visuelles par des associations programmées.
Note : Il y a environ 253 millions de personnes vivant avec des déficiences visuelles selon les données de l'OMS en 2017.
Cette partie de l'article indique des techniques avancées pour rendre les tableaux les plus accessibles possible.
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> .
scopeAux balises <th>, sujet de l'article précédent, ajoutons l'attribut {{htmlattrxref("scope","th")}}. Il peut être mentionné dans un élément <th> pour indiquer précisément à un lecteur d'écran si la cellule contient un en-tête de colonne ou de ligne — par exemple, sommes‑nous dans un en-tête de ligne, ou de colonne ? En revenant à notre exemple d'enregistrement de dépenses vu plus tôt, il est possible de définir sans ambiguité un en-tête de colonne comme étant un en-tête de colonne ainsi :
<thead>
<tr>
<th scope="col">Achats</th>
<th scope="col">Ou ?</th>
<th scope="col">Date</th>
<th scope="col">Avis</th>
<th scope="col">Coût (€)</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">Coupe de cheveux</th> <td>Coiffeur</td> <td>12/09</td> <td>Bonne idée</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. Elles sont utilisées pour les en-têtes qui couvrent plusieurs colonnes ou lignes. Si vous revenez au tableau « Articles vendus... » au début de ce paragraphe du présent article, vous voyez que la cellule « Vêtements » se trouve au-dessus des cellules « Pantalons », « Jupes » et « Robes ». Toutes ces cellules sont marquées comme en-têtes (<th>), mais « Vêtements » est un en-tête de niveau supérieur qui définit trois « sous-en-têtes ». « Vêtements » comportera donc un attribut scope="colgroup", alors que les autres doivent recevront un attribut scope="col".
id et headersUne alternative à l'usage de l'attribut scope est l'utilisation des attributs {{htmlattrxref("id")}} et {{htmlattrxref("headers", "td")}} pour créer une association entre en-têtes et cellules. Ils sont utilisés de la manière suivante :
id à chaque élément <th>.headers à 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.Votre tableau HTML possède donc la position explicite de chaque cellule dans le tableau, définie par les en-têtes de chaque colonne et chaque ligne qui en font partie, un peu comme dans une feuille de calcul. Pour un bon fonctionnement, 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 ainsi :
<thead>
<tr>
<th id="purchase">Achats</th>
<th id="location">Où ?</th>
<th id="date">Date</th>
<th id="evaluation">Avis</th>
<th id="cost">Coût (€)</th>
</tr>
</thead>
<tbody>
<tr>
<th id="haircut">Coupe de cheveux</th>
<td headers="location haircut">Coiffeur</td>
<td headers="date haircut">12/09</td>
<td headers="evaluation haircut">Bonne idée</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.
scope et headersscope approprié pour améliorer ce tableau.id et headers.Note : Vous pouvez contrôler votre travail en le comparant à nos exemples finis — voir items-sold-scope.html (voir aussi directement)
et items-sold-headers.html (voir aussi directement).
Il reste encore quelques autres choses à apprendre sur les tableaux HTML, mais nous vous avons vraiment indiqué tout ce qu'il est nécessaire de savoir pour le moment. À ce stade, vous voulez peut-être en apprendre plus sur les styles de tableaux HTML — voyez alors Décor des tableaux.