Tableau - Table

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

Tableau simple

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.

Résumé du tableau (accessibilité)
Titre Titre Titre Titre Titre
Donnée Donnée Donnée Donnée Donnée
Donnée Donnée Donnée Donnée Donnée
Donnée Donnée Donnée Donnée Donnée
Donnée Donnée Donnée Donnée Donnée
Donnée Donnée Donnée Donnée Donnée

                      <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.

Résumé du tableau (accessibilité)
th0 th1 th2 th3
Lorem [...] elit ut. Lorem [...] elit ut. Lorem [...] elit ut. Lorem [...] elit ut.
Lorem [...] elit ut. Lorem Lorem [.. Lor
Lorem [...] elit ut. Lorem [...] elit ut. Lorem [...] Lorem [...]

                      <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).

Résumé du tableau (accessibilité)
Titre Titre
Donnée Donnée
Donnée Donnée

                      <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.

Caption tableau fixé
td titre
Lorem ipsum dolor sit amet consectetur adipisicin Lorem ipsum dolor sit amet consectetur
Lorem ipsum d Lorem ipsu

                      <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é.

<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.

Titre du tableau en bas
td titre
Lorem ipsum dolor sit amet consectetur adipisicin Lorem ipsum dolor sit amet consectetur
Lorem ipsum d Lorem ipsu
Lorem ipsum dolor sit amet consectetur adipisicin Lorem ipsum dolor sit amet consectetur
Lorem ipsum d Lorem ipsu
                <div class="fr-table fr-table--caption-bottom">
    <table>
        <caption>Titre du tableau en bas</caption>
        <thead>
            <tr>
                <td scope="col">td
                </td><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>
            <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>
                
              

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".
  • 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

Certains éléments du composant sont optionnels : voir la structure du composant.

Couleurs d’accent

Les éléments fond et bordure peuvent utiliser les couleurs illustratives. Ils sont indissociables.

Élément
Valeur par défaut
Valeur(s) autorisée(s)
Token Classe css
Fond en-tête $background-contrast-grey
Correspondance :
Thème clair et sombre =
$grey-950 (thème clair)
$grey-100 (thème sombre)
$[couleur]-950 (thème clair)
$[couleur]-100 (thème sombre)
exemples:
thème clair = green-emeraude-950
thème sombre = green-emeraude-100
.fr-table—[couleur]
exemples :
.fr-table—green-emeraude
.fr-table—brown-caramel
Fond corps $background-alt-grey
Correspondance :
Thème clair et sombre =
$grey-975 (thème clair)
$grey-75 (thème sombre)
$[couleur]-975 (thème clair)
$[couleur]-75 (thème sombre)
exemples:
thème clair = green-emeraude-975
thème sombre = green-emeraude-75
Bordure $border-default-grey
Correspondance :
Thème clair et sombre =
$grey-900 (thème clair)
$grey-175 (thème sombre)
$[couleur]-main (thèmes clair / sombre)
exemples :
$green-emeraude-main-632


Titre du tableau
td titre
Lorem ipsum dolor sit amet consectetur adipisicin Lorem ipsum dolor sit amet consectetur
Lorem ipsum d Lorem ipsu
Lorem ipsum dolor sit amet consectetur adipisicin Lorem ipsum dolor sit amet consectetur
Lorem ipsum d Lorem ipsu

                      <div class="fr-table fr-table--green-emeraude">
    <table>
        <caption>Titre du tableau</caption>
        <thead>
            <tr>
                <td scope="col">td
                </td><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>
            <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>
                      
                    

Besoin d'aide ?

L'équipe du DSFR est là pour vous aider.

Retrouvez-la sur :