En este vídeo tutorial premium te enseñaremos cómo crear tablas responsive para Divi con Divi Table Maker, un plugin premium que nos ayuda a crear tablas informativas de manera sencilla, y todo con el poder del Divi Builder.

Este es un tutorial pedido por nuestros suscriptores y acá lo traemos. Lo que haremos será una tabla informativa con celdas y columnas, tipo tabla de excel, que nos permitirá mostrar cualquier tipo de información de manera ordenada.

El problema con los otros plugins que ofrecen la creación de esta funcionalidad, es que, en general, el sistema responsive de estás tablas es muy malo. Pues bien, Divi Table Maker lo hace sencillo y todo integrado por supuesto con Divi.

Nunca más tendrás una tabla informativa que no se vea bien en móviles o tables, y además podrás hacerlo de manera rápida e intuitiva con nuestro tutorial.

Acá puedes ver el resultado de los ejemplos que usamos en este tutorial:

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este contenido prémium.

Descarga los recursos mencionados en este tutorial acá abajo 👇 siendo premium ⭐

¿Qué es Divi Table Maker y cuándo usarlo?

Divi Table Maker es un plugin premium de DiviModules que añade un módulo nativo al Divi Builder para crear tablas informativas: comparativas de precios, fichas técnicas, listados de planes, calendarios de eventos, especificaciones de productos. Lo que lo hace destacar frente a cualquier otra solución de tablas en WordPress es una sola feature: su sistema responsive realmente funciona en móvil sin que tengas que tocar CSS.

¿Cuándo conviene usarlo?

• Comparativas de planes o productos: cuando necesitas mostrar 3-5 columnas con features destacadas y precios. Si construyes una tienda completa, complementa con nuestro curso completo de WooCommerce con Divi.
• Fichas técnicas: especificaciones de productos en eCommerce o catálogos.
• Listados con datos repetitivos: horarios, calendarios, ranking de cursos o servicios.

Si solo vas a poner 2 columnas con texto, un bloque de columnas nativo de Divi te alcanza. Table Maker brilla cuando necesitas estructura tabular real con headers, footers, ordenamiento visual y comportamiento responsive sólido.

Por qué Divi Table Maker y no otra opción

Para crear tablas en WordPress + Divi tienes varios caminos, pero ninguno cubre el caso responsive con la misma calidad:

1. HTML puro + CSS custom: posible pero tedioso. Necesitas escribir media queries para que la tabla se transforme en mobile, y mantenerlo cuando cambias el contenido.
2. Plugins genéricos como TablePress o Ninja Tables: funcionan pero no se integran al Divi Builder — la edición vive fuera del flow visual de Divi y el responsive de la mayoría es básico (scroll horizontal en mobile, lo cual es mala UX).
3. Divi Table Maker: módulo nativo dentro del Divi Builder, edición visual completa, opción Table Responsive que reorganiza las celdas en mobile con un layout vertical legible. Es la opción recomendada cuando ya trabajas con Divi.

El plugin es de pago, pero por el tiempo que ahorras en CSS responsive y la consistencia visual con el resto de tu sitio Divi, se amortiza en uno o dos proyectos.

Pasos clave para crear tu primera tabla

Como guía rápida para que puedas escanear el flujo sin reproducir todo el video:

1. Instala el plugin Divi Table Maker desde Plugins → Añadir nuevo → Subir plugin (el .zip está en la zona prémium de este post). Activa el plugin.
2. Edita la página con Divi Builder y añade un nuevo módulo. Verás «Table Maker» en la lista de módulos disponibles — selecciónalo.
3. Configura las columnas y filas iniciales. En la pestaña Content del módulo defines cuántas columnas (Column Count) y filas (Row Count) tiene la tabla. Empieza con números bajos y vas añadiendo desde el editor.
4. Activa Table Responsive en la pestaña Design. Esta es la opción crítica: hace que en mobile la tabla colapse a un formato vertical donde cada fila se muestra como una «tarjeta» con sus headers como labels. Sin esto, la tabla se ve mal en pantallas pequeñas.
5. Define un Min Width razonable (ej. 300px) para que la tabla no se aplaste en pantallas medianas. El plugin agrega scroll horizontal cuando el contenido excede ese ancho, en vez de romper el layout.
6. Personaliza el diseño visual: en Design configuras tipografía de headers/celdas, colores, padding (default 10px funciona bien), bordes y sombras. Mantén el estilo consistente con el resto de tu sitio Divi.
7. Guarda y prueba en mobile. Abre la página en un dispositivo real o en Chrome DevTools modo responsive — verifica que la tabla se reorganice correctamente y que todos los datos sean legibles.

Opciones avanzadas: iconos, botones e imágenes en celdas

Lo que diferencia a Table Maker de tablas planas es que cada celda admite contenido enriquecido vía shortcodes simples del propio plugin. Esto es muy útil para comparativas:

• Iconos (ej. checkmarks o cruces para «incluido / no incluido»): inserta el shortcode [icon name="check" size="32" color="#22c55e"] dentro de la celda. La lista completa de íconos disponibles está en la documentación oficial de DiviModules.
• Botones de acción (ej. «Comprar» en cada plan): usa [button text="Comprar" url="/checkout" target="_blank"]. Define color, ancho y bordes desde los atributos del shortcode.
• Imágenes en celdas: [image number="0"] referencia la imagen N que subes en la pestaña Images del módulo. Útil para mostrar logos de productos en cada fila.
• Combina con filtros y multi-moneda: si tu tabla muestra productos de WooCommerce, considera integrarla con filtros dinámicos de productos y un sistema multi-moneda para audiencias internacionales.

Si combinas íconos + botones + imágenes en una misma tabla obtienes una tabla comparativa de planes profesional, sin tener que escribir HTML ni CSS.

Tips de UX para tablas en mobile

• No más de 5 columnas. Más allá de eso, hasta el modo responsive empieza a quedar saturado. Si necesitas más, plantea dividir la información en dos tablas o usar tabs.
• Headers cortos y claros. En mobile cada header se convierte en label de cada celda — si son muy largos, ocupan demasiado espacio vertical.
• Destaca la columna principal. Si es una comparativa de planes, usa un color de fondo distinto en la columna del plan recomendado para guiar la decisión visualmente.
• Usa íconos en lugar de «Sí / No». Un checkmark verde y una X gris se leen más rápido que palabras, especialmente en pantallas pequeñas.
• Prueba el orden de columnas en mobile. Recuerda que en responsive la primera columna se muestra como label y el resto como valores — pon los datos más importantes en columnas tempranas.

Preguntas frecuentes

¿Funciona Divi Table Maker con Divi 5?

Sí. DiviModules mantiene actualizado el plugin para Divi 5 — el módulo Table Maker funciona dentro del nuevo Divi Builder sin cambios en el flow de edición. Si actualizas a Divi 5 con el plugin ya instalado, las tablas existentes se mantienen.

¿Las tablas creadas con Table Maker son indexables por Google?

Sí. El plugin genera HTML semántico estándar (<table>, <thead>, <tbody>) en lugar de divs estilizados, así que Google puede leer e indexar los datos. Esto es importante si quieres que la tabla aparezca en featured snippets o resultados enriquecidos.

¿Puedo importar datos desde un Excel o CSV?

Por ahora Table Maker no tiene importador directo de CSV. Si tienes muchos datos, una alternativa es preparar las celdas en un Google Sheet y luego pegar valores fila por fila — el módulo permite navegación por teclado entre celdas, así que el copy/paste es rápido.

¿Hay alguna alternativa gratuita similar para Divi?

Divi nativo no incluye un módulo de tablas con responsive serio. Las opciones gratuitas (TablePress, Ninja Tables free) hacen el trabajo pero su responsive es scroll horizontal — mala UX en mobile. Si solo vas a hacer una tabla puntual, una opción gratuita alcanza; si vas a iterar, Table Maker amortiza rápido. Otra opción para potenciar Divi con módulos extra es nuestro curso de Divi Toolbox.

¿La tabla pesa mucho en velocidad de carga?

El módulo es ligero — añade pocos KB de CSS/JS específicos. Si tu sitio tiene problemas de Core Web Vitals, no es por Table Maker. Para optimización general de velocidad mira nuestro curso de Optimización de Velocidad con Divi.

¿Listo para crear tu primera tabla?

El plugin .zip y el PDF con la documentación oficial completa están más abajo en la zona prémium de este post. Si todavía no eres prémium en UXDivi, empieza tu suscripción acá y desbloquea este tutorial junto con cientos de recursos descargables — desde $10 USD al mes.

Recursos 👇