Tables

Les tableaux HTML affichent des données tabulaires avec des lignes et des colonnes. Vous devez choisir d'utiliser un <table> en fonction du contenu que vous affichez et des 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 organiser du contenu non tabulaire, comme un grand groupe de miniatures, les tableaux ne sont pas adaptés. Au lieu de cela, créez une liste d'images et mettez en forme la grille avec CSS.

Dans cette section, nous allons aborder tous les éléments qui composent le tableau, ainsi que certaines fonctionnalités d'accessibilité et d'utilisabilité à prendre en compte lors de la présentation de données tabulaires. Bien que le cours "Apprendre le HTML" ne soit pas axé sur le CSS, nous aborderons certaines propriétés CSS spécifiques aux tableaux. Pour en savoir plus sur les CSS, consultez Learn CSS.

Éléments du tableau, dans l'ordre

La balise <table> englobe le contenu du tableau, y compris tous les éléments du tableau. 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 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 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, à leur tour, contiennent toutes les données. Dans le DOM, avant tout cela, vous pouvez trouver deux fonctionnalités supplémentaires : la légende 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 aborder les enfants des éléments <table>, qui sont tous facultatifs, mais recommandés. Nous examinerons ensuite les lignes, les cellules d'en-tête de tableau et les cellules de données de tableau. Le <colgroup> sera abordé en dernier.

Légende du tableau

La méthode recommandée pour nommer une table est l'élément sémantique <caption>. <caption> fournit un titre de tableau descriptif associé de manière programmatique. 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>. Cela 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 le <table> pour fournir un nom accessible en tant que légende. L'élément <caption> ne comporte aucun attribut spécifique.

La légende apparaît en dehors du tableau. L'emplacement de la légende peut être défini avec la propriété CSS caption-side, ce qui est préférable à l'utilisation de l'attribut align obsolète. Vous pouvez ainsi définir 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.

Dans l'idéal, les tableaux de données doivent comporter des en-têtes et une légende clairs, et être suffisamment explicites pour être presque autonomes. 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é du point principal ou de la fonction 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 elle est plus longue, résumez-la dans la légende et fournissez le résumé dans le paragraphe précédant le tableau, en associant les deux avec l'attribut aria-describedby. Vous pouvez également placer le tableau dans un <figure> et le récapitulatif dans un <figcaption>.

Sectionnement des données

Le contenu des tableaux est composé d'au maximum trois sections : zéro ou plusieurs en-têtes de tableau (<thead>), corps de tableau (<tbody>) et pieds de tableau (<tfoot>). Tous sont facultatifs, et zéro ou plusieurs de chacun sont acceptés.

Ces éléments n'aident ni n'entravent l'accessibilité du tableau, mais ils sont utiles en termes d'utilisabilité. Ils fournissent des hooks de style. Par exemple, le contenu de l'en-tête peut être rendu fixe, tandis que le contenu de <tbody> peut être rendu défilant. Les lignes qui ne sont pas imbriquées dans l'un de ces trois éléments conteneurs sont implicitement encapsulées dans un <tbody>. 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 être placé juste après <thead> et avant <tbody> pour des raisons d'accessibilité. C'est pourquoi vous pouvez rencontrer cet ordre 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 d'utilité si les tableaux ne contiennent pas de lignes, de cellules et 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 de l'agent utilisateur affichent généralement le contenu d'une cellule d'en-tête de tableau <th> centré et en gras. 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 disponibles sur les cellules, les lignes et même le <table> individuels.

Il y avait des attributs pour ajouter une marge intérieure entre les cellules et à l'intérieur des cellules, pour les bordures et pour l'alignement du texte. Les attributs "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éfinis avec les propriétés CSS border-collapse et border-spacing, respectivement. 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 la mise en forme des tableaux, consultez cette présentation interactive des styles CSS associé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 rowheader. Elle 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 par défaut col ou row si scope n'est pas défini explicitement. Comme nous avons utilisé le 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 du diplôme de "Lou Minious". Dans cet exemple, l'association est visuellement évidente, car nous pouvons voir l'intégralité du tableau. L'utilisation de <th> permet d'établir l'association même lorsque la colonne ou la ligne d'en-tête n'est plus visible. Nous aurions pu définir explicitement <th scope="col">Year</th> et <th scope="row">Lou Minious</th>, mais avec un tableau comme celui-ci, les valeurs par défaut énumérées fonctionnent. rowgroup et colgroup sont d'autres valeurs possibles pour scope, qui sont utiles avec les tableaux complexes.

Fusionner des cellules

Comme dans MS Excel, Google Sheets et Numbers, il est possible de regrouper plusieurs cellules en une seule. Pour ce faire, utilisez les attributs HTML colspan et rowspan :

• colspan fusionne deux cellules adjacentes ou plus dans une même ligne.
• rowspan fusionne les cellules sur plusieurs lignes lorsqu'il est ajouté à la cellule de la première ligne fusionnée.

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 permet de fusionner deux cellules adjacentes. Les première et dernière cellules incluent rowspan="2". Cela permet de fusionner la cellule 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 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.

Dans les cas où une cellule est définie par plusieurs cellules d'en-tête avec des associations qui ne peuvent pas être définies par les seuls attributs scope, incluez l'attribut headers avec une liste des en-têtes associés, séparés par des espaces. Comme cet exemple est une table plus complexe, nous définissons explicitement le champ d'application des en-têtes avec l'attribut scope. Pour plus de clarté, nous avons ajouté l'attribut headers à chaque cellule.

Les attributs headers n'étaient peut-être pas nécessaires dans ce cas, mais il est important de s'en souvenir à mesure que vos tables deviennent plus complexes. Les tableaux aux structures complexes, comme ceux dont les en-têtes ou les cellules sont fusionnés ou qui comportent 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 comme valeur de l'attribut headers.

L'attribut headers est plus souvent utilisé sur les éléments <td>, mais il est également valide sur les éléments <th>.

Cela dit, les structures de tableau complexes peuvent être difficiles à comprendre pour tous les utilisateurs, et pas seulement pour ceux qui utilisent un lecteur d'écran. D'un point de vue cognitif et en termes de compatibilité avec les lecteurs d'écran, les tableaux simples, avec peu ou pas de cellules fusionnées, sont mieux compris, même sans ajout de portée ni d'en-têtes. 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.

Si elle est utilisée, la colonne de regroupement doit être imbriquée dans <table>, immédiatement après <caption> et avant toute donnée de tableau. S'ils s'étendent sur plusieurs colonnes, utilisez l'attribut span.

L'ordre du plan de contenu d'un tableau est généralement le suivant, avec <table> et <caption> comme deux éléments à inclure :

<table>
  <caption>Table Caption</caption>
  <colgroup>
    <col/>
  </colgroup>
  <thead>...

<colgroup> et <col> n'ont aucune signification sémantique qui pourrait avoir un impact sur l'accessibilité des tableaux. Toutefois, ils vous aident à mettre en forme les colonnes avec CSS, par exemple en définissant des largeurs.

Les styles associés <td> et <th> remplacent les styles <col>. Dans CodePen, nous avons défini colspan pour fusionner certaines lignes du tableau, mais pas toutes. Si le sélecteur CSS nth-child est appliqué à <tr>, cela peut avoir un impact sur le style, selon la ligne ou la colonne fusionnée.

Malheureusement, seules quelques propriétés sont acceptées. Les styles ne sont pas hérités dans les cellules. La seule façon de cibler les cellules avec <col> est d'utiliser un sélecteur complexe, tel que le sélecteur relationnel :has().

Si <table> et <colgroup> ont tous les deux une couleur d'arrière-plan, le background-color de <colgroup> est au-dessus. L'ordre de dessin est le suivant : table, 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 tableau. 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 rayures 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);}ajoute un noir translucide à chaque ligne impaire du corps du tableau, tout en laissant transparaître les effets d'arrière-plan définis sur <colgroup>.

Les tableaux ne sont pas responsifs par défaut. Par défaut, leur taille est plutôt adaptée à leur contenu. Des mesures supplémentaires sont nécessaires pour que la mise en forme de la mise en page du tableau fonctionne efficacement sur différents appareils. Si vous modifiez la propriété CSS "display" 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 une signification sémantique utilisée par les technologies d'assistance pour aider les utilisateurs à parcourir 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 du contenu sur plusieurs colonnes, utilisez la mise en page multicolonne. Si vous souhaitez organiser du contenu dans une grille, utilisez CSS Grid.

Utilisez uniquement un tableau pour les données.

Pour faire simple : 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 Google Slides ou PowerPoint, vous aurez probablement besoin d'une liste de description.

En bref : 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 les formulaires, mais ce n'est pas nécessaire. Vous devez connaître les formulaires HTML.

Vérifier que vous avez bien compris

Testez vos connaissances sur les tableaux.