Table
Mis à jour aujourd’hui
Le bloc Table affiche un tableau pleine largeur avec défilement horizontal, selon l’un de deux modes mutuellement exclusifs : un tableau nutritionnel automatique ou un tableau personnalisé composé de blocs imbriqués Table head, Table body, Table foot et Table row. Sur les petits écrans, le tableau conserve sa mise en page complète et défile horizontalement au lieu de se transformer en cartes.
Mode tableau nutritionnel
Activez le bouton Activer le tableau nutritionnel pour remplacer les blocs imbriqués par un tableau nutritionnel automatique à deux colonnes. Les en-têtes de colonne proviennent de Titre (par défaut Informations nutritionnelles) et de Libellé de droite (par défaut Pour 100 g).
Créez les lignes dans le champ Informations. Ce champ fonctionne comme suit : séparez un libellé et une valeur par une virgule, utilisez un saut de ligne pour commencer une nouvelle ligne et utilisez un trait d’union pour indenter une ligne.
Une ligne est divisée au niveau de sa première virgule en un libellé et une valeur.
Les lignes vides sont ignorées.
Un trait d’union dans un libellé est supprimé et la ligne correspondante est indentée.
Mode tableau personnalisé
Lorsque le bouton Activer le tableau nutritionnel est désactivé, le bloc Table affiche ses blocs enfants imbriqués. Composez le tableau à partir de trois blocs de section, chacun contenant des blocs Table row, et chaque ligne contenant des blocs de cellule :
Table head affiche le groupe de lignes d’en-tête et accepte les blocs Table row.
Table body affiche le corps principal et accepte les blocs Table row.
Table foot affiche le groupe de lignes de pied de tableau et accepte les blocs Table row.
Chaque Table row affiche une ligne et est composé de blocs Header cell et Data cell.
Paramètres du tableau
Ces paramètres contrôlent l’apparence du bloc Table dans les deux modes.
Paramètre | Description | Par défaut |
|---|---|---|
Activer le thème de couleurs / Thème de couleurs | Applique un thème de couleurs au tableau. Le thème s’applique uniquement lorsqu’il est activé et qu’un thème est sélectionné. | Désactivé / Thème 1 |
Thème d’arrondi des bordures | Arrondit les angles du tableau. | Thème 1 |
Marge supérieure (Ordinateur) / (Mobile) | Espace au-dessus du tableau sur chaque appareil. | 0 |
Types de cellules
Le Type de chaque cellule détermine ce qu’elle affiche, et le champ de valeur correspondant à ce type apparaît uniquement lorsque celui-ci est sélectionné.
Type | Affichage | Par défaut |
|---|---|---|
Texte | Le texte que vous saisissez dans Contenu du texte. | Texte (type par défaut) |
Coche/Croix | Une coche lorsque Coché est activé, une croix lorsqu’il est désactivé. | Coché |
Évaluation | Une évaluation par étoiles basée sur la valeur Évaluation, de 0 à 5. | 5 |
Bouton | Un bouton de style principal créé à partir de Libellé du bouton et Lien du bouton. | Bouton |
Nutri-Score | Une lettre du Nutri-Score basée sur le grade Nutri-Score, de a à e. | a |
Paramètres des cellules
Ces paramètres sont disponibles pour chaque cellule Data cell, en plus de son Type et du champ de valeur spécifique à ce type.
Colonne caractéristique : marque la cellule comme colonne caractéristique. Les cellules des colonnes caractéristiques s’affichent en gras et reçoivent une largeur de colonne de 30 %.
Indenter le texte : indente le texte de la cellule. Cette option s’affiche uniquement pour les cellules de type Texte.
Alignement du texte : aligne le contenu de la cellule à gauche, au centre ou à droite.
Activer le thème de couleurs / Thème de couleurs : applique un thème de couleurs à la cellule. Le thème s’applique uniquement lorsqu’il est activé et qu’un thème est sélectionné.
Cellules d’en-tête
Une Header cell affiche un en-tête de colonne. C’est le seul endroit où vous pouvez mettre en évidence une colonne entière ou afficher un logo. Les lignes peuvent combiner des cellules d’en-tête et des cellules de données ; un tableau comparatif comporte donc généralement une ligne d’en-tête suivie de lignes de données.
Libellé de l’en-tête : texte de l’en-tête de colonne.
Logo : image affichée à la place du libellé de l’en-tête lorsqu’une image est définie.
Mettre la colonne en évidence : met en évidence la colonne, dans la cellule d’en-tête ainsi que dans chaque cellule correspondante du corps et du pied de tableau.
Colonne caractéristique : marque la cellule comme colonne caractéristique. Les cellules des colonnes caractéristiques s’affichent en gras et reçoivent une largeur de colonne de 30 %.
Alignement du texte : aligne le contenu de la cellule à gauche, au centre ou à droite.