3 Maneras de Agregar una Tabla a WordPress — Rápidamente y Sin Esfuerzo

Agregar una tabla a WordPress solía ser difícil e involucraba montones de lenguaje de marcado.

HTML fue la forma original de agregar tablas a cualquier sitio web. Luego apareció CSS, lo que lo hizo aún más complicado.

Hoy en día, las tablas ricas en funciones se pueden crear directamente desde WordPress o utilizando servicios externos y luego incrustar la tabla (o incluso una hoja de cálculo) directamente dentro de WordPress.



Las hojas de cálculo siguen siendo tablas, solo que con una funcionalidad ampliada.

Estos son útiles cuando tiene un gran conjunto de datos para presentar de manera lógica. Uno con el que los usuarios pueden interactuar.

Siga leyendo para descubrir los tipos y los métodos más fáciles para crear tablas y mostrarlas a la perfección en su sitio web de WP.
 

Cómo agregar una tabla a WordPress

Con el editor de bloques, haga clic en el icono (+) y escriba 'tabla'. Seleccione el bloque de 'tabla' o un bloque de 'tabla de precios', que incluye estilo CSS. Alternativamente, cree una Hoja de Google y luego insértela en una publicación o página de WordPress, o instale el complemento TablePress para construir su tabla dentro de WordPress.
 

Agregue una tabla de varias columnas en el editor de bloques de WordPress

La tabla regular en el Editor de bloques es sorprendentemente personalizable y fácil de configurar.

Usando el editor de bloques, haga clic en el icono +, escriba 'tabla' y haga clic en el bloque 'tabla'. Aparecerá un mensaje para crear la tabla.

Inserte el número de filas y columnas que desee.

Para fines de demostración, creamos una tabla de clasificación. El tipo que puede querer hacer si estuviera ejecutando un concurso de afiliados para incitar a los afiliados a esforzarse más para ganar premios más grandes del concurso.

Una vez que tenga sus datos en la tabla, haga clic en cualquier lugar para abrir el personalizador en el lado derecho de su editor de WP.

Desde aquí, puede cambiar el estilo, agregar un encabezado y un pie de página, corregir el ancho de la tabla, dar formato al texto, cambiar los colores de fuente y los fondos, modificar la tipografía, incluidos los tamaños de fuente, y agregar un ancla HTML a su tabla.

Agregar un ancla es útil para vincular directamente a su tabla en WordPress en lugar de una publicación de blog.

Las anclas también son útiles para los correos. Dado que las tablas son una forma rápida de transmitir datos, puede resultar útil enviar por correo los cambios de precios con un enlace directo a la tabla.
Los destinatarios pueden hacer clic en el enlace para ir directamente a la tabla de precios.
 

Agregue una tabla de precios fácilmente

Una característica interesante del editor de Gutenberg (bloque) son los bloques preformateados. Ahora tiene una tabla de precios de 3 niveles lista para usar.

Haga clic en el símbolo +, escriba 'tabla' en el campo de búsqueda y seleccione la tabla de precios.

Esto agrega un diseño de 3 columnas con 3 bloques de precios.

El bloque de la tabla de precios consta de varios bloques. Un bloque de encabezado, seguido de un párrafo, un separador, un bloque de lista y, finalmente, un botón.

Si solo desea dos columnas, haga clic en los tres puntos verticales en una columna y seleccione 'eliminar columna'.

Haga clic en cualquier elemento para abrir la barra de herramientas, luego seleccione los tres puntos verticales para realizar cambios en ellos.

Esta es, con mucho, la forma más sencilla que ha existido para agregar tablas de precios con estilo a WordPress sin usar CSS o HTML.

Para aquellos que usan el Editor clásico, desactive el complemento, cree el borrador de la publicación o página usando el Editor de bloques, guárdelo como borrador y luego reactive el complemento del Editor clásico.

Cuando vuelve a editar la publicación o la página, todos los códigos se importan automáticamente.


 

Crear tablas dentro de columnas en HTML

Hace un tiempo, publicamos un tutorial que cubría como crear columnas en wordpress . Parte de eso fue crear una tabla con un diseño de 2 columnas.

Para crear cualquier cosa en HTML en WordPress, debe seleccionar el modo 'texto' en el Editor clásico, o si usa el editor de bloques, agregue el bloque 'HTML personalizado'.

El código para agregar una tabla es…

<table style="width: 100%; height: 48px;" border="”5″" width="”1200″" cellspacing="”50″" cellpadding="”50″">
<tbody>
<tr style="background-color: #fff73f;">
<td style="text-align: center; height: 16px;"><strong>Column Title </strong></td>
<td style="text-align: center; height: 16px;"><strong>Next column title</strong></td>
</tr>
<tr style="height: 16px;">
<td style="height: 300px; text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra venenatis urna, sit amet venenatis erat sagittis sit amet. Donec sit amet sollicitudin elit. Cras ultricies hendrerit arcu, id blandit lacus feugiat non.</td>
<td style="height: 300px; text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra venenatis urna, sit amet venenatis erat sagittis sit amet. Donec sit amet sollicitudin elit. Cras ultricies hendrerit arcu, id blandit lacus feugiat non.</td>
</tr>
</tbody>
</table>

El código anterior crea…


 

Cómo incrustar Hojas de cálculo de Google en WordPress

Una característica interesante pero poco conocida de las Hojas de cálculo de Google es que puede publicarlas en la web y se pueden incrustar en los sitios web de WordPress.

Además, puede configurar la hoja para mostrar actualizaciones en tiempo real.

Primero, diríjase a Google Sheets, seleccione la hoja que desea incrustar. Haga clic en 'archivo', luego seleccione 'compartir', luego 'publicar en la web'.

Un mensaje emergente mostrará opciones para compartir en la web con un enlace directo o a través de una inserción. Seleccione la opción de inserción.

Al hacer clic en la flecha desplegable de 'contenido y configuración publicados', puede configurar los ajustes de privacidad, como quién puede acceder y editar el contenido.

Si desea enviar actualizaciones de la hoja a su hoja incrustada, marque la casilla 'volver a publicar automáticamente cuando se realicen cambios'.

Si tiene una colección de hojas, puede elegir incrustarlas todas como una colección o una hoja individual.

Una vez que haya configurado lo que desea compartir y cómo, haga clic en el botón 'publicar'. Te dará un código de inserción.

Copie el código de inserción y péguelo en el editor de 'texto' en WordPress. Si usa el editor de bloques, use el bloque 'HTML personalizado'.

Presione vista previa antes de publicar porque el código de inserción de Google no tiene tamaños incluidos. El resultado es una pequeña propaganda en una página web.

Dentro del código de inserción, después de donde tiene 'headers=false', deje un espacio y agregue el siguiente código:

style="height:500px;width:1100px">

Los números para la altura y el ancho se pueden cambiar para adaptarse a su tema. Presione vista previa para ver cómo se ve la hoja. Una vez que esté satisfecho con la apariencia, haga clic en publicar.

Como es una hoja de cálculo, que es esencialmente una tabla compleja, los usuarios pueden desplazarse hacia arriba, hacia abajo, a lo ancho y hacer clic para abrir hojas adicionales en una colección si tiene más de una hoja.
 

Cree tablas HTML complejas dentro de WordPress usando el complemento TablePress

El complemento TablePress es uno de los complementos más utilizados en WordPress para crear tablas.

Elimina la necesidad de jugar con el código HTML, lo que hace que la creación de tablas sea más rápida y sencilla.

Para comenzar, vaya a 'complementos', seleccione 'agregar nuevo' y escriba 'tablepress' en el cuadro de búsqueda en la parte superior derecha.

Una vez que se activa el complemento, se agrega un nuevo menú 'TablePress' a la barra lateral izquierda. Haga clic en 'Agregar nuevo' para comenzar a construir su primera tabla.

Algo a tener en cuenta aquí es que las tablas se construyen dentro de la página del complemento. No dentro del editor de WordPress.

Las tablas se crean usando el complemento TablePress, luego se incrustan en las publicaciones y páginas de WordPress usando un código abreviado.

Asigne un nombre a su tabla, luego, en la siguiente pantalla, comience a agregar sus datos.

Una vez que se agregan los datos, desplácese hacia abajo en la página y podrá comenzar a diseñar la tabla. Una vez que lo tenga listo para publicar, haga clic en 'guardar', luego copie el código abreviado.

Puede encontrar el código abreviado en la parte superior de la tabla que está editando o seleccionando 'todas las tablas' en la barra lateral izquierda.

Cargue la página o publicación en la que desea incluir la tabla, pegue el código abreviado, presione vista previa y la tabla se incrustará en el contenido.

El complemento TablePress hace que la creación de tablas en WordPress sea muy sencilla. Además, existe una amplia gama de complementos que amplían la funcionalidad para tablas más potentes con características avanzadas, incluido el uso de PHP.

Actualmente, las extensiones de TablePress se pueden descargar, probar y probar antes de pagar, e incluso en eso, el desarrollador sugiere un monto de donación en lugar de requerir una compra por adelantado.