Cómo crear una tabla en Elementor (4 formas, con pasos)

Conclusiones clave

• Elementor no tiene un widget de tabla en el complemento principal o en Elementor Pro, por lo que una tabla en Elementor proviene de código HTML, contenedores, un complemento de tabla o un widget complementario.
• El widget HTML es la forma de crear una tabla en Elementor sin un complemento: pegar etiquetas de tabla, tr, th y td y agregar un bloque de estilo corto para bordes y relleno.
• Un contenedor Grid puede imitar una tabla, pero una tabla de 3 columnas y 4 filas necesita 12 widgets de editor de texto separados y el resultado no es una tabla HTML real.
• TablePress 3.4 agrega su propio widget Elementor llamado tabla TablePress, y los visitantes pueden ordenar, buscar y paginar sus tablas.
• El widget Master Addons Dynamic Table crea una tabla HTML real a partir de celdas de encabezado y cuerpo en el panel Elementor y apila filas en tarjetas en dispositivos de hasta 768 px de ancho.

Para crear una tabla en Elementor necesita una solución alternativa, porque Elementor no envía un widget de tabla. Los cuatro que funcionan son un widget HTML con su propio código, un contenedor Grid, una tabla TablePress y un widget complementario como Tabla dinámica.

Construimos una tabla de cada una de las cuatro formas en Elementor 4.3 y miramos cada una en un escritorio y en un teléfono.

¿elementor tiene un widget de tabla?

No. Busque la “tabla” en el panel Elementor y los únicos resultados integrados son Tabla de contenido y Tabla de precios, y ambos pertenecen a Elementor Pro. Ninguno de los dos crea filas y columnas de datos. La tabla de precios es una tarjeta de precios única y la tabla de contenido enumera los encabezados de la página.

¿Qué forma debes utilizar?

Elija por qué tan grande es la mesa y quién la editará más adelante.

Forma 1: Crea una tabla en Elementor con el widget HTML

Esta es la forma de crear una tabla en Elementor sin un complemento. Escribes una tabla HTML simple y Elementor la imprime tal como está.

1. Edita la página con Elementor y arrastra el html widget en un contenedor.
2. Pegue el código a continuación en el Código HTML campo.
3. Cambie el texto entre las etiquetas. Cada tr es una fila, cada uno th es una celda de encabezado y cada una td es una célula del cuerpo.
4. Hacer clic Publicar.

<table class="simple-table">
  <thead>
    <tr><th>Plan</th><th>Storage</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Starter</td><td>10 GB</td><td>$5 a month</td></tr>
    <tr><td>Team</td><td>100 GB</td><td>$15 a month</td></tr>
    <tr><td>Business</td><td>1 TB</td><td>$45 a month</td></tr>
  </tbody>
</table>

<style>
.simple-table { width: 100%; border-collapse: collapse; }
.simple-table th, .simple-table td { padding: 12px 16px; border: 1px solid #e4e7ec; text-align: left; }
.simple-table th { background: #101223; color: #fff; }
.simple-table tbody tr:nth-child(even) { background: #f6f6f7; }
</style>

La mesa es ligera y es real table elemento que entienden los motores de búsqueda y los lectores de pantalla. Sin embargo, es más difícil de mantener. Un cliente que quiere agregar una fila tiene que editar HTML y una etiqueta de cierre faltante rompe el diseño.

Forma 2: Construya una mesa con un contenedor Grid

Un contenedor de cuadrícula coloca widgets en filas y columnas, por lo que puede parecer una tabla. Se adapta a un pequeño bloque donde las celdas contienen botones, iconos o imágenes.

1. Agregue un contenedor y configúrelo Diseño de contenedores a Cuadrícula.
2. Conjunto Columnas al número de columnas que necesitas y Filas al número de filas, encabezado incluido.
3. Conjunto Brechas a 0 para que las células se toquen.
4. Arrastra uno Editor de text ingrese a cada celda y escriba su texto.
5. En cada widget abierto Avanzado, atunci adăugați Acolchado y un 1px Frontera. Dale un color de fondo a las celdas del encabezado.

El recuento de widgets crece rápidamente. Tres columnas y cuatro filas ya necesitan 12 widgets, y una tabla de 5 por 10 necesita 50. Los bordes se duplican donde se encuentran las celdas a menos que sintonices cada lado. La salida es un conjunto de divs, por lo que un lector de pantalla no lo anuncia como tabla. Mantenga este método para un puñado de celdas.

Forma 3: Agregue una tabla TablePress a Elementor

TablePress es un complemento de tabla con más de 600.000 instalaciones activas. Construyes la tabla en su propia pantalla de administrador y luego la colocas en Elementor. Es la elección correcta para tablas largas, porque importa archivos Excel, CSV, HTML y JSON y permite a los visitantes ordenar, buscar y buscar entre las filas.

1. Instalar y activar Prensa de mesa.
2. Ir a Prensa de mesa, atunci Agregar nuevo para escribir una tabla, o Importar para cargar un archivo.
3. Guarde la tabla y anote su ID.
4. Edita tu página con Elementor y busca MesaPrensa mesa. Arrastra el widget y elige tu tabla en el Tabla desplegable.
5. Si prefiere un código corto, arrastre el Código corto widget e ingrese [table id=1 /] con tu propia identificación.

El widget no tiene pestaña Estilo, por lo que los colores y las fuentes provienen de la configuración de TablePress y de su propio CSS. En nuestro teléfono de prueba de 390px, la tabla de cinco columnas también pasó por el borde derecho hasta que la encendimos Desplazamiento horizontal en la configuración de la tabla.

Forma 4: Utilice un widget de tabla

Un widget complementario mantiene todo el trabajo dentro de Elementor. Escribes celdas en el panel y estilizas la tabla en la pestaña Estilo, de la misma manera que trabajas con cualquier otro widget. Usaremos el widget de tabla dinámica de Master Addons aquí.

1. Instale complementos maestros y compruébelo Tabla dinámica está activado en la configuración de su widget.
2. Edita la página con Elementor, busca Tabla dinámica y arrástrelo hacia adentro. Comienza con una tabla de muestra de cuatro columnas.
3. Abierto Cabezal de mesa. Adăugați unul Celda de encabezado de tabla por columna y escriba cada una Nombre de la columna.
4. Abierto Cuerpo de mesa. Adăugați unul Celda corporal de mesa por celda, de izquierda a derecha. Encender ¿Nueva fila? en la primera celda de cada fila después de la primera.
5. Para fusionar celdas, abra una celda Opciones pestaña y conjunto Columna de luz o Lapso de fila.
6. Estila el encabezado, el cuerpo y las rayas en el Estilo tab, luego publica.

Cada celda puede contener texto, un icono o una imagen, y los campos de texto aceptan etiquetas dinámicas. ¿mesa responsiva? en la sección Configuración está activada de forma predeterminada, por lo que en dispositivos de hasta 768 px de ancho cada fila se convierte en una tarjeta con los nombres de las columnas como etiquetas.

¿Quieres verlo antes de instalar algo? El Página de tabla dinámica tiene tres mesas en vivo y ocho diseños de demostración que puedes abrir.

La tabla dinámica no clasifica, busca, pagina ni importa archivos. Cada celda se escribe a mano, lo cual está bien para 30 celdas y agotador para 300, por lo que para conjuntos de big data se regresa a la forma 3.

Errores a evitar

• Creación de la tabla en el widget Editor de texto. No tiene botón de tabla, por lo que de todos modos terminas escribiendo HTML en su pestaña Texto. El widget HTML es el lugar más limpio para ese código.
• Uso de un widget de precios para datos. Tabla de precios y Tabla de precios los widgets se crean para planes con un botón de compra. Tienen la forma incorrecta para filas de datos.
• Olvidando los teléfonos. Una tabla de cinco columnas rara vez cabe en una pantalla de 390 px. Decida si las filas deben apilarse, desplazarse hacia los lados o perder una columna.
• Creación de 50 celdas a partir de widgets. Si el método de cuadrícula necesita más de una docena de widgets, cambie a una tabla real.

Preguntas frecuentes

Pensamientos finales

Hay cuatro formas de crear una tabla en Elementor. Utilice el widget HTML para una tabla pequeña y sin complemento, un contenedor Grid para algunas celdas con botones o imágenes, TablePress para datos largos o importados y un widget de tabla cuando desee editar y diseñar la tabla dentro de Elementor.

Si el último encaja, Tabla dinámica es parte de Complementos maestros junto con sus otros widgets.

Lectura relacionada

• Consejos para la tabla de precios de Elementor
• Los mejores complementos de índice para WordPress