- Accueil
- Design
- Composants
- Tableau de données
Tableau de données
Le tableau de données est utilisé pour afficher des données majoritairement/principalement numériques organisées en lignes et en colonnes.
Exemple
Vue d’ensemble
Cette section offre un aperçu des contextes d’utilisation, de l’anatomie du composant et des contenus. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».
Variantes disponibles
Les variantes permettent de s’adapter à la complexité visuelle de la page :
- Tableau standard : avec un en-tête coloré bleu ou gris.
- Tableau simplifié : sans en-tête coloré. Il est visuellement plus léger.
Quand l'utiliser
Les tableaux servent à présenter des ensembles de données structurées, qu’ils soient petits, volumineux ou complexes, facilitant ainsi la comparaison et la visualisation claire des informations. Ils sont principalement utilisés pour la présentation de données chiffrées, comme des statistiques, en vue d’une analyse quantitative.
Le tableau standard est généralement le choix par défaut, car sa présence visuelle attire naturellement l’attention de l’utilisateur.
Le tableau simplifié est préférable lorsque plusieurs tableaux sont présents sur une même page ou lorsque d’autres éléments doivent être mis en avant plutôt que le tableau lui-même.
Quand ne pas l’utiliser
Ne pas utiliser un tableau de données pour les cas suivants :
- Des listes de définitions ou des listes hiérarchiques : Les tableaux de données sont préférables pour afficher des données tabulaires structurées plutôt que des listes de définitions ou des structures hiérarchiques. Les listes à puces sont plus appropriées dans ces cas.
- De la mise en page : Les tableaux de données sont destinés à afficher des données sous forme tabulaire, et non à contrôler la mise en page d’une page web ou d’un document. Pour la mise en page, utiliser la mise en forme dédiée.
- Du contenu trop long : Si le contenu dépasse la capacité d’un tableau, cela peut compliquer la lecture et entraver la compréhension. Divisez-le en sections ou utilisez d’autres moyens de présentation plus adaptés.
Anatomie
- Titre du tableau
- Tableau
- En-tête
- Libellé
- Cellule
- Contenu de la cellule
- Colonne
- Rangée
Contenus
Cette section définit les règles et contraintes sur les types de contenus (textuels, graphiques, interactifs, etc.) acceptés par chaque élément du composant.
Tableau de données (complet)
Un tableau, malgré sa capacité à contenir de nombreuses données, doit rester simple pour une meilleure compréhension.
Titre du tableau
Utiliser un titre clair et directif pour orienter la lecture du tableau.
Libellé
Pour rendre le contenu des tableaux accessible aux lecteurs d’écran et faciliter la lecture, il est crucial que chaque tableau de données inclue une rangée d’en-têtes avec des libellés pour identifier les titres des colonnes. Les libellés d’en-tête doivent être concis et commencer par une majuscule. Si le tableau nécessite des en-têtes pour chaque rangée, ils doivent être situés dans la première colonne.
Cellule, colonne et rangée
Pour maintenir la clarté, éviter la fusion des cellules. Limiter aussi le nombre de colonnes et de rangées pour une présentation efficace,
Contenu de la cellule
Pour améliorer la lisibilité, il est recommandé de privilégier des informations concises dans les cellules pour une lecture rapide et efficace.
Spécifications
Cette section présente des informations techniques sur la composition, les comportements fonctionnels et les interactions du composant. Les spécifications techniques détaillées sont disponibles dans les trousses de design.
Composition
Description détaillée des éléments constitutifs du composant, avec des informations précises sur son anatomie.
Titre du tableau
Positionnement et alignement : Le titre est aligné à gauche.
Dimensions : Le titre du tableau de données a un style spécifique, indépendant de la hiérarchie des autres titres du contenu. Il occupe toute la largeur du tableau.
Espacements : Un espace de 72 px est prévu au-dessus du titre et de 24 px en dessous, assurant une séparation visuelle claire avec les autres éléments de la page.
Tableau
Positionnement et alignement : Le tableau s’aligne à gauche avec le contenu de la page.
Dimensions : Il est recommandé de limiter la largeur des tableaux pour une meilleure intégration dans l’interface. Un tableau occupant toute la largeur de la page peut sembler disproportionné et rendre la lecture difficile sur une page Web.
Espacements : Un espace de 72 px est prévu en dessous du tableau, assurant une séparation visuelle claire avec les autres éléments de la page.
Libellé
Positionnement et alignement : Les libellés d’en-tête sont alignés verticalement par le haut et horizontalement avec le contenu des cellules de la colonne correspondante.
Contenu de la cellule
Positionnement et alignement : Les contenus de la cellule sont alignés verticalement par le haut. Horizontalement, l’alignement varie selon le type de données :
- Le texte est aligné à gauche.
- Les nombres sont alignés à droite, avec la décimale.
Colonne
Dimensions : Les colonnes du tableau doivent avoir une largeur suffisante pour afficher le contenu le plus long de manière lisible. Il est important d’éviter que le contenu soit trop compact ou s’étende sur plusieurs lignes, car cela rendrait la lecture difficile.
À faire
À ne pas faire
Styles
Cette section présente les styles disponibles et documentés pour le composant.
En-têtes bleus moyens ou gris pâles (standard)
L’en-tête du tableau standard peut avoir un fond de couleur unie, au choix entre #19406C ou #F1F1F2. Le choix dépend de l’esthétisme désiré : la première couleur crée un contraste fort, tandis que la seconde offre une apparence plus sobre.
En-têtes blancs (simplifié)
L’en-tête du tableau simplifié a une couleur blanche. Le filet sous l’en-tête a la couleur #223654.
Rangées en couleurs alternées (standard)
Pour améliorer la lisibilité des tableaux standards très longs, l’utilisation de couleurs alternées (#FFFFFF et #F6F6F7) sur les rangées est recommandée. La première rangée sous l’en-tête reste en blanc ; ensuite, les couleurs sont alternées pour les rangées suivantes.
Comportements
Description des interactions possibles avec les éléments du composant, y compris l’utilisation de la souris et du clavier pour naviguer et effectuer des actions.
Fonctionnel
Fonctionnalités principales et secondaires, ainsi que leur comportement et les actions qu’ils déclenchent.
Adaptation mobile
Pour les tableaux avec peu de colonnes, le défilement horizontal est souvent plus adapté. Pour visualiser l’intégralité des données du tableau, il suffit de faire glisser le doigt vers la droite ou la gauche sur l’écran.
Pour éviter les allers-retours, il est possible de fixer la première colonne du tableau afin de maintenir les données essentielles visibles pendant le défilement horizontal. Cependant, cette pratique doit être utilisée avec précaution pour ne pas occuper plus de la moitié de la largeur de l’écran.
Changements visuels pour mobile
Le texte est réduit en taille 14 px. Lorsque la première colonne est fixe au défilement, des ombrages de niveau 3 sur les côtés, ainsi qu’une absence de marge à droite, indiquent à l’utilisateur la possibilité de faire défiler le tableau horizontalement.
Interaction
Assistance sur la manière d’interagir avec le composant, que ce soit via la souris ou le clavier.
Souris
Aucune interaction par la souris n’est requise.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Utiliser les touches de navigation (flèches haut, bas, gauche, droite) pour parcourir les données.
- Utiliser la touche Tab pour passer d’une cellule ou d’un élément à l’autre, si applicable.
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 8 octobre 2026