---
url: "/fr/emailify/content/data-tables.md"
description: "Le calque d’élément Data Table personnalisé affiche du texte et des images simples dans un tableau HTML de plusieurs rangées et colonnes."
---

# Ajouter des tableaux de données personnalisés à vos emails

> Le calque d’élément Data Table personnalisé affiche du texte et des images simples dans un tableau HTML de plusieurs rangées et colonnes.

## Ajouter manuellement des calques Data Table à votre design {#manually-adding-data-table-layers-to-your-design}

[Video](/assets/videos/emailify/content/data-table.mp4)

Pour ajouter un calque Data Table, cliquez sur un calque **Column** de votre design, choisissez l’option **Data Table** dans le menu d’ajout rapide en bas du plugin, puis cliquez sur **Add** pour insérer les calques dans votre design.

> **Tip:** **Ajouter des rangées ou des colonnes au tableau de données**. Pour ajouter rapidement des rangées ou des colonnes, copiez-collez les calques Figma de rangée de tableau et/ou de cellule de données créés au départ.

> **Note:** Par défaut, le Data Table s’affiche de la même façon sur desktop et sur mobile : surveillez donc la largeur de votre tableau si vous ajoutez plus de deux ou trois colonnes.

Pour des tableaux compacts d’icônes et de texte ou des rangées façon liste à cocher, sélectionnez le calque **Data Table** principal, cliquez sur **Settings**, activez **Mobile Alignment** et choisissez **Center**. Le tableau exporté est alors centré sur mobile, sans toucher à l’espacement entre icônes et texte : c’est plus fiable que d’ajouter à la main des marges intérieures à gauche et à droite pour approcher un centrage d’un client mobile à l’autre.

## Agrandir les images d’un Data Table sur mobile {#expanding-data-table-images-on-mobile}

Sélectionnez une image dans votre Data Table, ouvrez **Settings** et activez **100% Width Image on Mobile**. Les images de plus de 150px de large dans le design desktop peuvent alors s’agrandir sur mobile pour remplir leur cellule, comme la largeur minimale utilisée pour les images de Column. Les images de 150px de large ou moins gardent leur taille, pour éviter d’étirer les petites icônes.

La vérification de largeur utilise la largeur affichée du calque d’image, et non celle d’un composant principal imbriqué. Les remplacements explicites de largeur ou de hauteur sur mobile sont prioritaires. Pour que l’image remplisse une rangée empilée, configurez aussi la Data Table Row pour qu’elle empile ses cellules sur mobile.

## Importer un Data Table depuis l’URL d’une Google Sheet ou un fichier CSV/Excel {#importing-a-data-table-from-google-sheet-url-or-csv-excel-file-data}

[Video](/assets/videos/emailify/content/import-spreadsheet-table.mp4)

Si vos données se trouvent déjà dans une Google Sheet ou un fichier CSV/Excel, vous pouvez créer automatiquement un nouveau Data Table qui les contient : cliquez sur un calque **Column** de votre design, puis choisissez l’option **Spreadsheet** dans le menu d’ajout rapide en bas du plugin.

Une fois l’option **Spreadsheet** choisie, collez l’URL d’une Google Sheet _publique_ ou faites glisser un fichier CSV/Excel dans le plugin, puis cliquez sur **Add** pour insérer les calques dans votre design.

> **Tip:** Emailify doit être autorisé à lire le tableur. Dans Google Sheets, cliquez sur **Share** et remplacez **Restricted** par **Anyone with the link** avant de copier l’URL.

## Répéter une Data Table Row en boucle avec des données dynamiques {#looping-a-data-table-row-with-dynamic-data}

[Video](/assets/videos/emailify/content/looping-data-table-row.mp4)

Pour parcourir des données de votre plateforme d’emailing, sélectionnez une **Data Table Row** et ouvrez **Settings**. Ajoutez la syntaxe de boucle dans **Opening Code Wrapper** (par exemple, `{% for product in collection.products %}`) et dans **Closing Code Wrapper** (par exemple, `{% endfor %}`). Emailify insère ces balises autour de l’élément `` de cette rangée dans le HTML exporté.

Une fois les balises d’encadrement ajoutées au calque **Data Table Row**, vous pouvez [renseigner le contenu dynamique](/fr/emailify/content/dynamic#adding-platform-specific-personalization-content) dans les calques de votre rangée selon vos besoins.

> **Tip:** Vous pouvez [appliquer des réglages en masse](/fr/emailify/design/settings#apply-settings-in-bulk) : ouvrez **Settings**, puis sélectionnez dans Figma plusieurs calques Emailify du même type. Chaque réglage que vous modifiez s’applique alors à tous les calques sélectionnés.