---
url: "/es/emailify/content/data-tables.md"
description: "La capa de elemento Data Table te permite renderizar contenido sencillo de texto o imagen en una tabla HTML con varias filas y columnas."
---

# Añadir tablas de datos personalizadas a tus emails

> La capa de elemento Data Table te permite renderizar contenido sencillo de texto o imagen en una tabla HTML con varias filas y columnas.

## Añadir capas Data Table manualmente a tu diseño {#manually-adding-data-table-layers-to-your-design}

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

Para añadir una capa Data Table, haz clic en cualquier capa **Column** de tu diseño, selecciona la opción **Data Table** en el menú de añadido rápido de la parte inferior del plugin y haz clic en **Add** para insertar las capas en tu diseño.

> **Tip:** **Añadir más filas o columnas a la tabla de datos**. Puedes añadir rápidamente más filas o columnas copiando y pegando las capas de Figma de fila de tabla o de celda de datos que se crean al principio.

> **Note:** Por defecto, la Data Table se renderiza igual en escritorio y en móvil, así que ten cuidado con el ancho de la tabla si añades más de un par de columnas.

Para tablas compactas de icono y texto o filas tipo lista de comprobación, selecciona la capa principal **Data Table**, haz clic en **Settings**, activa **Mobile Alignment** y elige **Center**. Así la propia tabla exportada se centra en móvil y se mantiene el espaciado entre icono y texto, algo más fiable que añadir a mano relleno a izquierda y derecha para aproximar el centrado en los distintos clientes de email móviles.

## Ampliar las imágenes de la Data Table en móvil {#expanding-data-table-images-on-mobile}

Selecciona una imagen dentro de la Data Table, abre **Settings** y activa **100% Width Image on Mobile**. Las imágenes de más de 150px de ancho en el diseño de escritorio pueden ampliarse para rellenar su celda de la tabla en móvil, con el mismo ancho mínimo que se usa en las imágenes de Column. Las imágenes de 150px de ancho o menos mantienen su tamaño para no estirar los iconos pequeños.

La comprobación del ancho usa el ancho renderizado de la capa de imagen, no el de un componente principal anidado. Los ajustes explícitos de ancho o alto para móvil tienen prioridad. Para que la imagen rellene una fila apilada, configura también la Data Table Row para que apile sus celdas en móvil.

## Importar una Data Table desde la URL de una hoja de Google Sheets o desde un archivo 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 ya tienes datos en una hoja de Google Sheets o en un archivo CSV/Excel, puedes crear automáticamente una nueva Data Table con los datos de la hoja de cálculo: haz clic en cualquier capa **Column** de tu diseño y selecciona la opción **Spreadsheet** en el menú de añadido rápido de la parte inferior del plugin.

Después de seleccionar la opción **Spreadsheet**, puedes pegar la URL de una hoja de Google Sheets _pública_ o arrastrar y soltar un archivo CSV/Excel en el plugin, y después hacer clic en **Add** para insertar las capas en tu diseño.

> **Tip:** Emailify necesita permiso para leer la hoja de cálculo. En Google Sheets, selecciona **Share** y cambia **Restricted** por **Anyone with the link** antes de copiar la URL.

## Repetir una Data Table Row con datos dinámicos {#looping-a-data-table-row-with-dynamic-data}

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

Para recorrer los datos de tu plataforma de email, selecciona una **Data Table Row** y abre **Settings**. Añade la sintaxis del bucle en **Opening Code Wrapper** (por ejemplo, `{% for product in collection.products %}`) y en **Closing Code Wrapper** (por ejemplo, `{% endfor %}`). Emailify inserta las etiquetas alrededor del elemento `` de esa fila en el HTML exportado.

Cuando hayas añadido las etiquetas envolventes a la capa **Data Table Row**, puedes [rellenar el contenido dinámico](/es/emailify/content/dynamic#adding-platform-specific-personalization-content) dentro de las capas de la fila según necesites.

> **Tip:** Puedes [aplicar ajustes en bloque](/es/emailify/design/settings#apply-settings-in-bulk) abriendo **Settings** y seleccionando en Figma varias capas de Emailify del mismo tipo. Cualquier ajuste que cambies se aplicará a todas las capas seleccionadas.