Les tableaux HTML sont utilisés pour afficher des données tabulaires avec des lignes et des colonnes. La décision d'utiliser un <table> doit être basée sur le contenu que vous présentez et sur les besoins de vos utilisateurs par rapport à ce contenu. Si des données sont présentées, comparées, triées, calculées ou croisées, <table> est probablement le bon choix. Si vous souhaitez simplement disposer de manière soignée le contenu non tabulaire, comme un grand groupe de vignettes, les tableaux ne sont pas appropriés. À la place, il est préférable de créer une liste d'images et de styliser la grille avec CSS.
Dans cette section, nous allons discuter de tous les éléments qui composent le tableau, ainsi que de certaines fonctionnalités d'accessibilité et d'usabilité à prendre en compte lorsque vous présentez des données tabulaires. Bien que Learn HTML ne repose pas fondamentalement sur le CSS et qu'un cours complet soit consacré à l'apprentissage du CSS, nous aborderons certaines propriétés CSS spécifiques aux tables.
Éléments du tableau, dans l'ordre
La balise <table> encapsule le contenu du tableau, y compris tous ses éléments.
Le rôle ARIA implicite d'un <table> est table. Les technologies d'assistance savent que cet élément est une structure de table contenant des données organisées en lignes et en colonnes. Si le tableau conserve un état de sélection, propose une navigation bidimensionnelle ou permet à l'utilisateur de réorganiser l'ordre des cellules, définissez role="grid".
Si les lignes de grid peuvent être développées et réduites, utilisez plutôt role="treegrid".
Dans <table>, vous trouverez les en-têtes de tableau (<thead>), les corps de tableau (<tbody>) et, éventuellement, les pieds de page (<tfoot>).
Chacun de ces éléments est composé de lignes du tableau (<tr>). Les lignes contiennent des en-têtes de tableau (<th>) et des cellules de données (<td>) qui, à leur tour, contiennent toutes les données.
Dans le DOM, avant tout cela, vous pouvez trouver deux fonctionnalités supplémentaires: la légende de la table (<caption>) et les groupes de colonnes (<colgroup>). Selon que <colgroup> comporte ou non un attribut span, il peut contenir des éléments de colonne de tableau (<col>) imbriqués.
Les enfants de la table sont, dans l'ordre:
- Élément
<caption> - Éléments
<colgroup> - Éléments
<thead> - Éléments
<tbody> - Éléments
<tfoot>
Nous allons aborder les enfants des éléments <table>, qui sont tous facultatifs, mais recommandés, puis nous examinerons les lignes, les cellules d'en-tête du tableau et les cellules de données du tableau. Le <colgroup> sera couvert en dernier.
Légende du tableau
En tant qu'élément sémantique natif, <caption> est la méthode privilégiée pour donner un nom à une table. <caption> fournit un titre de tableau descriptif associé à un programme. Par défaut, il est visible et disponible pour tous les utilisateurs.
L'élément <caption> doit être le premier élément imbriqué dans l'élément <table>. L'inclure permet à tous les utilisateurs de connaître immédiatement l'objectif de la table, sans avoir à lire le texte qui l'entoure. Vous pouvez également utiliser aria-label ou aria-labelledby sur <table> pour fournir un nom accessible en tant que légende. L'élément <caption> ne comporte aucun attribut spécifique à l'élément.
La légende apparaît en dehors du tableau. L'emplacement de la légende peut être défini à l'aide de la propriété CSS caption-side, ce qui est une bonne pratique que d'utiliser l'attribut obsolète align. Cela permet de placer la légende en haut et en bas. Les positionnements à gauche et à droite, avec inline-start et inline-end, ne sont pas encore entièrement pris en charge. La partie supérieure correspond à la présentation par défaut du navigateur.
De préférence, les tableaux de données doivent avoir des en-têtes clairs et une légende, et être suffisamment simples pour être presque explicites. Gardez à l'esprit que tous les utilisateurs n'ont pas les mêmes capacités cognitives. Lorsque le tableau "fait un point" ou qu'il a besoin d'une interprétation, fournissez un bref résumé du point principal ou de la fonction du tableau. L'emplacement de ce résumé dépend de sa longueur et de sa complexité.
S'il est bref, utilisez-le comme texte intérieur de la légende. S'il est plus long, résumez-le dans la légende et fournissez le résumé dans le paragraphe précédent le tableau, en associant les deux à l'attribut aria-describedby. Une autre option consiste à placer la table dans un <figure> et à placer le résumé dans <figcaption>.
Section de données
Le contenu des tableaux peut comprendre jusqu'à trois sections: zéro ou plusieurs en-têtes de tableau (<thead>), corps de tableau (<tbody>) et pieds de page de tableau (<tfoot>). Toutes ces sections sont facultatives. Aucun ou plusieurs ne sont acceptés.
Ces éléments n'aident pas et ne gênent pas l'accessibilité du tableau, mais ils sont utiles en termes de convivialité. Ils fournissent des hooks de style. Par exemple, le contenu de l'en-tête peut être persistant, tandis que le contenu de <tbody> peut être fait défiler. Les lignes qui ne sont pas imbriquées dans l'un de ces trois éléments contenant des éléments sont implicitement encapsulées dans un élément <tbody>. Tous les trois partagent le même rôle implicite (rowgroup).
Aucun de ces trois éléments ne comporte d'attribut spécifique à un élément.
Voici ce que nous avons à ce jour:
<table>
<caption>MLW Students</caption>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
L'élément <tfoot> a été initialement spécifié pour se placer juste après <thead> et avant <tbody> pour des raisons d'accessibilité. C'est pourquoi vous pouvez rencontrer cet ordre de source non intuitif dans les anciens codebases.
Contenu de la table
Les tableaux peuvent être divisés en en-têtes, corps et pieds de page, mais n'ont aucun effet si les tableaux ne contiennent pas de lignes, de cellules ni de contenu. Chaque ligne du tableau "<tr>" contient une ou plusieurs cellules. Si une cellule est une cellule d'en-tête, utilisez <th>.
Sinon, utilisez <td>.
Les feuilles de style user-agent affichent généralement le contenu d'une cellule d'en-tête de tableau <th> en gras et au centre. Il est préférable de contrôler ces styles par défaut, ainsi que tous les styles, avec CSS plutôt qu'avec les attributs obsolètes qui étaient auparavant disponibles pour les cellules, les lignes et même le <table>.
Il y avait des attributs pour ajouter une marge intérieure entre les cellules et dans les cellules, pour les bordures et pour l'alignement du texte. La marge intérieure et l'espacement des cellules, qui définissent l'espace entre le contenu d'une cellule et sa bordure, ainsi qu'entre les bordures des cellules adjacentes, doivent être définis respectivement par les propriétés CSS border-collapse et border-spacing. Border-spacing n'aura aucun effet si border-collapse: collapse est défini. Si border-collapse: separate; est défini, il est possible de masquer complètement les cellules vides avec empty-cells: hide;. Pour en savoir plus sur l'application d'un style aux tableaux, voici une présentation interactive de styles CSS liés aux tables.
Dans les exemples, nous avons ajouté une bordure au tableau et du code CSS pour chaque cellule afin de rendre certaines caractéristiques plus visibles:
Dans cet exemple, nous avons une légende, un en-tête de tableau et un corps de tableau. L'en-tête comporte une ligne contenant trois cellules <th> d'en-tête, créant ainsi trois colonnes. Le corps contient trois lignes de données: la première cellule est une cellule d'en-tête pour la ligne. Nous utilisons donc <th> au lieu de <td>.
La cellule <th> a une signification sémantique, avec des rôles ARIA implicites d'en-tête de colonne ou d'en-tête de ligne. Il définit la cellule comme en-tête de la colonne ou de la ligne de cellules du tableau, en fonction de la valeur de l'attribut scope énuméré. Le navigateur utilisera col ou row par défaut si scope n'est pas explicitement défini.
Comme nous avons utilisé le balisage sémantique, la cellule 1956 comporte deux en-têtes: Year (année) et Lou Minious (Lou Minious). Cette association nous indique que "1956" est l'"année" d'obtention du diplôme pour "Lou Minious". Dans cet exemple, comme nous pouvons voir le tableau entier, l'association est visuellement évidente.
L'utilisation de <th> permet de réaliser l'association même lorsque la colonne ou la ligne d'en-tête n'est plus visible à l'écran. Nous aurions pu définir explicitement <th scope="col">Year</th> et <th scope="row">Lou Minious</th>, mais avec une table simple comme celle-ci, les valeurs par défaut énumérées fonctionnent.
Les autres valeurs de scope incluent rowgroup et colgroup, qui s'avèrent utiles avec les tables complexes.
Fusion des cellules
Comme dans MS Excel, Google Sheets et Numbers, il est possible de joindre plusieurs cellules dans une seule cellule. Pour ce faire, vous devez utiliser le langage HTML.
L'attribut colspan permet de fusionner deux cellules adjacentes ou plus dans une même ligne. L'attribut rowspan permet de fusionner des cellules sur plusieurs lignes et de les placer sur la cellule dans la ligne supérieure.
Dans cet exemple, l'en-tête du tableau contient deux lignes. La première ligne d'en-tête contient trois cellules couvrant quatre colonnes: la cellule du milieu contient colspan="2". Cela fusionne deux cellules adjacentes. La première et la dernière cellules incluent rowspan="2". La cellule est alors fusionnée avec celle de la ligne adjacente, juste en dessous.
La deuxième ligne de l'en-tête du tableau contient deux cellules ; il s'agit des cellules des deuxième et troisième colonnes de la deuxième ligne. Aucune cellule n'est déclarée pour la première ou la dernière colonne, car la cellule des première et dernière colonnes de la première ligne s'étend sur deux lignes.
Si une cellule est définie par plusieurs cellules d'en-tête avec des associations qui ne peuvent pas être définies uniquement par les attributs scope, incluez l'attribut headers avec une liste des en-têtes associés séparés par un espace. Comme cet exemple est un tableau plus complexe, nous définissons explicitement la portée des en-têtes avec l'attribut scope. Pour être encore plus clair, nous avons ajouté l'attribut headers à chaque cellule.
Les attributs headers n'étaient peut-être pas nécessaires pour un cas d'utilisation aussi simple, mais ils sont importants dans votre barre d'outils à mesure que vos tables deviennent plus complexes. Les tableaux présentant des structures complexes, tels que les tableaux dans lesquels des en-têtes ou des cellules sont fusionnés, ou comportant plus de deux niveaux d'en-têtes de colonne ou de ligne, nécessitent une identification explicite des cellules d'en-tête associées. Dans ces tableaux complexes, associez explicitement chaque cellule de données à chaque cellule d'en-tête correspondante avec une liste de valeurs id séparées par des espaces de tous les en-têtes associés en tant que valeur de l'attribut headers.
L'attribut headers se trouve plus souvent dans les éléments <td>, mais il est également valide sur <th>.
Cela dit, les structures de tableau complexes peuvent être difficiles à comprendre pour tous les utilisateurs, pas seulement les utilisateurs de lecteurs d'écran. Sur le plan cognitif et en termes de compatibilité avec les lecteurs d'écran, les tableaux simples, avec peu ou pas de cellules scindées, même sans champ d'application et en-têtes, sont plus faciles à comprendre. Ils sont aussi plus faciles à gérer.
Appliquer un style à des tableaux
Deux éléments relativement obscurs ont été brièvement mentionnés: le groupe de colonnes, <colgroup>, l'élément et son seul descendant, l'élément de colonne vide <col>. L'élément <colgroup> permet de définir des groupes de colonnes, ou éléments <col>, dans une table.
S'il est utilisé, le regroupement de colonnes doit être imbriqué dans <table>, immédiatement après <caption> et avant toute donnée de la table.
Si elles s'étendent sur plusieurs colonnes, utilisez l'attribut span.
L'ordre des contours du contenu d'une table est généralement le suivant, <table> et <caption> étant les deux éléments à inclure:
<table>
<caption>Table Caption</caption>
<colgroup>
<col/>
</colgroup>
<thead>...
Ni <colgroup>, ni <col> n'ont de sens sémantique en vue de rendre la table plus accessible, mais ils permettent un style de colonne limité, y compris la définition d'une largeur pour la colonne avec CSS.
Les styles <col> appliquent un style à une colonne tant qu'aucun style <td> ou <th> ne le remplace. Par exemple, lorsque <colspan> est utilisé pour fusionner des cellules dans certaines lignes d'un tableau, mais pas toutes, vous ne pouvez pas être sûr qu'un sélecteur tel que tr > *:nth-child(8), qui sélectionne le huitième enfant de chaque ligne, mette en surbrillance la 8e colonne en entier ou la 8e colonne pour plusieurs lignes, mais avec quelques cellules des 9e et 10e colonnes, selon les cellules de ligne ou de colonne fusionnées.
Malheureusement, seules quelques propriétés sont acceptées, les styles ne sont pas hérités dans les cellules et la seule façon d'utiliser l'élément <col> dans les cellules de ciblage consiste à utiliser un sélecteur complexe comprenant le sélecteur relationnel :has().
Si <table> et <colgroup> ont tous les deux une couleur d'arrière-plan, le background-color de <colgroup> sera en haut.
L'ordre du dessin est le suivant: tableau, groupes de colonnes, colonnes, groupes de lignes, lignes, avec les cellules en dernier et en haut, comme indiqué dans le schéma des calques de table. Les éléments <td> et <th> ne sont pas des descendants des éléments <colgroup> ou <col> et n'héritent pas de leur style.
Les sélecteurs de structure CSS s'avèrent très pratiques pour effectuer une répartition dans un tableau. Par exemple, tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);} ajoute un noir translucide à chaque ligne impaire du corps de la table, ce qui laisse apparaître tous les effets d'arrière-plan définis sur <colgroup>.
Par défaut, les tables ne sont pas responsives. Ils sont dimensionnés par défaut en fonction de leur contenu. Des mesures supplémentaires sont nécessaires pour que le style de mise en page du tableau fonctionne efficacement sur divers appareils. Si vous modifiez la propriété d'affichage CSS des éléments d'une table, incluez des attributs ARIA role. Bien que cela puisse sembler redondant, la propriété CSS display peut affecter l'arborescence d'accessibilité dans certains navigateurs.
Présenter des données
Les éléments du tableau ont des significations sémantiques qui sont utilisées par les technologies d'assistance pour permettre de naviguer dans les lignes et les colonnes sans être "perdus". L'élément <table> ne doit pas être utilisé pour la présentation. Si vous avez besoin d'un en-tête sur une liste, utilisez un en-tête et une liste. Si vous souhaitez disposer le contenu dans plusieurs colonnes, utilisez la mise en page sur plusieurs colonnes.
Si vous souhaitez disposer le contenu sous forme de grille, utilisez Grille CSS. Utilisez uniquement un tableau pour les données. Envisagez les choses de cette façon: si vos données nécessitent une feuille de calcul pour être présentées lors d'une réunion, utilisez <table>.
Si vous souhaitez utiliser les fonctionnalités disponibles dans les logiciels de présentation tels que Keynote ou PowerPoint, vous avez probablement besoin d'une liste de descriptions.
Alors que le tri des colonnes d'un tableau est l'approche de JavaScript, le balisage de vos en-têtes pour indiquer aux utilisateurs que la colonne peut être triée est l'objectif du langage HTML.
Informez vos utilisateurs que les colonnes du tableau peuvent être triées avec l’iconographie montrant l’ordre croissant, décroissant ou non trié. La colonne actuellement triée doit inclure l'attribut aria-sort avec la valeur énumérée de l'ordre de tri.
<caption> peut annoncer poliment des mises à jour de l'ordre de tri via aria-live et un délai mis à jour de manière dynamique et visible par les utilisateurs de lecteurs d'écran. Comme vous pouvez trier la colonne en cliquant sur le contenu de l'en-tête, celui-ci doit correspondre à une <button>.
Si vous ne présentez pas de données tabulaires, n'utilisez pas de <table>. Si vous utilisez un tableau pour la présentation, définissez role="none".
De nombreux développeurs utilisent des tableaux pour mettre en page des formulaires, mais ce n'est pas nécessaire. Mais vous devez connaître les formulaires HTML, nous en parlerons plus tard.
Testez vos connaissances
Testez vos connaissances sur les tableaux.
Quel élément est utilisé pour baliser les cellules qui sont des en-têtes ?
<header><caption><th>Quelles informations sont susceptibles de convenir à une mise en page avec un tableau ?
<dl>.<ul>.