Cómo crear tablas en WordPress

Publicado: 2023-12-29

Las tablas son esenciales para muchos sitios web. Cuando piensas en tablas, puedes imaginar hojas de cálculo de Excel simples y aburridas. Sin embargo, los sitios de WordPress utilizan tablas de muchas formas interesantes, desde precios y comparaciones hasta listas de funciones y más.

Una vez que sepas cómo crear tablas en WordPress, podrás crear todo tipo de elementos que sean beneficiosos para tu audiencia. Una tabla bien diseñada puede transmitir mucha información o comparar opciones de una manera que sea fácil de entender para los visitantes.

En este artículo, hablaremos sobre por qué tiene sentido usar tablas en WordPress y repasaremos cuatro métodos para crearlas. También le mostraremos cómo importar y diseñar tablas. ¡Así que vayamos directo al grano!

Por qué es posible que desee utilizar tablas en WordPress

Las tablas no son exclusivas de los sitios web de WordPress. Son uno de los elementos centrales de la web y puede encontrarlos en muchos de los sitios web que visita. Eso incluye tiendas en línea, proveedores de alojamiento web, etc.

Las tablas son populares porque le permiten compartir mucha información en un formato simple. Por ejemplo, considere una tabla de precios típica.

tabla de precios para Jetpack

Imagínese si tuviera que describir toda esta información mediante párrafos. No sólo sería un desafío crearlo, sino que los detalles también serían más difíciles de entender para los visitantes.

Por otro lado, la mayoría de la gente entiende intuitivamente cómo funcionan las tablas y eso le permite utilizarlas de forma creativa. Puede colocar información una al lado de la otra y los visitantes sabrán que deben comparar dos o más cosas.

Además de facilitar la presentación de información compleja, las tablas también parecen atractivas. Esto es más importante de lo que cabría esperar, ya que muchos visitantes evitan las páginas con párrafos interminables. Elementos como tablas, imágenes, listas y botones hacen que los sitios web parezcan más interesantes visualmente y menos intimidantes.

Cómo crear tablas en WordPress (4 formas sencillas)

Como ocurre con la mayoría de las tareas en WordPress, hay varias formas de abordar la creación de tablas. El método que elija dependerá del tipo de tabla que desee crear, así como de las herramientas que prefiera utilizar.

Método 1: utilizar el bloque Tabla de WordPress

Puede utilizar el editor de bloques de WordPress para agregar casi cualquier elemento a su sitio web, incluidas las tablas. La ventaja de este enfoque es que no requiere la instalación de herramientas adicionales.

Si está familiarizado con otros tipos de bloques, aprenda a utilizar la Tabla El bloque solo debería tomar un minuto. Para comenzar, abra el editor de bloques y seleccione la opción para agregar un nuevo bloque. busca la mesa opción y haga clic en ella.

agregar un bloque de tabla a una página de precios

Después de seleccionar la tabla bloque, WordPress le preguntará cuántas columnas y filas debe incluir. Establezca los números que desee y haga clic en Crear tabla .

configurar columnas y filas para la tabla

Las tablas no tienen estilos por defecto. Eso significa que verá una cuadrícula en blanco de filas y columnas, lista para que ingrese la información.

tabla vacía con celdas

Si selecciona la tabla bloque, puede acceder a un menú contextual que le permitirá agregar o eliminar filas y columnas, así como formatear el texto dentro.

El menú Configuración del bloque a la derecha del editor incluye opciones para establecer anchos fijos para las celdas, así como agregar secciones de encabezado y pie de página. Así es como se ve una tabla básica de WordPress con encabezados incluidos:

tablas vacías con etiquetas de encabezado

Los estilos La pestaña de la configuración del bloque le permite cambiar entre una cuadrícula predeterminada y una tabla basada en rayas. Así es como se ve este último:

opciones de estilo para una mesa vacía

También puede cambiar el texto predeterminado y el color de fondo de las celdas de la tabla, así como la tipografía y las dimensiones de las celdas. Con un poco de trabajo, las mesas construidas de esta manera pueden parecer simples pero aún así visualmente atractivas.

hermosa mesa con tres colores de columnas

Tenga en cuenta que algunos temas incluirán patrones de bloques para el bloque Tabla con tablas prediseñadas. Eso significa que podrá crear tablas con estilos establecidos y solo preocuparse por agregarles su propio contenido.

Método 2: genere tablas instantáneamente con una herramienta de inteligencia artificial

Si ha experimentado con herramientas de inteligencia artificial como ChatGPT, sabrá que puede pedirles que generen muchos tipos de texto. Eso incluye una tabla simple basada en un mensaje.

Este es un ejemplo de una tabla creada con IA en WordPress. Se creó utilizando Jetpack AI Assistant y Jetpack Blocks:

creando una tabla de precios con el asistente Jetpack AI

Si tiene acceso al Asistente AI de Jetpack, puede usarlo en el editor de bloques seleccionando el Asistente AI bloque (tenga en cuenta que esta es una característica experimental).

el bloque AI Assistant en WordPress

Una vez que seleccione el bloque, podrá ingresar un mensaje. Este mensaje puede pedirle a la IA que genere texto u otro tipo de elementos, incluidas tablas.

Mensaje vacío de Jetpack AI

En el ejemplo anterior, se pidió a la IA que generara una tabla con tres planes para un proveedor de hosting. Cuanto más detalles incluya en su mensaje, más probabilidades tendrá de obtener un resultado con el que esté satisfecho.

Tenga en cuenta que la herramienta de IA no puede acceder a la información de su sitio web ni de la web en general. Eso significa que si le pide que cree una tabla que incluya información sobre la página que ha abierto, no obtendrá los resultados que necesita.

Cualquier tabla que generes usando IA necesitará cierto nivel de edición. Querrá corregir la información e incluir datos que la IA no agregó por sí sola. Aún así, esta puede ser una herramienta útil si se pregunta cómo estructurar una tabla, desea ver un ejemplo de qué tipo de información incluir o simplemente desea iniciar rápidamente el proceso.

Método 3: crear tablas en el editor clásico

Si todavía estás usando el Editor clásico, agregar tablas es un poco más complejo que con bloques. Por un lado, el editor clásico no incluye herramientas ni opciones para agregar tablas a su contenido.

Hay dos formas de evitar esta limitación. La primera es utilizar el editor HTML y crear una tabla manualmente utilizando código. Agregar una tabla usando HTML no es difícil, pero puede llevar un tiempo si eres nuevo en el lenguaje.

Una alternativa más rápida es utilizar una herramienta que le permita crear tablas y generar el código HTML correspondiente para ellas.

creando una nueva tabla con HTML

El ejemplo anterior es de HTML Table Generator. Esta es una herramienta gratuita que le permite crear tablas utilizando un editor simple y luego generar el código HTML correspondiente.

Una vez que tenga ese código, puede ir al Editor clásico y seleccionar el Texto pestaña. Luego, pega el código donde quieras que vaya la tabla.

agregar tabla HTML a WordPress

Cambie al Visual pestaña y verá la tabla completa en lugar del HTML. En ese punto, puedes editarlo directamente.

editar el contenido de una tabla en el Editor visual

Tenga en cuenta que si desea agregar o eliminar filas o columnas (o realizar cualquier otra personalización), deberá regresar al Texto y cambie el código HTML. Si planeas usar tablas en el Editor clásico, necesitarás cierto nivel de comodidad para trabajar con HTML.

Método 4: instalar y utilizar un complemento de tabla de WordPress dedicado

Si no desea utilizar los métodos anteriores para crear tablas, existen alternativas. Por ejemplo, muchos complementos agregan nuevas opciones para crear tablas en WordPress, como TablePress.

Página del complemento TablePress

Tu experiencia variará mucho según el complemento que utilices. Con TablePress, por ejemplo, utilizas un editor de tablas que funciona como una hoja de cálculo.

creando una nueva tabla con TablePress

Este editor le permite reorganizar las celdas mediante un sistema de arrastrar y soltar. Puede hacer clic en cualquier celda para editar su contenido y tendrá acceso a herramientas de formato.

TablePress también admite múltiples funciones que analizaremos en secciones posteriores, incluida la paginación y las capacidades de búsqueda y filtrado. Estas funciones son clave para ayudar a los visitantes a navegar por tablas que contienen grandes cantidades de datos.

Cada tabla que crea con TablePress tiene asignado un código corto único. Puede utilizar ese código abreviado para colocar la tabla en su sitio web. Si usa el editor de bloques, también tendrá acceso a una tabla TablePress bloquear.

agregar el bloque de tabla TablePress a WordPress

Si desea utilizar complementos para crear tablas en WordPress, es mejor experimentar con múltiples opciones hasta que encuentre una que se ajuste a sus necesidades. Tenga en cuenta que la mayoría de los complementos de tablas deben estar activos para que sus elementos funcionen. Eso significa que si decide cambiar de complemento, es posible que algunas de las tablas que ha creado dejen de funcionar y tendrá que rehacerlas.

Cómo importar tablas desde Excel, Google Sheets y plataformas similares

Hay dos formas de importar tablas desde plataformas como Excel y Google Sheets a WordPress. El primer método es utilizar un complemento que ofrezca una herramienta de importación para el tipo de hoja de cálculo con la que esté trabajando.

En la sección anterior, viste cómo usar TablePress. Ese mismo complemento también incluye una opción para importar tablas desde archivos XLSX, CSV, HTML y JSON. Puede acceder a la herramienta de importación del complemento navegando a TablePress → Importar una tabla .

importar una tabla a WordPress

Deberá descargar o guardar la tabla que desea importar en el formato correcto. Una vez que lo haga, puede cargar el archivo usando este importador, seleccionar la opción Agregar como una nueva tabla y hacer clic en Importar .

El complemento traducirá el archivo en una tabla que podrá insertar en su sitio web. También podrá modificar la tabla utilizando el editor integrado del complemento.

editar el HTML de una tabla

Tenga en cuenta que el editor admite HTML e intentará replicar estilos del archivo usando código. El código puede verse desordenado en el editor, pero si obtienes una vista previa, verás el formato de la interfaz.

Otra opción para importar tablas a WordPress es copiarlas y pegarlas. Puede copiar elementos completos de Excel, Google Sheets y software y sitios web similares. Cuando pegas tablas en el editor de bloques, WordPress creará una tabla bloque que incluye el contenido original.

copiar y pegar una tabla en WordPress

Tenga en cuenta que sólo debe copiar y pegar tablas simples. Los estilos y el formato se pueden perder durante el proceso. Para tablas complejas, es mejor utilizar un complemento de tabla que admita la importación de archivos directamente.

Cómo diseñar tablas con CSS

Puede utilizar CSS para aplicar estilos a tablas en HTML. Todas las tablas de WordPress usan HTML y CSS te brinda mucho control sobre el aspecto de cada elemento (si sabes cómo usarlo).

Si está creando tablas usando el editor de bloques, puede ir a la configuración de bloques para cualquier tabla y buscar Avanzado → Clases CSS adicionales. opción.

agregar una clase CSS a una tabla

Esto le permitirá agregar clases a la tabla. Puede asignar estilos CSS a estas clases individuales modificando el archivo style.css de su tema.

Tenga en cuenta que si no sabe cómo usar CSS, aprender lo suficiente para diseñar una tabla de forma creativa puede suponer un esfuerzo importante. En la mayoría de los casos, será mejor que utilices las opciones de estilo integradas del editor de bloques (aunque son limitadas).

Los complementos de tabla también tienden a ofrecer una cantidad significativa de opciones de estilo. Si desea diseñar tablas y darles estilo de arriba a abajo, necesitará usar CSS o complementos, dependiendo de si se siente cómodo usando código.

Mejorar la experiencia del usuario: tres formas de ir más allá de las simples tablas

Agregar tablas simples en WordPress es fácil. Sin embargo, si miras en línea, notarás que muchas tablas incluyen elementos avanzados, como opciones de clasificación o botones. Hablemos de cómo agregarlos a sus tablas.

1. Agregue filtros y funcionalidad de búsqueda.

Las tablas en línea pueden incluir tanta información como necesite. Sin embargo, cuanto más grandes se vuelven las tablas, más difícil resulta navegar por ellas. Es por eso que muchas tablas en los sitios web incluyen funciones de filtro y búsqueda.

filtros y barra de búsqueda en una mesa

Sin estas funciones, puede resultar difícil para los visitantes encontrar la información o los elementos que buscan. Incluso con la paginación, la mayoría de los visitantes no recorrerán varias páginas para identificar una sola entrada.

El editor de bloques no le permite agregar funciones de filtrado o búsqueda a las tablas. Si desea hacer esto, deberá utilizar un complemento de tabla que incluya estas funciones.

Un ejemplo de complemento que hace esto es TablePress. Cuando utiliza el editor de TablePress, puede desplazarse hacia abajo hasta Funciones de la tabla para visitantes del sitio . y marque Buscar/Filtro opción.

opciones para tablas con casillas de verificación

Una vez que habilite la función, aparecerá una barra de búsqueda en una fila encima del resto del contenido de la tabla. Cuando los visitantes utilicen la función de búsqueda, la tabla se actualizará dinámicamente para mostrar los resultados correspondientes.

usando el filtro de una tabla

Tenga en cuenta que otros complementos de tablas pueden abordar el filtrado y la clasificación de manera diferente. Cuando elijas un complemento para usar, asegúrate de que incluya las características que deseas que tengan tus tablas.

2. Cree tablas interactivas agregando botones y enlaces.

Las tablas en WordPress pueden incluir mucho más que texto. Pueden incorporar enlaces, imágenes e incluso vídeo.

Agregar enlaces a tablas es simple. Sólo necesita seleccionar el texto relevante en el editor de bloques y usar el menú de formato para agregar la URL a la que debe vincularse.

agregar enlaces a una tabla

En cuanto a los botones, no podrás colocarlos directamente dentro de las tablas. Pero puedes agregar botones directamente debajo de cada columna o al lado de cada fila. Esto les da a los visitantes una señal visual de que los botones corresponden a elementos específicos dentro de la tabla.

En términos generales, agregar botones a las tablas puede resultar complicado. Tendrás que modificar su diseño para que la ubicación coincida con la mesa y tener en cuenta que los botones pueden moverse en dispositivos más pequeños.

No todos los complementos de tablas ofrecen soporte para botones. Un ejemplo que hace esto es Ninja Tables. Este complemento ofrece un editor de tablas que se parece menos a una herramienta de hoja de cálculo y más a un creador de páginas.

Cuando crea una tabla con este complemento, puede seleccionar de una lista de elementos para arrastrar y soltar, incluidos los botones.

creando una tabla con NinjaTables

Este complemento le brinda control total sobre el estilo de los botones y puede agregarles enlaces. Esto es perfecto para mesas en las que desea incluir un llamado a la acción que solicite a los visitantes que se registren o realicen una compra.

3. Diseñe herramientas de visualización que combinen con sus tablas

Las tablas no son los únicos elementos que puedes usar para visualizar datos en WordPress. Los cuadros y gráficos también son excelentes formas de organizar y mostrar mucha información.

De forma predeterminada, WordPress no incluye herramientas ni bloques que le permitan agregar cuadros y gráficos. Si quieres utilizar este tipo de elementos, tendrás que recurrir a complementos.

Hay muchos complementos de cuadros y gráficos excelentes (y gratuitos) que puedes usar en WordPress. La mayoría de ellos tienen sinergia con tablas, ya que puedes usarlas como conjuntos de datos para generar gráficos adjuntos. Un ejemplo es wpDataTables.

Este complemento le permite crear tablas para su sitio y transformarlas en gráficos o tablas. Cuando crea un cuadro o un gráfico, puede elegir entre una colección de estilos, incluidas columnas, circulares y gráficos de dispersión.

opciones para cuadros y gráficos

A continuación se muestra un ejemplo de dos gráficos circulares generados a partir de datos de una tabla utilizando este complemento:

dos gráficos circulares creados en WordPress

Los cuadros y gráficos pueden ser herramientas efectivas para mostrar datos de una manera más visual que las tablas. Puede leer más sobre cómo usar wpDataTables consultando su documentación.

Solución de problemas comunes de tablas en WordPress

Si planeas utilizar muchas tablas en WordPress, es posible que en algún momento te encuentres con problemas técnicos. Esto es lo que debe hacer si tiene problemas con las tablas de su sitio web.

Explora los beneficios de Jetpack

Descubra cómo Jetpack puede ayudarle a proteger, acelerar y hacer crecer su sitio de WordPress. Obtén hasta un 50% de descuento en tu primer año.

Explorar planes

1. Tu tabla no se muestra correctamente

Si crea tablas utilizando complementos, es posible que en ocasiones se muestren incorrectamente. Muchos complementos de tablas deben permanecer activos o los elementos que cree con ellos dejarán de funcionar. Los complementos que utilizan códigos cortos para colocar tablas son particularmente propensos a este problema.

Si a su tabla le faltan elementos, tiene un diseño roto o no se muestra en absoluto, probablemente se deba a un problema con el complemento fuente. El primer paso para solucionar el problema debería ser ver si hay una actualización disponible para el complemento, consultando la página de descarga o el sitio del desarrollador.

También puedes solucionar este problema desactivando los complementos de tu sitio uno por uno. Es probable que haya un complemento específico que esté causando problemas de compatibilidad con las tablas, e identificarlo le ayudará a solucionar el problema. Asegúrese de realizar esta prueba (y toda la solución de problemas) en un sitio de prueba y primero haga una copia de seguridad de su sitio.

Otra alternativa es exportar los datos de la tabla e importarlos usando un complemento diferente. Esto puede llevar mucho tiempo si su sitio web utiliza muchas tablas, por lo que solo se recomienda como último recurso.

2. Tu tabla no se muestra bien en ciertos dispositivos

Es esencial que cualquier tabla que cree se vea bien, sin importar qué tipo o tamaño de dispositivo utilice un visitante para ver su sitio. Si crea tablas usando el editor de bloques, esto no debería ser un problema. Los bloques responden de forma predeterminada, lo que significa que sus tablas cambiarán de tamaño para adaptarse a la pantalla del visitante.

En algunos casos, esto significará que las columnas o filas se desplazarán hacia abajo. Algunos complementos de tablas también le permiten crear tablas desplazables, para que los visitantes puedan navegar por ellas independientemente de su dispositivo.

Si diseña una tabla que no se adapta a diferentes tamaños de pantalla, es probable que el complemento que está utilizando no responda. La forma más sencilla de probar sus tablas es abrir su sitio en un dispositivo móvil y echar un vistazo.

trabajando para hacer que una mesa móvil responda

Cuantas más filas y columnas haya en la tabla, más difícil será renderizarla en un dispositivo móvil. Si el complemento que estás utilizando no responde, necesitarás encontrar una alternativa, como TablePress o Ninja Tables (discutido anteriormente).

3. Tienes conflictos con los complementos o tienes problemas de importación/exportación

Si está utilizando un complemento de tabla y los elementos que crea dejan de funcionar, podría ser un problema con el complemento en sí. La mayoría de las veces, si un complemento deja de funcionar repentinamente o comienza a mostrar errores, se debe a problemas de compatibilidad.

Es posible que el complemento no sea compatible con otros elementos de su sitio o con la versión de WordPress que está ejecutando. La forma más sencilla de evitar este tipo de problemas es mantener WordPress actualizado, junto con su tema y todos los complementos de su sitio.

Lo mismo se aplica a cualquier problema que encuentre al intentar importar y exportar tablas. Probablemente haya un problema con cualquier complemento o herramienta que esté utilizando para el proceso de importación/exportación. O está roto o es incompatible con algún otro elemento de su sitio.

Si actualizar WordPress y sus complementos no soluciona el error con sus tablas, deberá identificar qué herramienta está causando el problema. Esto significa deshabilitar los complementos uno por uno hasta que sus tablas comiencen a mostrarse correctamente nuevamente. Una vez que identifique la fuente del conflicto, puede decidir si desea conservar el complemento o eliminarlo y buscar una alternativa.

Preguntas frecuentes

En caso de que todavía tenga alguna pregunta sobre cómo crear tablas en WordPress, exploremos algunos temas comunes.

¿Puedo crear tablas en WordPress sin ningún conocimiento técnico?

Si sabe utilizar un software de hoja de cálculo o un editor de texto, puede crear tablas en WordPress. El editor de bloques facilita la creación de tablas sencillas y la adición del contenido que desee.

Otra opción es utilizar el Asistente Jetpack AI. Puede crear tablas completas a partir de un simple mensaje, lo que significa menos trabajo de su parte. Una vez que la tabla esté lista, todo lo que tienes que hacer es editar su contenido.

¿Cómo puedo aprovechar la IA para crear tablas fácilmente en WordPress?

Si tiene Jetpack AI Assistant y Jetpack Blocks, puede usar AI para crear tablas en WordPress. Puedes acceder al Asistente AI bloque usando el editor de bloques y pídale que genere una tabla para usted.

El asistente le permite ajustar el mensaje hasta que esté satisfecho con los resultados. Una vez configurada la tabla, puedes editarla como con cualquier otro bloque en WordPress.

¿Es posible convertir contenido existente en tablas?

Si tiene una página web llena de información, puede hacerla más legible fácilmente convirtiéndola en una tabla. Simplemente comience creando una tabla utilizando el método que prefiera y luego copie los detalles relevantes del contenido existente.

¿Puedo incrustar medios como imágenes y vídeos dentro de tablas?

WordPress le permite incrustar cualquier tipo de contenido que desee en tablas. Eso incluye imágenes, videos, listas, etc.

Si vas a incorporar elementos grandes, ten en cuenta que pueden distorsionar las dimensiones de la mesa. Es posible que tengas que cambiar el tamaño de las imágenes y los vídeos incrustados para asegurarte de que las tablas se vean bien.

¿Existe alguna forma de crear tablas que permitan a los visitantes filtrar u ordenar datos en la interfaz?

WordPress no incluye un filtro ni una opción de búsqueda en tablas de forma predeterminada. Para agregar estas funciones, necesitará utilizar un complemento de tabla que las admita. Si planea crear tablas con grandes conjuntos de datos, podría ser inteligente utilizar un complemento para crearlas en lugar del editor de bloques o clásico.

¿Puedo vincular una base de datos externa para actualizar dinámicamente el contenido de mis tablas de WordPress?

Algunos complementos de tablas le permiten insertar elementos de otras fuentes, como Google Sheets. Estas tablas incrustadas se actualizan automáticamente si el documento fuente cambia.

Es importante tener en cuenta que esta función sólo está disponible en algunos complementos. Diferentes complementos de tablas pueden admitir diferentes fuentes para importar o incrustar tablas.

¿Cómo manejo tablas grandes que pueden resultar engorrosas para los lectores?

Algunos complementos de tablas de WordPress incluyen opciones de paginación. Esto es útil para tablas con docenas o cientos de elementos. Sin paginación, sería imposible navegar por esos elementos.

Si está creando tablas que incluyen muchas entradas, suele ser mejor utilizar complementos para crearlas. Idealmente, estos complementos deberían incluir funciones de paginación, filtrado y clasificación.

¿Cuál es el impacto de las tablas en la velocidad de carga de WordPress?

El impacto de las tablas en la velocidad de carga de su sitio debería ser insignificante. Las tablas son elementos basados ​​en texto, por lo que tienen un impacto mínimo en el rendimiento de su sitio (a menos que les agregue muchos medios).

¿Cuál es la forma más sencilla de empezar a construir tablas ahora mismo?

Si no desea lidiar con bloques o complementos, la forma más sencilla de crear tablas en WordPress es con Jetpack AI Assistant. El asistente puede transformar mensajes en tablas completas dentro del editor de bloques.

Aún deberás seleccionar y agregar el Asistente de IA bloquear manualmente en WordPress. Después de eso, el asistente se hace cargo tan pronto como ingresa un mensaje.

Asistente Jetpack AI: generador de tablas y contenido AI de WordPress

WordPress ofrece varias formas de crear tablas y agregarlas a su sitio web. Puede crear cualquier tipo de tabla que desee y diseñarla para que parezca única mediante bloques, complementos o CSS.

Si desea acceder a una herramienta que puede ayudarlo a generar todo tipo de contenido basado en texto, incluidas tablas, considere usar Jetpack AI Assistant. Puede ayudarle a generar páginas completas de contenido e incluso tablas, ¡todo a partir de un único mensaje!