Tableau - Table

Le tableau permet de présenter une liste structurée de données textuelles et/ou numériques.

 

Tableau

Il permet de simplifier l’analyse et la comparaison d’information pour l’utilisateur.

Structure

Il se compose des éléments suivants :

  • une ligne de titre - obligatoire.

  • une ou plusieurs ligne de contenu - obligatoire.

  • des bordures entre les cellules - optionnelles.

La largeur des cellules s’adaptent automatiquement à votre contenu, et leur texte est aligné en haut à gauche.

 

 

1 2 3 4 5 <div class="fr-table"> <table> <caption>Résumé du tableau (accessibilité)</caption> <thead> (...)

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 <div class="fr-table"> <table> <caption>Résumé du tableau (accessibilité)</caption> <thead> <tr> <th scope="col">Titre</th> <th scope="col">Titre</th> <th scope="col">Titre</th> <th scope="col">Titre</th> <th scope="col">Titre</th> </tr> </thead> <tbody> <tr> <td>Donnée</td> <td>Donnée</td> <td>Donnée</td> <td>Donnée</td> <td>Donnée</td> </tr> <tr> <td>Donnée</td> <td>Donnée</td> <td>Donnée</td> <td>Donnée</td> <td>Donnée</td> </tr> <tr> <td>Donnée</td> <td>Donnée</td> <td>Donnée</td> <td>Donnée</td> <td>Donnée</td> </tr> <tr> <td>Donnée</td> <td>Donnée</td> <td>Donnée</td> <td>Donnée</td> <td>Donnée</td> </tr> <tr> <td>Donnée</td> <td>Donnée</td> <td>Donnée</td> <td>Donnée</td> <td>Donnée</td> </tr> </tbody> </table> </div>

Tableau avec bordures

Le tableau avec bordures est à privilégier pour améliorer la lisibilité du contenu lorsque celui-ci est dense.

 

 

1 2 3 4 5 <div class="fr-table fr-table--bordered"> <table> <caption>Résumé du tableau (accessibilité)</caption> <thead> (...)

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <div class="fr-table fr-table--bordered"> <table> <caption>Résumé du tableau (accessibilité)</caption> <thead> <tr> <th scope="col">th0</th> <th scope="col">th1</th> <th scope="col">th2</th> <th scope="col">th3</th> </tr> </thead> <tbody> <tr> <td>Lorem [...] elit ut.</td> <td>Lorem [...] elit ut.</td> <td>Lorem [...] elit ut.</td> <td>Lorem [...] elit ut.</td> </tr> <tr> <td>Lorem [...] elit ut.</td> <td>Lorem</td> <td>Lorem [..</td> <td>Lor</td> </tr> <tr> <td>Lorem [...] elit ut.</td> <td>Lorem [...] elit ut.</td> <td>Lorem [...]</td> <td>Lorem [...]</td> </tr> </tbody> </table> </div>

Responsive

En version mobile les tableaux se consultent via un scroll horizontal.

No-scroll

Il est également possible de bloquer la fonctionnalité de scroll horizontal pour les tableaux où il y a peu de colonne en utilisant la class <div class="fr-table fr-table--no-scroll">

Si le tableau no-scroll comporte trop de colonnes le tableau est coupé sur la droite (ovefrlow hidden).

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <div class="fr-table fr-table--no-scroll"> <table> <caption>Résumé du tableau (accessibilité)</caption> <thead> <tr> <th scope="col">Titre</th> <th scope="col"> Titre </th> </tr> </thead> <tbody> <tr> <td>Donnée</td> <td>Donnée</td> </tr> <tr> <td>Donnée</td> <td>Donnée</td> </tr> </tbody> </table> </div>

Fixed Layout

Il est également possible de désactiver le scroll en fixant la largeur des colonnes du tableau avec la classe <div class="fr-table fr-table--layout-fixed">.

Les colonnes sont alors toutes de la même taille quelque soit leur contenu, et la largeur maximum du tableau est 100% donc il n’est plus scrollable.

Si le tableau comporte trop de colonnes le contenu des cellules risque de dépasser en mobile.

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <div class="fr-table fr-table--layout-fixed"> <table> <caption>Caption tableau fixé</caption> <thead> <tr> <th scope="col">td</th> <th scope="col">titre</th> </tr> </thead> <tbody> <tr> <td>Lorem ipsum dolor sit amet consectetur adipisicin</td> <td>Lorem ipsum dolor sit amet consectetur</td> </tr> <tr> <td>Lorem ipsum d</td> <td>Lorem ipsu</td> </tr> </tbody> </table> </div>

 

Gestion du caption

Nous utilisons la balise <caption> à l’intérieur d’un tableau pour spécifier un titre, le fonctionnement du tableau s’il est complexe, ou encore sa description dans un usage réservé au screen reader (accessibilité).

Par défaut le caption est fixé en haut a gauche du tableau, et ne scroll pas avec le contenu.

Pour gérer ce caption il existe 2 modifiers permettant de le cacher et de le placer en dessous du tableau.

No-caption

Il existe un modifier fr-table--no-caption permettant de cacher (visuellement) le caption afin de l’utiliser uniquement dans le cadre de l’accessibilité.

1 2 3 4 <div class="fr-table fr-table--no-caption"> <table> <caption>Caption caché</caption> ...

Caption-bottom

Il est possible de placer le caption en dessous du tableau plutôt qu’en haut. Il suffit cette fois d’utiliser le modifier fr-table--caption-bottom.

 

 

 

 

1 2 3 4 <div class="fr-table fr-table--caption-bottom"> <table> <caption>Caption en bas</caption> ...

 

Règles d’utilisation

Usages

Nous recommandons de ne pas dépasser 6 colonnes par tableau, afin de conserver une bonne lisibilité de l’information.

Le contenu des cellules est toujours aligné en haut à gauche dans les cellules.

La largeur des colonnes et des cellules s’adapte automatiquement à la taille du contenu. (sauf en mode layout-fixed)

Les modes “no-scroll” et “layout-fixed”, ne sont à utiliser que sur des tableaux avec très peu de colonnes, en s’assurant que le contenu de dépasse pas en petit mobile (320px).

 

Accessibilité

  • Le tableau propose une balise caption contenant un titre pertinent.

Dans les tableaux complexes, le caption doit être complété pour expliquer le fonctionnement du tableau.

  • Les entêtes de lignes et de colonnes doivent être déclarées comme telles (balise th)

  • Les cellules d'en-têtes (th) doivent être associées aux cellules de données :

    • pour les en-têtes de ligne avec un attribut scope="row" ;

    • pour les en-têtes de colonne avec un attribut scope="col".

Contenus

  • Synthétisez les contenus à l’intérieur de chaque cellule.

  • Utilisez des titres de colonne clairs et concis.

  • Les titres de colonnes commencent toujours par une majuscule et ne se terminent jamais par un élément de ponctuation (virgule, point ou point virgule)

  • Si une colonne intègre une unité de mesure, il est nécessaire que l’information soit donnée dans le titre, afin d'éviter les répétitions dans les cellules de contenu.

 

Personnalisation

Ce composant n’est pas personnalisable.
Toutefois, certains éléments sont optionnels - voir la structure du composant.

 

Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :