Inroduction :
Lorsque nous devons afficher des données, il est souvent utile d'employer un tableau, ensemble d'éléments classés dans des lignes (rows en anglais) et des colonnes (columns).
Un tableau se définit donc en spécifiant le nombre de lignes et le nombre de colonnes.
Dans ce chapitre, nous allons aborder les tableaux en HTML. Nous verront d'abord les balises spécifiques aux tables et les attributs d'un tableau. Nous découvrirons également comment décorer un tableau grâce aux feuilles de style.
Grâce à la fusion de cellules, il est possible d'obtenir une mise en forme plus complexe.
Les tableaux en HTML :
En HTML, l'implémentation d'un tableau permet de spécifier différentes parties, comme nous le montre l'exemple suivant.
| En-tête de colonne | Une colonne | Une autre colonne | |
|---|---|---|---|
| En-tête de ligne | Une cellule dans la ligne | Une autre cellule | X |
| Une autre ligne | Y | Z |
Le titre du tableau décrit l'objet du tableau, il se place au-dessus du tableau, mais il peut aussi être placé en légende, en bas ou sur un des côtés.
Les différents éléments sont définis par ligne, les uns à la suite des autres.
Les cellules d'un tableau sont les cases individuelles qui apparaissent dans le tableau et qui contiennent les données à afficher.
Les en-têtes sont des cellules spéciales qui contiennent la description de la colonne ou de la ligne, elles se placent en début de ligne ou en début de colonne.
Les données sont les valeurs présentes dans les cellules du tableau.
Découvrons ensemble les balises qui permetent de dessiner un tableau dans une page web.
Remarque : les tableaux ne devraient pas être utilisés pour faire de la mise en forme puisqu'elle devrait être faite en CSS. Néanmoins, si pour d'obscures raisons vous les utilisez à cette fin, il faut désactiver leur rôle de tableau. Pour cela, il faut ajouter l'attribut role="presentation" sur la balise <table>. Dans ce cas de figure, n'utilisez pas de balises ou d'attributs propres aux tableaux de données (<th>, <caption>, <thead>, <tfoot>, scope, header, colgroup et axis). Et veillez à ce que le contenu soit compréhensible avec une lecture ligne par ligne.
Les balises spécifiques aux tables :
Un tableau est un élément assez complexe à restituer avec un lecteur d'écran. Il est donc nécessaire de bien le construire pour le rendre le plus accessible possible.
-
Le tableau est déterminé par les balises <table>...</table>, tous les éléments constituant le tableau doivent se trouver entre ces 2 balises.
-
Le tableau est donné ligne par ligne, une ligne est indiquée par les balises <tr>...</tr>
-
À l'intérieur d'une ligne chaque cellule est délimitée par les balises <td>...</td>. Il est préférable de donner le même nombre d'éléments dans chaque ligne pour obtenir un tableau bien structuré.
Une cellule peut contenir n'importe quel type de données, du texte, du code HTML (par exemple : une autre table), des liens, des images,... et même rien du tout pour indiquer une cellule vide.
-
Les cases d'en-tête sont délimitées par les balises <th>...</th>. Ces en-têtes sont facultatives, elles peuvent être placées soit en début de ligne, soit en début de colonne, ou même en début de ligne et de colonne. Le deuxième élément à soigner est les en-têtes de ligne et de colonne : ils doivent être bien définis avec des balises <th> accompagnées d'un attribut scope ayant pour valeur col pour un en-tête de colonne ou row pour un en-tête de ligne.
Exemple :
<table> <caption>Le poids des fichiers en fonction de leur taille et de leur format</caption> <tr> <td></td> <th scope="col">1200x1600</th> <th scope="col">600x900</th> <th scope="col">300x400</th> </tr> <tr> <th scope="row">JPEG</th> <td>872 ko</td> <td>271 ko</td> <td>88 ko</td> </tr> <tr> <th scope="row">WebP</th> <td>479 ko</td> <td>158 ko</td> <td>55 ko</td> </tr> <tr> <th scope="row">AVIF</th> <td>218 ko</td> <td>84 ko</td> <td>33 ko</td> </tr> </table>Grâce à l'attribut scope, lorsque l'internaute utilisant un lecteur d'écran se déplace dans le tableau de cellule en cellule, l'en-tête de colonne est lu à nouveau lors du changement de colonne, l'en-tête de ligne est lu à nouveau lors du changement de ligne.
-
Le titre du tableau (ou la légende) est donné par les balises <caption>...</caption>.
-
Les balises <thead>, <tbody> et <tfoot> sont de nouvelles balises qui ont pour but de structurer les données présentes dans l'élément table. La balise <thead> est ainsi censée regrouper les informations concernant l'en-tête du tableau comme le titre et le nom des colonnes par exemple. La balise <tbody> est destinée à contenir l'ensemble des données et la balise <tfooter> des remarques ou une légende.
Le véritable apport vient du fait que pour une table volumineuse un scroll va permettre de visualiser les données inclues dans la balise <tbody> alors queles données présentent dans thead et tfoot resteront toujours visibles. Cependant, aucun navigateur ne supporte encore cet effet.
Nous pouvons maintenant placer ces différents éléments dans le code ci-dessous, pour obtenir le tableau donné en introduction au début de la page.
<table>
<caption>Le tire de la table :</caption>
<thead>
<tr><!-- 1ère ligne, en-tête des colonnes -->
<th> </th>
<th>En-tête de colonne</th>
<th>Une colonne</th>
</tr>
</thead>
<tbody>
<tr><!-- 2ème ligne -->
<th>En-tête de ligne</th>
<td>Une cellule dans la ligne</td>
<td>Une autre cellule</td>
<td>X</td
</tr>
<tr><!-- 3ème ligne -->
<th>Une autre ligne</th>
<td><!-- Une cellule vide --></td>
<td>Y</td>
<td>Z</td>
</tr>
</tbody>
</table>Pour la lisibilité du code de la page, il est vivement conseiller d'user et d'abuser del'indentation (attention l'excès nuit en tout). Cette mise en page du code n'a pas d'influence sur le rendu de la page lors de l'affichage dans un navigateur.
Résumons les principales balises permettant la création de table en HTML :
| Balise | Signification | Usage |
|---|---|---|
| table | délimite la table | |
| caption | donne le titre | |
| tr | table row | délimite une ligne |
| td | table data | délimite une cellule de données |
| th | table header | done une cellule d'en-tête de ligne ou de colonne |
La déco avec les feuilles de style :
La mise en forme d'un tableau, même si elle peut être réalisée grâce aux attributs des balises HTML, bénéficie de la souplesse et de la puissance des feuilles de style (CSS). Une table, une cellule, est considérée comme une boîte au sens CSS et leurs attributs peuvent donc s'appliquer aux tableaux.
Voici quelques propriétés applicables aux tableaux.
La position de la légende peut être spécifiée par la propriété caption-side qui accepte les valeurs.
- top :
- légende en haut (valeur par défaut)
- bottom :
- légende en bas
- left :
- légende à gauche
- right :
- légende à droite
La fusion des bordures des cellules est possible grâce à l'attribut border-collapse qui prend les valeurs collapse ou separate.
La propriété border-spacing spécifie l'écartement entre les cellules (en px).
Voici trois exemples :
1er exemple (même écartement des cellules de 10px de tous les côtés) :
<!DOCTYPE html>
<html lang="fr">
<head>
<style type="text/css">
table.one {
border-collapse: separate;
border-spacing: 10px;
}
</style>
</head>
<body>
<table class="one">
<tbody>
<tr>
<td>Apha</td>
<td>Beta</td>
</tr>
<tr>
<td>Gamma</td>
<td>Delta</td>
</tr>
</tbody>
</table>
</body>
</html>Affichage :
| Alpha | Beta |
| Gamma | Delta |
2ème exemple (écartement différent en vertical 30px et en horizontal 10px) :
<!DOCTYPE html>
<html lang="fr">
<head>
<style type="text/css">
table.two {
border-collapse: separate;
border-spacing: 10px 30px;
}
</style>
</head>
<body>
<table class="two">
<tbody>
<tr>
<td>Rouge</td>
<td>Orange</td>
</tr>
<tr>
<td>Vert</td>
<td>Jaune</td>
</tr>
</tbody>
</table>
</body>
</html>Affichage :
| Rouge | Orange |
| Vert | Jaune |
3ème exemple (pas d'écartement border-collapse: collapse) :
<!DOCTYPE html>
<html lang="fr">
<head>
<style type="text/css">
table.three {
border-collapse: collapse;
}
</style
</head>
<body>
<table class="three">
<tbody>
<tr>
<td>Rouge</td>
<td>Orange</td>
</tr>
<tr>
<td>Vert</td>
<td>Jaune</td>
</tr>
</tbody>
</table>
</body>
</html>Affichage :
| Rouge | Orange |
| Vert | Jaune |
Les cellules peuvent s'apparenter au modèle de boîte que vous avez déjà rencontré lors de l'introduction des CSS. Mais la gestion des marques est cependant toute différente. Elle se réalise au niveau de la table (!!! il n'est pas possible de traiter séparément chaque cellule !!!).
La mise en forme plus complexe d'un tableau :
HTML permet de fusionner des cellules pour une organisation plus souple des données.
L'attribut rowspan (ou colspan) des balises <td> ou <th> permet de spécifier le nombre de lignes (ou colonnes) que l'on désire fusionner.
Les tableaux ayant des colonnes fusionnées (en utilisant les attributs rowspan ou colspan) sont plus complexes à rendre accessibles. La première question à se poser est celle de l'évitement. Ne serait-il ppas possible de présenter les informations séparément dans plusieurs tableaux plus simples ? Cela est préférable aussi bien pour les internautes utilisant un lecteur d'écran que pour les personnes ayant des troubles cognitifs.
Si cela n'est pas possible, il est nécessaire d'expliquer la structure du tableau. Cela peut être fait dans une balise <caption>. SI vous souhaitez que cette information ne soit présentée qu'aux personnes utilisant un lecteur d'écran, il est possible de la positionner en dehors de la zone visible. Attention à ne pas utiliser l'attribut hidden ou l'attribut display associé à la valeur none, elle ne serait alors pas restituée.
.lecteurDEcran {
position: absolute !important;
top: -1000px !important;
}Il est ensuite nécessaire d'associer à chaque cellule les en-têtes qui la concernent afin que ceux-ci soient restitués lors du déplacement dans les cellules du tableau. Pour cela, les balises d'en-tête doivent posséder un attribut id et les balises représentant les cellules d'un tableau doivent posséder la liste des valeurs de ces attributs id dans un attribut headers.
Syntaxe :
<td headers="idEntete1 idEntete2">Exemple pour le tableau suivant :
| couleur d'écriture | couleur de fond | contraste | ||
|---|---|---|---|---|
| nom | code | nom | code | |
| darkslategrey | #2f4f4f | white | #ffffff | 8,9:1 |
| dodgerblue | #1e90ff | black | #000000 | 6,5:1 |
| darkturquoise | #00ced1 | white | #ffffff | 2:1 |
<table>
<caption>
Exemples de couples de couleurs avec leur contraste
<span class="lecteurDEcran">Les couleurs d'écriture et de fond sont chacune présentées sur deux colonnes pour indiquer le nom de la couleur et l'autre pour indiquer son code hexadécimal. Enfin, la cinquième colonne indique le contraste entre ces deux couleurs.</span>
</caption>
<tr>
<th id="ce" colspan="2">couleur d'écriture</th>
<th id="cf" colspan="2">couleur de fond</th>
<th rowspan="2" scope="col">contraste</th>
</tr>
<tr>
<th id="cen">nom</th>
<th id="cec">code</th>
<th id="cfn">nom</th>
<th id="cfc">code</th>
</tr>
<tr>
<td headers="ce cen">darkslategrey</td>
<td headers="ce cec">#2f4f4f</td>
<td headers="cf cfn">white</td>
<td headers="cf cfc">#ffffff</td>
<td>8,9:1</td>
</tr>
<tr>
<td headers="ce cen">dodgerblue</td>
<td headers="ce cec">#1e90ff</td>
<td headers="cf cfn">black</td>
<td headers="cf cfc">#000000</td>
<td>6,5:1</td>
</tr>
<tr>
<td headers="ce cen">darkturquoise</td>
<td headers="ce cec">#00ced1</td>
<td headers="cf cfn">white</td>
<td headers="cf cfc">#ffffff</td>
<td>2:1</td>
</tr>
</table>Avec le code CSS :
caption {
font-weight: bold;
}
table {
border-collapse: collapse;
magin: 0.3em;
}
th, td {
border: 1px solid black;
padding: 0.3em;
}
.lecteurDEcran {
position: absolute;
top: -1000px;
}Ainsi, un utilisateur de NVDA qui se rend sur la cellule contenant "darklategrey" entend :
- Couleur d'écriture
- Nom
- Darklategrey
Et s'il se rend sur la cellule suivant, il entend :
- Couleur d'écriture
- Code
- #2f4f4f
Ce second exemple montre la fusion de 2 cellules dans une même ligne :
| Figure | dimension(s) | |
|---|---|---|
| rectangle | 6 | 4 |
| carré | 2 | |
En HTML :
<table>
<thead>
<tr>
<th>Figure</th>
<th colspan="2">dimension(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td>rectangle</td>
<td>6</td>
<td>4</td>
</tr>
<tr>
<td>carr</td>
<td colspan="2">2</td>
</tr>
</tbody>
</table>Cet autre exemple fusionne des cellules dans la même colonne :
| Rectangle | Carré | ||
|---|---|---|---|
| dimension(s) | Longueur | 10 | 6 |
| Largeur | 5 |
En HTML :
<table>
<thead>
<tr>
<th></th>
<th></th>
<th>Rectangle</th>
<th>Carré</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2">dimension</th>
<td>Longueur</td>
<td>10</td>
<td rowspan="2">6</td>
</tr>
<tr>
<td>Largeur</td>
<td>5</td>
</tr>
</tbody>
</table>L'impression :
L'impression des petits tableaux ne pose pas de problème, mais pour les tableaux de grande taille, cela peut être plus compliqué. Les impressions risquent d'être gâchées, les sorties étant inutilisables. Il est donc important de faire attention et éventuellement de répéter les en-têtes de colonne sur chaque page grâce à la balise <thead>.
Si les données du tableau sont nombreuses et débordent sur une ou plusieurs autres pages, les en-têtes de colonne sont répétés en début de chaque page.