Tables

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 l'expérience en lien avec ce contenu. Si des données sont présentées, comparées, triées, calculé ou croisé, <table> est probablement le bon choix. Si vous voulez simplement présenter correctement le contenu non tabulaire, tels qu'un grand groupe de vignettes, les tableaux ne sont pas appropriés: créez une liste d'images et Appliquez un style à 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 de convivialité que vous devez prendre en compte lorsque vous présentez des données tabulaires. Bien que l'apprentissage HTML ne concerne pas fondamentalement le CSS, un cours entier est dédié à l'apprentissage des CSS, nous aborderons certaines propriétés CSS spécifiques aux tableaux.

É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. technologies d'assistance savent que cet élément est une structure de tableau contenant des données disposées en lignes et 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 du grid peuvent être développées et réduites, utilisez plutôt role="treegrid".

Dans <table>, vous trouverez les en-têtes (<thead>), le corps du tableau (<tbody>) et, éventuellement, ses pieds de page (<tfoot>). Chacun de ces éléments est composé de lignes du tableau (<tr>). Les lignes contiennent des cellules d'en-tête (<th>) et de données du tableau (<td>), qui contiennent elles-mêmes toutes les données. Dans le DOM, avant cela, vous pouvez trouver deux fonctionnalités supplémentaires: la légende du tableau (<caption>) et les groupes de colonnes (<colgroup>). En fonction indiquant si <colgroup> possède ou non un attribut span, il peut contenir des éléments de colonnes de tableau imbriquées (<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 aborderons les éléments <table> (Facultatif, mais recommandé), examinez les lignes, les cellules d'en-tête du tableau, et les cellules de données de tableau. Les <colgroup> seront traités en dernier.

Légende du tableau

En tant qu'élément sémantique natif, il est préférable d'utiliser <caption> qui permet d'attribuer un nom à une table. <caption> fournit un titre de table descriptif associé de manière programmatique. Il est visibles et disponibles par défaut 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 le l'objectif de la table immédiatement 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> n'a pas d'attribut spécifique.

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, qui est une que d'utiliser l'attribut obsolète align. Cela permet de placer les sous-titres en haut et en bas. À gauche et à droite le positionnement latéral, avec inline-start et inline-end, n'est pas encore entièrement pris en charge. La partie supérieure est 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 valoir un point » ou a besoin d'une interprétation, fournissez une 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 court, 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édant le tableau, en associant les deux au aria-describedby . Une autre option consiste à placer la table dans une <figure> et à placer le résumé dans <figcaption>.

Section des données

Le contenu des tableaux peut comporter jusqu'à trois sections: zéro ou plusieurs en-têtes de tableau (<thead>) , le corps des tableaux (<tbody>), et les pieds de page du tableau (<tfoot>). Tous sont facultatifs, et aucun ou plusieurs d'entre eux sont acceptés.

Ces éléments n’aident ou n’entravent pas l’accessibilité du tableau, mais ils sont utiles en termes de convivialité. Ils offrent pour modifier le style des crochets. Par exemple, le contenu de l'en-tête peut être persistant, tandis que le contenu <tbody> peut être défilé. Les lignes qui ne sont pas imbriquées dans l'un de ces trois éléments conteneurs sont implicitement encapsulé dans un <tbody>. Les trois partagent le même rôle implicite rowgroup. Aucun de ces trois éléments n'a d'attribut spécifique à l'élément.

Voici les données dont nous disposons à ce stade:

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

Pour des raisons d'accessibilité, l'élément <tfoot> était initialement prévu pour venir juste après <thead> et avant <tbody>. C'est pourquoi vous pouvez rencontrer cet ordre des sources non intuitif dans d'anciens codebases.

Contenu de la table

Les tableaux peuvent être divisés en en-têtes, corps et pieds de page, mais aucune de ces options n'a vraiment d'incidence si les tableaux ne qui contiennent des lignes, des cellules et du contenu de tableau. 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> centré et en gras. Ces styles par défaut, et tous les styles sont mieux contrôlés avec CSS plutôt qu'avec les attributs obsolètes qui étaient auparavant disponibles sur les cellules individuelles. les lignes et même le <table>.

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. Marge intérieure des cellules et espacement des cellules, 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 à l'aide des règles CSS border-fold 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 l'application d'un style aux tableaux, voici un présentation interactive des styles CSS liés aux tableaux

Dans les exemples, nous avons ajouté une bordure au tableau et ajouté du code CSS à chaque cellule pour faire ressortir certaines fonctionnalités:

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. 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 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 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: Year (Année) et Lou Minious (Lou Minious). Cette association nous indique que « 1956 » est le "année" l'obtention du diplôme pour "Lou Minious". Dans cet exemple, comme nous pouvons voir l'ensemble de la table, l'association est visuellement nette. L'utilisation de <th> permet d'établir l'association même lorsque la colonne ou la ligne d'en-tête a fait l'objet d'un défilement pour ne plus être visible. 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, il est possible de joindre plusieurs cellules en une seule cellule. Cela se fait avec HTML ! L'attribut colspan permet de fusionner deux cellules adjacentes ou plus sur une même ligne. L'attribut rowspan permet de fusionner des cellules sur plusieurs lignes. placée sur la cellule dans la ligne du haut.

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ère et dernière cellules incluent rowspan="2". La cellule est alors fusionnée avec les autres dans la ligne adjacente, juste en dessous.

La deuxième ligne de l’en-tête du tableau contient deux cellules ; ce sont les 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.

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 attributs scope seuls, 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 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 un cas d'utilisation aussi simple, mais ils sont importants dans votre boîte à outils, car la complexité de vos tableaux. les tableaux présentant des structures complexes, tels que des tableaux dans lesquels des en-têtes ou des cellules sont fusionnés ou avec d'autres que deux niveaux d'en-têtes de colonne ou de ligne, nécessitent l'identification explicite des cellules d'en-tête associées. Dans des tableaux aussi complexes, associer chaque cellule de données à chaque cellule d'en-tête correspondante avec une liste de valeurs id séparées par un espace contenant tous les en-têtes associés comme valeur de l'attribut headers.

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

Cela dit, les structures de table complexes peuvent être difficiles à comprendre pour tous les utilisateurs, pas seulement les utilisateurs de lecteurs d'écran. Cognitif et en termes de compatibilité avec les lecteurs d'écran, les tableaux plus simples, avec peu ou pas de cellules fractionnées, sont plus faciles à appliquer, même sans ajouter de portée ni d'en-têtes. compris. Ils sont également plus faciles à gérer !

Appliquer un style aux tableaux

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

S'il est utilisé, le regroupement des colonnes doit être imbriqué dans la <table>, immédiatement après la <caption> et avant les données de la table. S'ils couvrent plusieurs colonnes, utilisez l'attribut span.

L'ordre de description du contenu d'un tableau est généralement le suivant, <table> et <caption> étant les deux éléments qui doit être inclus:

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

Ni <colgroup>, ni <col> n'ont de sens sémantique pour rendre la table plus accessible, mais ils permettent pour limiter le style de colonne, par exemple en définissant une largeur pour la colonne avec CSS.

Les styles <col> appliquent un style à une colonne tant qu'aucun style <td> ou <th> ne remplace ce style. Par exemple, lorsque <colspan> est utilisé pour fusionner les cellules de 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 8e enfant de chaque ligne, met en surbrillance la 8e colonne dans son intégralité ou met en surbrillance la 8e colonne pour plusieurs lignes, mais avec quelques cellules de 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 constituent la seule façon d'utiliser <col>. dans les cellules de ciblage se trouve avec un sélecteur complexe, y compris le sélecteur relationnel :has().

Si <table> et <colgroup> ont une couleur d'arrière-plan, le background-color de <colgroup> sera au-dessus. L'ordre de dessin est le suivant: tableau, groupes de colonnes, colonnes, groupes de lignes, lignes, avec les cellules en dernier et au-dessus, comme indiqué dans le schéma de tableau couches. Les éléments <td> et <th> ne sont pas les descendants des éléments <colgroup> ou <col>, et n'héritent pas de leur style.

Les sélecteurs structurels CSS sont très pratiques pour appliquer des bandes d'un tableau. 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, pour laisser apparaître tous les effets d'arrière-plan définis sur <colgroup>.

Les tables ne sont pas responsives par défaut. Au contraire, ils sont dimensionnés par défaut en fonction de leur contenu. Des mesures supplémentaires sont nécessaires pour obtenir le tableau un style de mise en page pour fonctionner efficacement sur une variété d'appareils. Si vous modifiez la propriété d'affichage CSS des éléments du tableau, procédez comme suit : inclure 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 qui sont utilisées par les technologies d'assistance pour permettre la navigation dans les lignes et les colonnes sans vous 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 disposer le contenu sur plusieurs colonnes, utilisez la mise en page sur plusieurs colonnes. Si vous souhaitez disposer le contenu dans une grille, utilisez la grille CSS. N'utilisez un tableau que 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 aurez probablement besoin d'une liste de descriptions.

Si le tri des colonnes d'un tableau correspond à l'interface de JavaScript, le balisage de vos en-têtes pour indiquer aux internautes que la colonne peut être triée est l'approche HTML. Indiquez aux utilisateurs que les colonnes du tableau peuvent être triées à l'aide d'une iconographie indiquant l'ordre croissant, l'ordre décroissant ou les valeurs non triées. La colonne actuellement triée doit Incluez l'attribut aria-sort avec la valeur énumérée correspondant à l'ordre de tri. <caption> peut annoncer poliment les mises à jour de l'ordre de tri via aria-live et un qui est 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 être 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. Cependant, vous devez connaître les formulaires HTML, et nous en parlerons plus tard.

Testez vos connaissances

Testez vos connaissances sur les tableaux.