Composants Jahia > Mise en page > Tableau
Le composant Tableau permet d’organiser de façon concise et lisible un ensemble d’informations sur une page. Grâce à ce composant, les personnes qui visitent le site peuvent trier facilement les données (si vous activez cette option), et accéder rapidement aux informations recherchées. C’est un outil idéal pour structurer des contacts, des prestations, ou des liens utiles de manière compacte et efficace. Sur mobile, toutes les colonnes d’une même ligne sont affichées dans la même case, pour une meilleure lisibilité.
Bonnes pratiques
L’utilisation d’un tableau est fortement recommandée lorsque l’on souhaite représenter des données, c'est-à-dire des informations exprimées sous la forme d’un tableau en 2 dimensions.
Le composant Tableau ne doit pas être utilisé pour mettre en page du texte. On préférera dans ce cas le composant Texte, plus adapté pour un contenu purement textuel.
L'utilisation de l'option "texte en gras" dans la première colonne facilite la lecture du tableau sur un écran de mobile.
Cas d'utilisation
Il existe plusieurs variantes de ce composant :
- Le tableau peut contenir 2 colonnes (par défaut) ou 3 colonnes (en option)
-
Avec en-tête : lorsque l’intitulé des colonnes aide à la compréhension du tableau ou nécessite le tri des colonnes.
-
Sans en-tête : lorsqu’il s’agit d’une liste structurée et que le contenu des colonnes est suffisamment parlant pour se passer d’en-tête
-
Avec un ou plusieurs composants Texte dans une case de tableau, notamment pour afficher du texte mis en forme, des listes ou des liens dans le contenu
-
Avec un ou plusieurs composants People Teaser dans une case de tableau, par exemple pour présenter les membres d’un service
Dans la 1ère colonne, chaque celleule ne peut contenir qu'un composant Texte. Dans la 2ème ou 3ème colonne, chaque cellule peut contenir des composants Texte, Bouton, ou People Teaser (pour présenter des personnes).
Garder à l'esprit que la largeur du contenu des colonnes va s'adapter à leur contenu. Il n'y a pas de paramète permettant de la régler.
Ajout et édition
Exemple de création d'un tableau simple pour afficher les personnes membres d'un service :
- Créer le composant tableau : saisir un titre pour ce tableau et activer l'option "première colonne en gras"
- dans le composant "Texte" de la première colonne, saisir son contenu, non pas dans le champ titre mais dans le champ texte
- Pour saisir les noms des membres du service sur une seule colonne, utiliser le composant "People teaser"
- Pour saisir les noms des membres du service sur deux colonnes, utiliser le composant "Liste de people teaser", puis à l'intérieur de ce composant ajouter les personnes avec le composant "People teaser"
Résultat final de l'exemple réalisé ci-dessus :
Pour ajouter des photos des personnes dans les composants People teaser, utiliser des images carrées, dimensions recommandées 140 x 140 pixels. Le visage de la personne doit être centré.
Vidéo extraite de la formation de mise à niveau Jahia
[ Documentation Jahia: retour au sommaire ]