Tables

Les tableaux HTML permettent d'afficher des données tabulaires avec des lignes et des colonnes. La décision d'utiliser une <table> doit être basée sur le contenu que vous présentez et les besoins de vos utilisateurs par rapport à ce contenu. Si les 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 mettre en page un contenu non tabulaire de manière soignée, comme un grand groupe d'images miniatures, les tableaux ne sont pas adaptés. À la place, créez une liste d'images et appliquez un style à la grille avec CSS.

Dans cette section, nous allons examiner tous les éléments qui composent le tableau, ainsi que certaines fonctionnalités d'accessibilité et d'usabilité à prendre en compte lorsque vous présentez des données tabulaires. Bien que le cours "Apprendre le HTML" ne concerne pas fondamentalement le CSS et qu'un cours entier soit dédié à l'apprentissage du CSS, nous allons aborder certaines propriétés CSS spécifiques aux tableaux.

Éléments du tableau, dans l'ordre

La balise <table> encapsule le contenu de la table, 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 tableau contenant des données organisées en lignes et en colonnes. Si le tableau conserve un état de sélection, dispose d'une navigation en deux dimensions 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 tableau (<tfoot>). Chacun d'eux est composé de lignes de tableau (<tr>). Les lignes contiennent des cellules d'en-tête de tableau (<th>) et de données de tableau (<td>), qui contiennent à leur tour toutes les données. Dans le DOM, avant tout cela, vous pouvez trouver deux fonctionnalités supplémentaires: le libellé du tableau (<caption>) et les groupes de colonnes (<colgroup>). Selon que <colgroup> possède ou non un attribut span, il peut contenir des éléments de colonne de tableau imbriqués (<col>).

Les enfants de la table sont, dans l'ordre:

1. Élément <caption>
2. Éléments <colgroup>
3. Éléments <thead>
4. Éléments <tbody>
5. Éléments <tfoot>

Nous allons examiner les enfants des éléments <table>, qui sont tous facultatifs, mais recommandés, puis nous intéresserons aux lignes, aux cellules d'en-tête de tableau et aux cellules de données de tableau. Le <colgroup> sera abordé en dernier.

Légende du tableau

Étant un élément natif et sémantique, <caption> est la méthode privilégiée pour nommer une table. <caption> fournit un titre de table descriptif associé par programmation. Elle est visible et disponible pour tous les utilisateurs par défaut.

L'élément <caption> doit être le premier élément imbriqué dans l'élément <table>. Son inclusion permet à tous les utilisateurs de connaître immédiatement l'objectif du tableau sans avoir à lire le texte environnant. Vous pouvez également utiliser aria-label ou aria-labelledby sur <table> pour fournir un nom accessible comme légende. L'élément <caption> ne comporte aucun attribut spécifique.

La légende s'affiche en dehors du tableau. L'emplacement du sous-titre peut être défini à l'aide de la propriété CSS caption-side, ce qui est préférable à l'utilisation de l'attribut align obsolète. Vous pouvez ainsi placer la légende en haut et en bas. Le positionnement à gauche et à droite, avec inline-start et inline-end, n'est pas encore entièrement pris en charge. "Haut" est la présentation par défaut du navigateur.

De préférence, les tableaux de données doivent comporter des en-têtes et un titre clairs, et être suffisamment simples pour être presque explicites. N'oubliez pas que tous les utilisateurs n'ont pas les mêmes capacités cognitives. Lorsque le tableau "fait valoir un point" ou nécessite une interprétation, fournissez un bref résumé de l'objectif ou de la fonction principale du tableau. L'emplacement de ce résumé dépend de sa longueur et de sa complexité. Si elle est brève, utilisez-la comme texte interne de la légende. Si le titre est plus long, résumez-le dans la légende et fournissez le résumé dans le paragraphe précédant le tableau, en associant les deux à l'attribut aria-describedby. Une autre option consiste à placer le tableau dans un <figure> et le résumé dans le <figcaption>.

Sectionnement des données

Le contenu des tableaux se compose de trois sections maximum: zéro ou plusieurs en-têtes de tableau (<thead>), corps de tableau (<tbody>) et pieds de tableau (<tfoot>). Tous sont facultatifs, et vous pouvez en utiliser autant que vous le souhaitez.

Ces éléments n'améliorent ni n'entravent l'accessibilité du tableau, mais ils sont utiles en termes d'usabilité. Ils fournissent des crochets de style. Par exemple, vous pouvez rendre le contenu de l'en-tête persistant, tandis que le contenu de <tbody> peut être mis en page. Les lignes qui ne sont pas imbriquées dans l'un de ces trois éléments contenants sont implicitement encapsulées dans un <tbody>. Tous les trois partagent le même rôle implicite rowgroup. Aucun de ces trois éléments ne comporte d'attributs spécifiques.

Voici ce que nous avons jusqu'à présent:

<table>
  <caption>MLW Students</caption>
  <thead></thead>
  <tbody></tbody>
  <tfoot></tfoot>
</table>

L'élément <tfoot> était initialement spécifié pour se trouver 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 du tableau

Les tableaux peuvent être divisés en en-têtes, corps et pieds de page, mais aucun de ces éléments n'a vraiment d'utilité si les tableaux ne contiennent pas de lignes, de cellules et de contenu. Chaque ligne de la table, <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 de l'User-Agent affichent généralement le contenu dans une cellule d'en-tête de tableau <th> en mode centré et en gras. Ces styles par défaut, ainsi que tous les styles, sont mieux contrôlés avec CSS plutôt qu'avec les attributs obsolètes qui étaient auparavant disponibles sur des cellules, des lignes et même des <table> individuelles.

Il existait des attributs pour ajouter une marge intérieure entre les cellules et dans les cellules, pour les bordures et pour l'alignement du texte. Les propriétés Cellpadding et cellspacing, qui définissent l'espace entre le contenu d'une cellule et sa bordure, et entre les bordures des cellules adjacentes, doivent être définies avec les propriétés CSS border-collapse et border-spacing, respectivement. Border-spacing n'a 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 le style des tableaux, consultez une présentation interactive sur les styles CSS liés aux tableaux.

Dans les exemples, nous avons ajouté une bordure au tableau et à chaque cellule individuelle avec CSS pour rendre certaines fonctionnalités 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 d'en-tête <th>, ce qui crée 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 de columnheader ou de en-tête de ligne. Il définit la cellule comme en-tête de la colonne ou de la ligne de cellules de tableau, en fonction de la valeur de l'attribut scope énuméré. Si scope n'est pas défini explicitement, le navigateur utilise par défaut col ou row. Étant donné que nous avons utilisé un balisage sémantique, la cellule 1956 comporte deux en-têtes : "Année" et "Lou Minious". Cette association nous indique que "1956" est l'"année" de remise de diplôme de "Lou Minious". Dans cet exemple, comme nous pouvons voir l'ensemble du tableau, l'association est visuellement évidente. L'utilisation de <th> permet d'établir l'association même lorsque la colonne ou la ligne d'en-tête ne s'affiche plus. 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 sont utiles avec les tableaux complexes.

Fusion des cellules

Comme dans MS Excel, Google Sheets et Numbers, vous pouvez joindre plusieurs cellules en une seule. Pour ce faire, utilisez du code HTML. L'attribut colspan permet de fusionner deux cellules ou plus adjacentes sur une même ligne. L'attribut rowspan permet de fusionner des cellules sur plusieurs lignes. Il est placé sur la cellule de 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 sur quatre colonnes: la cellule du milieu contient colspan="2". Cela fusionne deux cellules adjacentes. Les premières et dernières 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, qui correspondent aux 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ères et dernières colonnes de la première ligne s'étend sur deux lignes.

Lorsqu'une cellule est définie par plusieurs cellules d'en-tête avec des associations qui ne peuvent pas être définies par les attributs scope seuls, incluez l'attribut headers avec une liste des en-têtes associés, séparés par des espaces. 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 dans un cas d'utilisation aussi simple, mais ils sont importants à avoir dans votre boîte à outils à mesure que vos tableaux gagnent en complexité. Les tableaux dont la structure est complexe, par exemple ceux dont les en-têtes ou les cellules sont fusionnés ou qui comportent plus de deux niveaux d'en-têtes de ligne ou de colonne, nécessitent une identification explicite des cellules d'en-tête associées. Dans de telles tables 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 est plus couramment utilisé sur les éléments <td>, mais il est également valide sur <th>.

Cela dit, les structures de tableaux complexes peuvent être difficiles à comprendre pour tous les utilisateurs, et pas seulement pour les utilisateurs de lecteurs d'écran. D'un point de vue cognitif et en termes de compatibilité avec les lecteurs d'écran, les tableaux plus simples, avec peu ou pas de cellules étendues, même sans ajouter de champ d'application et d'en-têtes, sont plus faciles à comprendre. Elles sont également plus faciles à gérer.

Modifier le style des tableaux

Deux éléments relativement obscurs ont été brièvement mentionnés: l'élément de groupe de colonnes <colgroup> et son seul descendant, l'élément de colonne vide <col>. L'élément <colgroup> permet de définir des groupes de colonnes, ou des éléments <col>, dans un tableau.

Le regroupement des colonnes, le cas échéant, doit être imbriqué dans <table>, immédiatement après <caption> et avant les données de la table. S'ils s'étendent sur plusieurs colonnes, utilisez l'attribut span.

L'ordre de la structure du contenu d'un tableau 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 pour rendre le tableau plus accessible, mais ils permettent de styliser les colonnes de manière limitée, y compris en définissant une largeur pour la colonne avec CSS.

Les styles <col> stylisent 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 dans 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, met en surbrillance la huitième colonne dans son intégralité ou la met en surbrillance pour plusieurs lignes, mais avec quelques cellules des colonnes 9 et 10, en fonction des 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 le seul moyen d'utiliser l'élément <col> dans les cellules de ciblage est d'utiliser un sélecteur complexe incluant le sélecteur relationnel :has().

Si <table> et <colgroup> ont une couleur d'arrière-plan, le background-color de <colgroup> se trouve en haut. L'ordre de dessin est le suivant: table, groupes de colonnes, colonnes, groupes de lignes, lignes, les cellules étant les dernières 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.

Pour créer des bandes dans un tableau, les sélecteurs structurels CSS sont très utiles. Par exemple, tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);} ajoutera un noir translucide à chaque ligne impaire du corps du tableau, laissant apparaître les effets d'arrière-plan définis sur <colgroup>.

Les tableaux ne sont pas responsifs par défaut. Par défaut, elles sont redimensionnées en fonction de leur contenu. Des mesures supplémentaires sont nécessaires pour que le style de mise en page de la table fonctionne efficacement sur différents appareils. Si vous modifiez la propriété d'affichage CSS pour les éléments de tableau, incluez les 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 de tableau ont des significations sémantiques utilisées par les technologies d'assistance pour permettre de naviguer dans les lignes et les colonnes sans se "perdre". L'élément <table> ne doit pas être utilisé pour la présentation. Si vous avez besoin d'un titre au-dessus d'une liste, utilisez un en-tête et une liste. Si vous souhaitez mettre en page le contenu dans plusieurs colonnes, utilisez la mise en page multicolonne. Si vous souhaitez mettre en page le contenu dans une grille, utilisez la grille CSS. Utilisez un tableau uniquement pour les données. Considérez les choses de cette manière: 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 un logiciel de présentation tel que Keynote ou PowerPoint, vous avez probablement besoin d'une liste de description.

Si vous ne présentez pas de données tabulaires, n'utilisez pas de <table>. Si vous utilisez une table 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. Vous devez toutefois connaître les formulaires HTML. Nous allons donc vous en parler.

Vérifier vos connaissances

Testez vos connaissances sur les tableaux.