Skip to Main Content

Tableaux

Les tableaux sont composés de lignes et de colonnes qui donnent une structure aux données afin de les rendre plus faciles à comprendre.

Utilisez-les lorsque :

  • Vous voulez rendre un vaste ensemble de données facile à comprendre.
  • Vous voulez présenter toutes les options offertes à l’utilisateur.
  • L’utilisateur pourrait profiter de la comparaison ou du filtrage des renseignements.

Composant interactif

Titre
Légende (facultative)
En-tête de la colonne En-tête de la colonne En-tête de la colonne En-tête de la colonne
Sous-titre
En-tête de la rangée Contenu de la cellule Contenu de la cellule Contenu de la cellule Footnote 1
En-tête de la rangée Contenu de la cellule Contenu de la cellule Contenu de la cellule
En-tête de la rangée Contenu de la cellule Contenu de la cellule Footnote 1 Contenu de la cellule
Sous-titre
En-tête de la rangée Contenu de la cellule Contenu de la cellule Contenu de la cellule
En-tête de la rangée Contenu de la cellule Contenu de la cellule Contenu de la celluleFootnote *
Sous-titre
En-tête de la rangée Contenu de la cellule Contenu de la cellule Contenu de la cellule
En-tête de la rangée Contenu de la cellule Contenu de la cellule Contenu de la cellule
En-tête de la rangée Contenu de la cellule Contenu de la cellule Contenu de la cellule

Footnote

Titre
Légende (facultative)
En-tête de la colonne En-tête de la colonne En-tête de la colonne En-tête de la colonne
Sous-titre
En-tête de la rangée Contenu de la cellule Contenu de la cellule Contenu de la cellule Footnote 1
En-tête de la rangée Contenu de la cellule Contenu de la cellule Contenu de la cellule
En-tête de la rangée Contenu de la cellule Contenu de la cellule Footnote 1 Contenu de la cellule
Sous-titre
En-tête de la rangée Contenu de la cellule Contenu de la cellule Contenu de la cellule
En-tête de la rangée Contenu de la cellule Contenu de la cellule Contenu de la celluleFootnote *
Sous-titre
En-tête de la rangée Contenu de la cellule Contenu de la cellule Contenu de la cellule
En-tête de la rangée Contenu de la cellule Contenu de la cellule Contenu de la cellule
En-tête de la rangée Contenu de la cellule Contenu de la cellule Contenu de la cellule

Footnote

Intégration des bibliothèques

Utilisez le code ci-dessous pour ajouter cet élément à votre projet. Téléchargez la dernière version de la bibliothèque pour implémenter facilement notre ensemble complet d’éléments.

Angular HTML

Angular

Étape 1. Installer

Effectuer la commande suivante pour installer ce composant.

npm i [NPM-PLACE-HOLDER]/ds-table

Étape 2. Importer

Importer les éléments suivants dans votre dossier app.module.ts.

import { DsTableModule } from 'ds-table';

Extraits de code

Tableau – Affichage du bureau 
<cpc-ds-table title="Title" [accordionMobileView]="false" tableDataURL='url to json file'></cpc-ds-table>
Tableau – Affichage mobile 
<cpc-ds-table title="Title" [accordionMobileView]="true" tableDataURL='url to json file'></cpc-ds-table>

HTML

Étape 1: Importer CSS

Importer les éléments suivants dans votre thème ou votre page.

<link type="text/css" href="[CSS-PLACE-HOLDER]" rel="stylesheet">

Étape 2: Importer JS

Importer les éléments suivants dans votre thème ou votre page. 

<script src="[JS-PLACE-HOLDER]"></script>

Extraits de code

Tableau
<div data-title="TABLE">
                <h2 class="section-heading">Table</h2>
                <div class="table-title">Title</div>
                <table class="responsive-table">
                <caption>Caption (optional) <span class="wb-inv-caption">Footnotes for this table will appear below.</span></caption>
                <thead>
                    <tr>
                    <th class="col" scope="col">Film title</th>
                    <th class="col" scope="col">Released</th>
                    <th class="col" scope="col">Studio</th>
                    <th class="col" scope="col">Budget</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                    <td id="subheading-kids" scope="row" class="subheading" colspan="4">Kids ABS BS BSB SBS BS BSB SBS BS SB SB S SB sjhdd ksad aksdh ak</td>
                    </tr>
                    <tr aria-labelledby="subheading-kids" class="trow">
                    <th scope="row">Minions</th>
                    <td data-title="Released">2015</td>
                    <td data-title="Studio">Universal</td>
                    <td data-title="Column heading content aligns to the bottom of the cell.">$1,159,444,662 <sup tab-id="subheading-kids"><a class="by-keyboard" id="fn1-1-rf" href="#fn1"><span class="wb-inv">Footnote </span>1</a></sup></td>
                    </tr> 
                    <tr aria-labelledby="subheading-kids" class="trow">
                    <th scope="row">Toy Story 4</th>
                    <td data-title="Released">2019</td>
                    <td data-title="Studio">Disney Pixar</td>
                    <td data-title="Column heading content aligns to the bottom of the cell.">$1,073,394,593</td>
                    </tr>
                    <tr aria-labelledby="subheading-kids" class="trow-last">
                    <th scope="row">Toy Story 3</th>
                    <td data-title="Released">2010</td>
                    <td data-title="Studio">Disney Pixar <sup tab-id="subheading-kids"><a class="by-keyboard" id="fn1-2-rf" href="#fn1"><span class="wb-inv">Footnote </span>1</a></sup></td>
                    <td data-title="Column heading content aligns to the bottom of the cell.">$1,066,970,811</td>
                    </tr>

                    
                    <tr>
                    <td id="subheading-fantasy" scope="row" class="subheading" colspan="4">Subheading</td>
                    </tr>
                    <tr aria-labelledby="subheading-fantasy" class="trow">
                    <th scope="row">Despicable Me 3</th>
                    <td data-title="Released">2017</td>
                    <td data-title="Studio">Universal</td>
                    <td data-title="Column heading content aligns to the bottom of the cell.">$1,034,800,131</td>
                    </tr>
                    <tr aria-labelledby="subheading-fantasy" class="trow-last">
                    <th scope="row">Finding Dory</th>
                    <td data-title="Released">2016</td>
                    <td data-title="Studio">Disney Pixar</td>
                    <td data-title="Column heading content aligns to the bottom of the cell.">$1,028,570,942<sup tab-id="subheading-fantasy"><a class="by-keyboard" id="fn*-1-rf" href="#fn*"><span class="wb-inv">Footnote </span>*</a></sup></td>
                    </tr>


                    <tr>
                    <td id="subheading-action" scope="row" class="subheading" colspan="4">Action</td>
                    </tr>
                    <tr aria-labelledby="subheading-action" class="trow">
                    <th scope="row">Gladiator</th>
                    <td data-title="Released">2017</td>
                    <td data-title="Studio">Universal</td>
                    <td data-title="Column heading content aligns to the bottom of the cell.">$1,034,800,131</td>
                    </tr>
                    <tr aria-labelledby="subheading-action" class="trow">
                    <th scope="row">Terminator</th>
                    <td data-title="Released">2017</td>
                    <td data-title="Studio">Universal</td>
                    <td data-title="Column heading content aligns to the bottom of the cell.">$1,034,800,131</td>
                    </tr>
                    <tr aria-labelledby="subheading-action" class="trow-last">
                    <th scope="row">Predator</th>
                    <td data-title="Released">2016</td>
                    <td data-title="Studio">Disney Pixar</td>
                    <td data-title="Column heading content aligns to the bottom of the cell.">$1,028,570,942</td>
                    </tr>
                </tbody>
                </table>
                <h2 class="wb-inv-ref" id="footnote">Footnote</h2>
                <ul id="tfooter" class="tfooter" role="list" aria-labelledby="footnote">
                    <li>
                    <div>
                        <a class="by-keyboard footnote" onclick="checkTabState('fn*')" id="fn*" href="#fn*-1-rf"><span class="wb-inv">Go to reference for footnote </span>*</a>
                    </div>
                    <div>Percentages are based on numbers rounded to the nearest thousand and have been adjusted for trading (business) or paid days, where applicable.</div>
                    </li>
                    <li>
                    <div>
                        <a class="by-keyboard footnote" onclick="checkTabState('fn1')" id="fn1" href="#fn1-1-rf"><span class="wb-inv">Go to reference for footnote </span>1</a>
                    </div>
                    <div>Percentages are based on numbers rounded to the nearest thousand and have been adjusted for trading (business) or paid days, where applicable.</div>
                    </li>
                </ul>
                <div class="spacer"></div>
            </div>

Exemples de codes

Section de base

Télécharger les fichiers

Angulaire

Télécharger les fichiers

Interaction

Les tableaux permettent à l’utilisateur d’assimiler facilement de grandes quantités de contenu et de trouver ce qu’il cherche. Ils peuvent aider l’utilisateur à comprendre l’ensemble des données ou des attributs précis dans une plage de données.

Structure

Un tableau de données contient :
  • Au moins 2 colonnes et rangées
  • Des en-têtes qui décrivent clairement le contenu de chaque colonne

Utilisez des lignes pour séparer le contenu présenté dans les rangées. Si votre ensemble de données est présenté dans des rangées qui doivent être regroupées en catégories, envisagez un en-tête distinct pour chaque catégorie de rangées. Les colonnes et les rangées doivent être organisées de façon logique.

  • N’utilisez pas de remplissage en bandes horizontales dans vos tableaux.

Actions

Si vous présentez de l’information dont l’action s’applique à l’ensemble du tableau, placez le bouton au bas du tableau et alignez-le à gauche. Si l’utilisateur peut effectuer des actions sur des éléments individuels dans le tableau, songez à appliquer des actions de menu aux rangées individuelles.

Laissez l’utilisateur balayer, analyser, comparer, filtrer, trier et manipuler les renseignements dans le tableau pour qu’il puisse comprendre l’information de manière logique pour lui.

Alignement des données

Les chiffres, le texte, les en-têtes et les icônes (le cas échéant) doivent tous être alignés à gauche.
  • Lorsque l’information est alignée au centre dans un tableau, l’utilisateur a plus de difficulté à la balayer du regard.

Sélection d’une rangée

Lorsqu’une rangée est sélectionnée, changez la couleur d’arrière-plan pour informer l’utilisateur qu’elle a été sélectionnée. Si l’utilisateur doit sélectionner ou manipuler les données, il devrait y avoir une case à cocher dans chaque rangée. Utilisez l’état sélectionné de la case à cocher.

Tri de colonne

Dans certains cas, il est nécessaire de donner à l’utilisateur l’option de trier les renseignements dans un tableau. Lorsque cela se produit, il est important d’informer l’utilisateur de la façon dont les renseignements seront triés, et préciser quelle colonne fera l’objet du tri.

Lignes directrices générales À faire et à ne pas faire Questions d’accessibilité

Lignes directrices générales

Les tableaux permettent d’organiser les renseignements de façon à ce que l’utilisateur puisse facilement les parcourir. Par exemple, ils peuvent contenir un ensemble de données dans un spectre et avec des variations. Les tableaux ont souvent une rangée d’en-tête comportant un ensemble de renseignements, puis d’autres rangées et des colonnes.

  Lignes directrices Exemples
Longueur recommandée 1 à 3 mots pour les en-têtes de colonnes et de rangées Coût
Saut de ligne À éviter Délai d’expédition
Formulation Mots ou phrases Quantité minimale
Majuscule Majuscule en début de phrase, sans point Régionale

Meilleures pratiques

Pensez à la façon dont un tableau s’affichera sur un appareil mobile et évaluez si une autre solution pourrait être nécessaire.

À faire et à ne pas faire

Lisibilité

Les tableaux peuvent être intimidants, car ils présentent différents éléments d’information en même temps. Des phrases complètes peuvent contribuer à une surcharge visuelle. Utilisez des phrases courtes faciles à parcourir.

  • Adressez-vous aux clients directement
  • Faites sentir à vos clients qu’ils sont uniques en leur faisant parvenir un article de publipostage personnalisé qu’ils seront plus enclins à ouvrir.

Lignes et colonnes

Les étiquettes pour les en-têtes de colonne devraient être les plus courtes possible. Présentez les marques de commerce dans un texte précédant le tableau. Cela évitera d’avoir le symbole de la marque de commerce (MC) dans un en-tête.

  • Joignez toutes les boîtes aux lettres avec le service Courrier de quartier
  • Joignez toutes les boîtes aux lettres avec le service Courrier de quartier de Postes CanadaMC

Questions d’accessibilité

Légende

Il peut être utile d’inclure une légende de tableau accessible spécialement pour les utilisateurs qui comptent sur la technologie d’assistance. Ils seront ainsi en mesure de comprendre les éléments visuels du tableau avant d’y accéder.

Légende personnalisée

  • Les deux premières colonnes indiquent la date et l’heure des mises à jour sur l’état d’avancement de l’envoi correspondantes affichées dans la troisième colonne.

Lignes directrices

Halo de saisie

Les tableaux n’ont pas leur propre halo de saisie, mais les commandes interactives à l’intérieur de la fenêtre modale sont dotées d’un contour de mise en évidence bien visible lorsqu’elles sont en état de survol ou de mise en évidence.

Dans l’affichage mobile, la composante du tableau est convertie en un ensemble de données représenté par des accordéons au lieu d’une grille. Les boutons d’accordéon subissent un changement visuel important lorsqu’ils sont sélectionnés.

Interaction avec le clavier

Les tableaux eux-mêmes ne sont pas interactifs, mais ils peuvent contenir des éléments interactifs (pour le tri des données, la manipulation du contenu, etc.). Les tableaux ne sont pas utilisés pour la mise en page.

Les éléments interactifs à l’intérieur d’un tableau sont présentés dans la hiérarchisation des onglets de page. Les liens, les boutons, les cases à cocher, etc. à l’intérieur d’un tableau suivent leurs interactions clavier respectives.

Propriétés ARIA

Un tableau peut avoir les propriétés ARIA suivantes :

  • Le rôle de « table » (non requis lorsque l'élément HTML <table> est utilisé)
  • Une « caption », ainsi que tout résumé visible ou invisible faisant partie de l’élément de « caption »
  • Attribut aria-sort réglé au tri en ordre « ascending » ou « descending » sur l’en-tête de colonne du tableau trié
  • En-têtes de tableau associés à leurs cellules de données respectives à l’aide de l’attribut de « scope »
  • Les tableaux comportant plusieurs niveaux d’en-tête peuvent utiliser des éléments colgroup étendu et rowgroup pour associer les en-têtes à leurs cellules de données.
  • Pour les tableaux dont l’association « header » est complexe : Il est possible d’utiliser les « header » attributs et les ID pour associer les cellules de données à leurs « header » respectifs; dans la mesure du possible, il est recommandé d’explorer différentes présentations d’IU pour éviter une telle complexité.

Caption

Une « caption » est un titre de tableau ou un en-tête qui indique brièvement à l’utilisateur ce qui se trouve dans le tableau. Une « caption » peut être utilisée pour fournir un titre descriptif pour le tableau. Bien que les tableaux n’aient pas tous besoin d’une « caption » visible, ils sont utiles pour que les utilisateurs comprennent le contexte.

Les « caption » peuvent également être utilisés pour transmettre les renseignements suivants aux utilisateurs, visibles à l’écran ou invisibles et annoncés uniquement aux lecteurs d’écran :

  • Le fait que le tableau contient des notes de bas de page
  • L’emplacement des notes de bas de page
  • L’état actuel du tableau, y compris si le tableau peut être trié, comporte des colonnes qui peuvent être modifiées ou supprimées et d’autres caractéristiques de manipulation des données
  • Un résumé de l’intention ou de la présentation du tableau

Exemples de « captions »

Voici quelques exemples de « captions »  :

  • Étudiants actuellement inscrits au cours STRUCTURES DE DONNÉES 101 pour le prochain semestre.
  • Étudiants actuellement inscrits au cours STRUCTURES DE DONNÉES 101 pour le prochain semestre. Les notes de ce tableau s’afficheront plus bas.
  • Étudiants actuellement inscrits au cours STRUCTURES DE DONNÉES 101 pour le prochain semestre, triés en ordre croissant selon le prénom.

Notes de bas de page

Principales caractéristiques des notes de bas de page du tableau :

  • Les notes de bas de page sont présentées dans une liste non ordonnée.
  • Les notes de bas de page ont un en-tête visible; le titre est programmatiquement associé à la liste des notes de bas de page à l’aide de l’attribut aria-labelledby.
  • Chaque note de bas de page cible une note de référence, et vice versa.
  • Les notes de bas de page ont une option loopback fonctionnelle menant à leurs références respectives. Les utilisateurs peuvent suivre un lien de référence pour accéder à la note de bas de page et la lire, puis suivre un lien dans la note de bas de page pour retourner à l’endroit où ils se trouvaient auparavant. Pour un exemple pratique de la façon dont les options loopback de note de bas de page fonctionnent, reportez-vous à la composante interactive dans le haut de cette page.

Test

Au moment de tester un tableau, le testeur doit s’assurer de ce qui suit :

  • Le tableau est entièrement accessible au moyen du clavier.
  • Le lecteur d’écran annonce le rôle du tableau, le nombre de rangées et de colonnes et la légende (visible et invisible).
  • Le <table> est correctement codé en HTML en tant que ou avec un rôle de « table ». L’utilisation de quelque chose qui ressemble à un tableau (p. ex., une liste présentée visuellement comme une grille) n’a pas la sémantique nécessaire pour appuyer la compréhension et la navigation pour les utilisateurs du lecteur d’écran. Pour faire un test, il faut appuyer sur la touche « t » tout en utilisant un lecteur d’écran à partir de n’importe où, sauf le corps du tableau sur la page, et vérifier si le lecteur d’écran passe au tableau et l’annonce.
  • Les en-têtes de tableau ne sont pas vides et leur portée n’est pas adéquate. Si un en-tête de tableau doit avoir l’air vide, un texte non visible doit être fourni à titre d’étiquette.
  • La « caption » du tableau indique le titre du tableau, la présence de notes de bas de page et les renseignements sur l’état pour les tableaux triables. Elle peut également comprendre d’autres renseignements nécessaires pour comprendre ou le tableau ou y naviguer.
  • Les notes de bas de tableau sont présentées dans une liste non ordonnée et comportent un en-tête visible qui est annoncé avec la liste des notes de bas de page.
  • Reportez-vous au loopback comme prévu pour les notes de bas de page.

Contenu connexe