> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.danaconnect.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Cómo Crear Tablas Dinámicas en las Plantillas de Email Usando `` y data proveniente de la Lista de Contactos Las tablas dinámicas son una forma eficiente de presentar datos variables dentro de un email, como podría ser una lista de productos y sus descripciones especialmente personalizadas para el destinatario. En este artículo, te mostramos cómo crear una tabla dinámica utilizando tablas `
` en el HTML y cómo llenar su contenido automáticamente con datos que provienen de la lista de contactos. | Si quieres ver de forma práctica cómo mostrar información dinámica y estructurada en tus emails de **DANAconnect**, puedes complementar esta guía con el curso disponible en **DANAconnect Academy**.

En el curso aprenderás a construir tablas dinámicas a partir de datos provenientes de las listas de contactos, organizando la información en filas y columnas para crear contenidos personalizados para cada destinatario, así como otras formas de contenido dinámico estructurado.

[Ver curso: Cómo crear contenido dinámico estructurado para email](https://academydanaconnect.teachlr.com/#courses-online/como-crear-contenido-dinamico-estructurado-para-email) ### ¿Qué es una Tabla Dinámica? Una tabla dinámica se genera automáticamente utilizando un conjunto de datos que se toma de la lista de contactos. Estos datos se llenan y mapean al momento de la activación de la conversación, permitiendo crear tablas personalizadas sin necesidad de agregar manualmente cada fila y columna. ### ¿Por qué usar tablas dinámicas? * **Automatización**: No necesitas modificar manualmente la tabla cada vez que cambian los productos o sus descripciones; el código lo hace automáticamente. * **Hiper Personalización**: Cada usuario recibe información específica según los datos almacenados en su registro de la lista de contactos. Las tablas se generan automáticamente basadas en la información asociadas a cada contacto, lo que permite entregar contenido altamente relevante y personalizado. * **Organización**: Los datos se presentan de manera clara y estructurada, ideal para listas con detalles, catálogos de productos o informes. * **Flexibilidad**: Puedes ajustar el contenido dinámico según los datos disponibles en la lista de contactos. ![](https://storage.crisp.chat/users/helpdesk/website/20c17c74d739e400/screenshot-2024-10-03-at-92022_1vfg1b.png) ### Estructura del Código para Crear una Tabla Dinámica A continuación, te mostramos cómo crear una tabla dinámica con un ejemplo que presenta una lista de productos y sus descripciones. Esta tabla se llenará automáticamente con datos en formato json provenientes de un campo específico de la lista de contactos. #### Código de Ejemplo: ```html Tabla Dinámica de Productos
Producto Descripción
$item.name $item.description
``` Así se vería la tabla en el editor del nodo de email del Conversation Manager: ![](https://storage.crisp.chat/users/helpdesk/website/20c17c74d739e400/screenshot-2024-10-09-at-11365_1m93zb4.png) ### Explicación del Código #### Paso 1: Definir la Estructura de la Tabla La tabla se estructura utilizando las etiquetas estándar de HTML ``, con un encabezado que contiene las columnas **Producto** y **Descripción**: ```html ``` Esta primera fila define los encabezados de la tabla, que indican el tipo de información que se mostrará en las columnas. #### Paso 2: Usar el Bucle `#foreach` para Llenar la Tabla El bucle `#foreach` permite iterar sobre los datos que provienen de la variable dinámica `$s{product_list}`, que contiene la lista de productos y sus descripciones mapeados desde la lista de contactos al momento de la activación de la conversación. ```html ``` * **`post-block="#end`"** : Indica que la acción asignada a este bloque (en este caso, la etiqueta ) finalizará una vez que dicho bloque se cierre con la directiva #end. Esto significa que todo lo que se encuentra dentro de este bloque será procesado en cada iteración del bucle y terminará con el cierre del bloque de la fila (). * **`$item.name`**: Muestra el nombre del producto. * **`$item.description`**: Muestra la descripción del producto. Cada vez que el bucle se ejecuta, se creará una nueva fila con el nombre y la descripción de un producto en las celdas correspondientes. ### Ejemplo de Datos en la Lista de Contactos La variable `$s{product_list}` podría contener una lista de productos similar a esta: ```json [ { "name": "Tarjeta de Crédito Oro", "description": "Tarjeta de crédito con beneficios premium y acceso a descuentos exclusivos." }, { "name": "Tarjeta de Crédito Platino", "description": "Tarjeta con alta línea de crédito, acceso a salas VIP y programas de recompensas." }, { "name": "Tarjeta de Crédito Cashback", "description": "Tarjeta que devuelve un porcentaje del dinero gastado en compras elegibles." } ] ``` Estos datos serán utilizados para llenar la tabla automáticamente cuando se cargue el template.
Producto Descripción
$item.name $item.description