🇫🇷 Système de Design de l’État

Tableaux

Raccourci typographique

Publié le 16/04/2024 | Modifié le 23/09/2024

Réaliser des tableaux simples dans SPIP se fait avec des lignes dont les « cases » sont séparées par le symbole | (le pipe, un trait vertical)

Un tableau permet de présenter une liste structurée de données textuelles et/ou numériques. Il ne faut pas l’utiliser pour tenter de faire de la disposition ou une mise en page de texte. Il permet de simplifier l’analyse et la comparaison d’informations pour l’utilisateur.

Règles d’utilisation

Usages

  • Il est recommandé 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.
  • Les modes “no-scroll” et “layout-fixed”, sont à utiliser uniquement sur des tableaux avec très peu de colonnes, en s’assurant que le contenu ne dépasse pas sur les écrans de petite taille (mobile).

Contenus

  • Synthétisez les contenus à l’intérieur de chaque cellule.
  • Utilisez des titres de colonne clairs et concis.
  • Les titres des 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.

Accessibilité

  • Un tableau doit obligatoirement contenir un titre.

Titre et résumé

Pour respecter le RGAA1, un tableau doit obligatoirement contenir un titre. Pour être complètement accessible, il peut éventuellement contenir un résumé (qui ne s’affichera pas à l’écran, mais sera lu par les lecteurs audio des personnes mal-voyantes). Ces deux informations sont spécifiées entre un double trait vertical || avant le tableau.

Titre du tableau Résumé qui ne s’affichera pas à l’écran mais sera lu par les lecteurs audio
Colonne 1 Colonne 2 Colonne 3
Contenu Contenu Contenu
Contenu Contenu Contenu
Contenu Contenu Contenu
Contenu Contenu Contenu
 
|| Titre du tableau | Résumé qui ne s'affichera pas à l'écran mais sera lu par les lecteurs audio ||
| {{Colonne 1}} | {{Colonne 2}} | {{Colonne 3}} |
| Contenu | Contenu | Contenu |
| Contenu | Contenu | Contenu |
| Contenu | Contenu | Contenu |
| Contenu | Contenu | Contenu |

Notez les doubles pipe || sur la première ligne du tableau permettant de définir le titre et le résumé.

Attention : les pièges classiques avec les tableaux sont :

  • Ne pas avoir le même nombre de | sur une ligne
  • Avoir un espace après le dernier | de la ligne (un moyen simple de vérifier : la touche fin du clavier amène à la fin de la ligne)

Tableaux avec fusion de cellules

Il est également possible de créer des tableaux avec fusion de cellules. Pour effectuer une fusion, deux raccourcis sont disponibles :

  • |<| fusionne avec la cellule de gauche
  • |^| fusionne avec la cellule au dessus
Tableau avec fusion
Colonne 1 Colonne 2 Colonne 3
Ligne 1 Cellule fusionnée avec la suivante
Ligne 2 Cellule fusionnée avec celle du dessous Normale
Ligne 3 Normale
 
|| Tableau avec fusion ||
| {{Colonne 1}} | {{Colonne 2}} | {{Colonne 3}} |
| Ligne 1 | Cellule fusionnée avec la suivante |<|
| Ligne 2 | Cellule fusionnée avec celle du dessous | Normale |
| Ligne 3 |^| Normale |

Personnaliser un tableau avec le raccourci <dsfr-tableau>

Paramètres du raccourci <dsfr-tableau>
Nom du paramètre Valeur par défaut Valeur(s) autorisée(s)
afficher_titre oui oui, non, en_bas Par défaut le titre est affiché en haut a gauche du tableau. Vous pouvez afficher le titre en dessous du tableau ou le cacher (visuellement) afin de l’utiliser uniquement dans le cadre de l’accessibilité.
bordures_entre_chaque_ligne non oui, non Le tableau avec bordures est à privilégier pour améliorer la lisibilité du contenu lorsque celui-ci est dense.
defilement_horizontal oui oui, non Par défaut, sur un écran de petite taille, le tableau s’affiche avec un scroll horizontal. Il est possible de bloquer cette fonctionnalité, mais attention, si il y a trop de colonnes le tableau sera coupé sur la droite.
largeur_des_colonnes_identique non oui, non Permet de fixer la largeur des colonnes du tableau avec la même taille quelque soit leur contenu. Attention aux écrans de petite taille, le tableau aura automatiquement une largeur de « 100% » et ne sera plus « scrollable ».
Tableau avec titre en bas
Colonne 1 Colonne 2 Colonne 3
Contenu Contenu Contenu
Contenu Contenu Contenu
Contenu Contenu Contenu
Tableau avec bordures entre chaque ligne
Colonne 1 Colonne 2 Colonne 3
Contenu Contenu Contenu
Contenu Contenu Contenu
Contenu Contenu Contenu
 
<dsfr-tableau|afficher_titre=en_bas>
|| Tableau avec titre en bas ||
| {{Colonne 1}} | {{Colonne 2}} | {{Colonne 3}} |
| Contenu | Contenu | Contenu |
| Contenu | Contenu | Contenu |
| Contenu | Contenu | Contenu |
</dsfr-tableau>

<dsfr-tableau|bordures_entre_chaque_ligne=oui>
|| Tableau avec bordures entre chaque ligne ||
| {{Colonne 1}} | {{Colonne 2}} | {{Colonne 3}} |
| Contenu | Contenu | Contenu |
| Contenu | Contenu | Contenu |
| Contenu | Contenu | Contenu |
</dsfr-tableau>