widget: Table

widget Catégories : Basic

Le widget Tableau vous permet d'afficher des données textuelles sous la forme d'un tableau composé de lignes et de colonnes. Vous pouvez ajouter du contenu au tableau en effectuant un copier-coller d'un tableau existant, en utilisant l'éditeur ou en téléchargeant un fichier au format CSV.

Remarque

  • Vous pouvez télécharger un fichier CSV exporté ou copié à partir de Google Sheets ou d'Excel (uniquement pour les langues se lisant de gauche à droite).

  • Le tableau ne peut contenir que du texte et des liens. Utilisez des lignes et des colonnes ou le widget Liste pour créer un tableau avec des images, des boutons ou d'autres widgets.

  • Dans la version 17 de Edge, l'éditeur de tableau ne peut pas être ouvert. Cependant, il fonctionne correctement dans Edge 18.

  • Le tableau peut inclure jusqu'à 150 lignes et 30 colonnes.

  • En cas de connexion aux données, la limite de lignes est la limite du type de collection. Pour plus d'informations, voir Contenu dynamique : Collections.

Contenu dynamique

Le widget peut également afficher des pages dynamiques. Pour plus d'informations, voir Contenu dynamique : options d'affichage et de navigation pour les enregistrements de collection.

Éditeur de contenu

Il existe trois façons d'ajouter des données à votre tableau :

  1. Les saisir dans l'éditeur.

  2. Copier-coller un tableau existant.

  3. Télécharger un fichier au format CSV.

    L'onglet Contenu du menu contextuel du widget Tableau est ouvert et affiche le contenu du tableau. Un bouton Télécharger au format CSV dans le coin supérieur droit.

Utilisez l'option Effacer tout pour effacer toutes les données de votre tableau.

Rédacteur en chef de la conception

  • Avec l'éditeur de design, vous pouvez personnaliser la bordure du tableau, la barre de titre, la couleur d'arrière-plan et le style de texte pour l'en-tête, les lignes et la première colonne. Vous pouvez également personnaliser la direction et l'alignement du texte pour l'ensemble du tableau, mais pas pour des cellules individuelles.

  • La première colonne peut être personnalisée de façon à avoir sa propre couleur de fond, police, taille et couleur.

  • Les couleurs des lignes paires et impaires peuvent également être personnalisées pour faciliter la lecture des données.

  • La largeur des colonnes peut être définie comme uniforme ou dépendant de la largeur du titre (auquel cas les colonnes sont susceptibles de ne pas être égales entre elles).

Sur mobile, vous pouvez sélectionner l'un des affichages suivants :

  • Squish. Il est préférable d'utiliser cette option si vous avez 2 ou 3 colonnes, afin d'adapter votre contenu à la largeur de l'écran.

  • Parchemin. Il est préférable d'utiliser cette option si vous avez de nombreuses colonnes. Vous pouvez également redimensionner le site widget et afficher un défilement vertical si le tableau est trop long.

  • Effondrement. Une autre façon détaillée de présenter vos données, nous vous recommandons de ne pas choisir cette mise en page si vous avez trop de lignes.

Exemples

Ingrédients alimentaires :

Widget de tableau sur un site en ligne rempli de données.

Liste de contacts :

Widget de tableau avec du contenu en direct sur desktop et sur mobile.

Tableau des prix :

Widget de tableau contenant des données sur un site en ligne.

Tableau des arômes :

Widget de tableau contenant des données sur un site en ligne. Les vues pour desktop et mobile sont affichées.

Ajouter des données connectées

Vous pouvez afficher les données d'une collection dans un widget Tableau. Ce widget permet de connecter n'importe quel type de collection : interne, externe, Google Sheets, Airtable ou des images. L'utilisation de tableaux connectés vous permet de créer des sites plus rapidement à l'aide de modèles connectés. Vous pouvez également modifier des données directement dans Google Sheets ou Airtable au lieu de devoir utiliser l'éditeur de contenu du widget Tableau.

Si une page dynamique est connectée à la même collection que le tableau, elle sera automatiquement reliée au tableau. Vous pouvez accéder à l'élément de la page dynamique en cliquant sur la ligne du tableau.

Les tableaux connectés prennent en charge les types de champ suivants :

  • Texte brut

  • Texte brut

  • Image

  • Lien

  • Numéro

  • Date et heure

  • E-mail

  • Sélection multiple

  • numéro de téléphone

Connecter le widget de table

Pour connecter un widget Tableau à une collection :

  1. Effectuez un clic droit sur le widget Tableau.

  2. Dans le menu contextuel, cliquez sur Connecter aux données.

  3. Sélectionnez une collection dans le menu déroulant.

  4. Sélectionnez les champs requis dans la liste déroulante Champs à afficher. Les colonnes seront classées dans le même ordre que celui dans lequel elles ont été sélectionnées.

  5. Cliquez sur Terminé.

Une fois la connexion aux données de la bibliothèque de contenu réussie, le tableau widget sera marqué d'une icône de données connectées (cercle bleu avec deux cercles blancs entrelacés à l'intérieur).