Construir una tabla de datos en WordPress generalmente significa luchar con HTML o pegar un código corto que no puedes diseñar. El gratis Widget de tabla dinámica en Complementos maestros para Elementor le permite construir uno visualmente: agregar columnas de encabezado, completar filas y diseñar cada parte desde el panel Elementor. Sin marcado de tabla, sin bloqueo de complementos.
Se adapta a cualquier cosa que pertenezca a una cuadrícula, como directorios de empleados, hojas de especificaciones, horarios o listas de precios. Puede fusionar celdas, agregar íconos a encabezados, dividir las filas y activar un modo responsivo para teléfonos. A continuación se muestra una ejecución de cada configuración, desde las celdas del encabezado hasta las pestañas de estilo.
Qué hace el widget de la tabla dinámica #
El widget crea una tabla HTML estándar a partir de dos repetidores: uno para la fila del encabezado y otro para las celdas del cuerpo. Cada celda es su propio elemento, por lo que controlas el texto, la alineación e incluso los tramos de columnas o filas sin escribir ningún código.
Tiene tres pestañas: Contenido para el encabezado, el cuerpo y la configuración, Estilo para colores y espaciado, y Avanzado para las opciones habituales de Elementor. El resultado es una tabla limpia y responsiva que coincide con su tema.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
- Los datos que desea mostrar, esbozados como columnas y filas.
Cómo agregar el widget de tabla dinámica #
En el editor Elementor, abra el Elementos panel y búsqueda Tabla dinámica, o desplácese hasta la sección Complementos maestros. Arrástrelo a su página. Se carga con una tabla de muestra para que edite desde un diseño funcional en lugar de una cuadrícula vacía.
Configure el encabezado de la tabla #
Abre el Contenido pestaña. El Cabezal de mesa la sección contiene la fila del encabezado. El Cabezal de mesa alternar muestra u oculta el encabezado y el Celda de encabezado de tabla el repetidor contiene un elemento por columna.
Cada celda de encabezado tiene sus propias subtablas de Contenido y Opciones. En Contenido tú configuraste el Nombre de la columna y puede agregar un Icono o un Imagen al lado (Tipo: Ninguno, Icono o Imagen). Usar Agregar artículo para agregar columnas, el ícono de copia para duplicar una y la X para eliminarla.
Rellena el cuerpo de la mesa #
El Cuerpo de mesa la sección contiene las celdas. Cada elemento es una celda y a ¿Nueva fila? alterna marcas donde comienza una nueva fila, para agregar celdas en orden y marcar el inicio de cada fila.
Cada célula del cuerpo también tiene subpestañas de Contenido y Opciones:
- Texto corporal: el contenido de la celda, que también acepta etiquetas dinámicas. Cada etiqueta llena una celda.
- Lapso de columnas y lapso de filas: fusione una celda entre columnas o filas.
- Ancho personalizado: establezca un ancho fijo para esa columna.
- Alineación: izquierda, centro, derecha o justifica dentro de la celda.
- Decoración: subrayado, superpuesto o lineado para el texto de la celda.
Para hacer crecer la tabla, haga clic Agregar artículo, escribe el texto de la celda y enciéndelo ¿Nueva fila? en la primera celda de cada nueva línea. Aquí se agrega una quinta fila de empleados.
Haga que la mesa responda #
El Ajustes la sección tiene un ¿mesa responsiva? alternar. Con él activado, la tabla vuelve a fluir en pantallas pequeñas en lugar de desbordarse, por lo que cada fila se apila en una tarjeta legible en dispositivos de hasta 768 px de ancho, con el nombre de la columna mostrado como una etiqueta. Esta es la configuración que la gente olvida y es por eso que una mesa parece rota en el móvil.
Estila la mesa #
El Estilo la pestaña se divide en Estilo global, Estilo de encabezado de tabla, y Cuerpo de mesa, plus Patrones (una opción profesional). El Estilo global la sección establece el aspecto de toda la mesa.
- Mesa rayada: enciende las rayas de cebra y elige el color de la fila rayada.
- Color de fondo: el color base detrás de las celdas.
- Relleno de celda interior: el espacio dentro de cada celda.
- Tipo de borde y radio de borde: las líneas entre las celdas y las esquinas redondeadas.
Estilo de cabecera y carrocería #
El Estilo de encabezado de tabla la sección establece el fondo, el color del texto, la tipografía y el relleno del encabezado para que la fila superior se separe. El Cuerpo de mesa la sección hace lo mismo con las celdas de datos.
- Color de fondo y color de texto: los colores de las células del cuerpo.
- Tamaño de icono, color de icono y relleno de icono: estilo para cualquier ícono de celda.
- Alineación y tipografía: cómo se asienta y se ve el texto del cuerpo.
El resultado en la página #
Publique o obtenga una vista previa y la tabla se representará con sus columnas, filas y franjas en su lugar, respondiendo en el móvil si lo activó.
Casos de uso comunes #
- Directorios de empleados o equipos con nombres, roles y datos de contacto.
- Hojas de especificaciones comparación de características y valores del producto.
- Horarios y horarios para clases, eventos u horario de oficina.
- Listas de precios eso no necesita un completo tabla de precios.
- Resúmenes de datos sacado de una hoja de cálculo en una cuadrícula con estilo.
Consejos para trabajar con el widget de la tabla dinámica #
- Primero planifique las columnas. Configure cada celda del encabezado antes de llenar el cuerpo para que las filas se alineen.
- Mark New Row solo en la primera celda. Marque el inicio de cada fila, no de cada celda, o el diseño se rompe.
- Encienda la tabla responsiva para teléfonos. Las tablas anchas se desbordan en el móvil a menos que esté activado.
- Utilice rayas para mesas largas. Las filas de cebra hacen que una tabla de datos alta sea mucho más fácil de escanear.
- Mantenga el texto de la celda corto. Las cadenas largas estiran una columna, así que use Custom Width para mantener las cosas uniformes.
Preguntas frecuentes #
¿qué es el widget de tabla dinámica en los complementos maestros?
Es un widget Elementor que crea visualmente una tabla de datos HTML. Agrega columnas de encabezado y celdas del cuerpo a través de repetidores, luego diseña los colores, el relleno, los bordes y las franjas del panel. No hay HTML ni código corto involucrados, y la tabla se puede hacer responsiva.
¿puedo fusionar celdas en la tabla dinámica?
Sí. Cada celda del cuerpo tiene opciones de intervalo de columnas y intervalo de filas en su subpestaña Opciones. Establezca un intervalo para fusionar esa celda en varias columnas o filas, lo cual es útil para encabezados agrupados o filas de resumen dentro de la tabla.
¿la tabla dinámica responde en dispositivos móviles?
Sí. La sección Configuración tiene un interruptor de Tabla responsiva. Con él activado, la tabla vuelve a fluir en pantallas pequeñas para que cada fila se apile en un bloque legible en lugar de desbordar la página, lo que mantiene tablas anchas utilizables en los teléfonos.
¿Puedo agregar filas rayadas a la tabla?
Sí. En la pestaña Estilo, la sección Estilo global tiene un interruptor de tabla a rayas y un color de fondo a rayas. Enciéndalo para agregar rayas de cebra, lo que alterna el color de la fila y hace que las tablas largas sean mucho más fáciles de leer.
¿Puedo agregar íconos a los encabezados de la tabla?
Sí. Cada celda de encabezado tiene una opción Tipo con Ninguno, Icono o Imagen. Elija el icono para elegir uno de la biblioteca de iconos o la imagen para cargar una imagen. El icono se muestra junto al nombre de la columna, lo que ayuda a etiquetar columnas como correo electrónico, teléfono o ubicación de un vistazo.
¿puedo ordenar, buscar o importar un CSV a la tabla dinámica?
No. El widget no tiene clasificación, búsqueda, paginación ni importación CSV. Para ellos, utilice un complemento de tabla de datos como TablePress y coloque su código corto en la página.
Envolviendo #
El Widget de tabla dinámica convierte filas y columnas de datos en una tabla limpia y con estilo sin tocar HTML. Configure sus encabezados, agregue las celdas del cuerpo, marque cada nueva fila y luego diseñe los colores, franjas y bordes para que coincidan con su página. Para diseños de datos relacionados, consulte Widget de tabla comparativa (Pro) y el Widget de tabla de precios, navega por completo Widgets y extensiones de complementos maestros, y comprueba el página de precios por lo que incluye cada plan.
