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’informations pour l’utilisateur.

Structure

Il se compose d'une ou plusieurs lignes de contenu - obligatoire.

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

Contenu additionnel

Le tableau est à implémenter comme un véritable tableau avec les <tr> <th> et <td>. Le composant se chargera par lui même de générer le tableau au format du DSFR, pour plus d'informations voir les exemples ci dessous.

Exemples d'utilisation

Tableau avec titre et id personnalisé

colonne 1 colonne 2 colonne 3 Lorem ipsum Lorem ipsum Lorem ipsum

Tableau fixe avec bordure

colonne 1 colonne 2 colonne 3 Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum

Tableau avec couleur et titre en bas

colonne 1 colonne 2 colonne 3 Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum

Tableau de 9 colonnes sans scroll et titre masqué

Le titre du tableau est obligatoire; il peut être caché par les css mais pour l'accessibilité et la restitution vocale présent dans le code (<caption>) par un titre pertinent pour connaitre le contenu du tableau.

Colonne 1 Colonne 2 Colonne 3 Colonne 4 Colonne 5 Colonne 6 Colonne 7 Colonne 8 Colonne 9 Loremipsum Loremipsum Loremipsum Loremipsum Loremipsum Loremipsum Loremipsum Loremipsum Loremipsum Loremipsum Loremipsum Loremipsum Loremipsum Loremipsum Loremipsum Loremipsum Loremipsum Loremipsum

Tableau de 6 colonnes avec taille fixe

Titre long de colonne 1 Titre long de colonne 2 Titre long de colonne 3 Titre long de colonne 4 Titre long de colonne 5 Titre long de colonne 6 Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum

Tableau avec bouton et lien

Nom et Prénom Poste Action Lien Terrieur Alain Chef de bureau Label lien Chemonfisse Tierry Chef de pole Label lien

Règle 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 titre 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 de colonne, afin d'éviter les répétitions dans les cellules de contenu.

Personnalisation

Les couleurs disponibles sont les suivantes: