Cómo crear tablas receptivas en WordPress
Publicado: 2023-02-12Las tablas son un elemento de diseño de sitios web que puede ayudarlo a mostrar con elegancia grandes cantidades de información de manera organizada. Funcionan bastante bien en pantallas de computadora tradicionales, pero a menudo pueden crear una experiencia no deseada en dispositivos móviles.
Afortunadamente, existen varias soluciones viables para crear tablas más receptivas. El uso de estas prácticas de diseño receptivo puede mejorar la experiencia del usuario (UX) de su sitio. Esto significa que los visitantes podrán ver y acceder más fácilmente a los datos de sus tablas, independientemente del tipo de dispositivo que utilicen.
En este artículo, veremos qué significa hacer que una tabla responda. Luego veremos dos formas de crear tablas receptivas en WordPress. ¡Vamos a sumergirnos!
¿Qué son las tablas receptivas?
Por lo general, el objetivo de una tabla es mostrar muchos datos de una manera que tenga sentido. Sin embargo, cuando intenta ver una tabla en un dispositivo móvil, las cosas pueden salir mal. Esto sucede porque las filas de la tabla suelen tener muchas columnas más anchas de lo que puede manejar la pantalla.
Cuando crea una tabla receptiva, esencialmente está creando un conjunto de reglas para su tabla de datos original. Estas reglas pueden determinar puntos de interrupción según el tamaño de visualización. Esto significa que si un usuario accede a la tabla en un dispositivo que es más pequeño que su punto de interrupción establecido, el diseño de la tabla responderá reformateando para adaptarse al tamaño de la pantalla.
Las tablas receptivas generalmente se pueden reformatear agregando una barra de desplazamiento o apilando la información. No desea simplemente reducir y abarrotar la información en las celdas a medida que cambia el tamaño de la pantalla, ya que esto puede hacer que la tabla sea ilegible. Afortunadamente, el diseño receptivo no es demasiado difícil de lograr.
Cómo hacer una tabla receptiva (sin un complemento)
Básicamente, existen dos enfoques para hacer que una tabla responda en WordPress. Primero, veremos cómo hacer el trabajo sin un complemento.
Esto requerirá algunos conocimientos de codificación: específicamente, una comprensión de las hojas de estilo en cascada (CSS). También recomendamos trabajar en un entorno de prueba o desarrollo en lugar de en su sitio web en vivo, hasta que diseñe una tabla que funcione de manera confiable.
Paso 1: formatee su tabla para CSS receptivo
En este ejemplo, vamos a decirle a los datos de nuestra tabla de muestra que se reformateen en un punto de interrupción específico. En algunos casos, simplemente puede agregar una barra de desplazamiento a una tabla, pero en realidad vamos a agrupar los datos de la tabla para que aparezcan en un formato más legible que elimine la necesidad de desplazamiento horizontal.
Este es un gran enfoque, ya que el desplazamiento horizontal a menudo puede significar que está viendo los datos de una columna fuera de contexto:
Para que esta tabla funcione mejor, primero deberá asegurarse de que la tabla esté formateada correctamente. Si está creando una tabla con el Editor de bloques, puede hacerlo normalmente y luego agregar los atributos <thead> y <tbody> para asegurarse de que su CSS funcione correctamente:
Una vez que agregue la tabla, puede usar el editor de HTML para ajustar su formato. Su atributo <thead></thead> debe envolver todos los encabezados de sus columnas. Del mismo modo, envolverá todos los datos de la tabla posterior en el atributo <tbody></tbody>.
Una vez que agregue la etiqueta CSS en el siguiente paso, sus hojas de estilo podrán comprender lo que se supone que debe mostrarse como encabezados para cada columna de la tabla y cuál es el cuerpo o el contenido de la celda.
Paso 2: agregue una etiqueta personalizada a su CSS
A continuación, vamos a utilizar un fragmento de código CSS personalizado y el tema de WordPress Twenty Nineteen. Este tema tiene un diseño bastante receptivo como parte de su código nativo, pero nuestros ajustes de CSS lo llevarán aún más lejos.
Dado que todos los temas son diferentes, querrá comprender a fondo la estructura de su tema para implementar con éxito un diseño de tabla receptivo. Algunos temas pueden requerir una biblioteca de JavaScript adicional.
Para nuestro ejemplo, navegaremos a Apariencia > Personalizar > CSS adicional , donde podemos agregar el siguiente código CSS personalizado:
@media screen and (max-width: 600px) { | |
table {width:100%;} | |
thead {display: none;} | |
tr:nth-of-type(2n) {background-color: inherit;} | |
tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;} | |
tbody td {display: block; text-align:center;} | |
tbody td:before { | |
content: attr(data-th); | |
display: block; | |
text-align:center; | |
} | |
} |
Una vez que pegue su propio código en el editor, deberá seleccionar Publicar para que los cambios surtan efecto.
Paso 3: pruebe la capacidad de respuesta de la tabla en WordPress
WordPress tiene una útil función de prueba de pantalla incorporada que le permite probar su contenido en tres tamaños de pantalla diferentes. En la parte inferior de la pantalla donde agregó su CSS personalizado, puede hacer clic en los íconos de la tableta o del teléfono móvil para probar el nuevo estilo de su tabla:
Para este ejemplo, ya creamos una tabla simple que contiene todos los atributos HTML necesarios para trabajar con nuestro CSS. Nuestro punto de interrupción en el CSS está establecido en 600 px, pero eso se puede cambiar para satisfacer sus necesidades.
En lugar de agregar una barra de desplazamiento o aplastar los datos de la tabla, el CSS que agregamos reorganiza los datos en un formato compatible con dispositivos móviles. Esto permite que el usuario de un dispositivo móvil se desplace verticalmente y vea los datos de la tabla en contexto con el resto de las celdas relacionadas.
Cómo hacer una tabla receptiva con un complemento
Si no se siente cómodo personalizando el código o CSS de su tema, hay otra opción. Hay una serie de complementos de WordPress disponibles que pueden ayudarlo a crear un diseño de tabla receptivo para su sitio web.
Paso 1: descarga un complemento
Para comenzar, deberá elegir un complemento. Dado que hay bastantes opciones para diseñar tablas receptivas, destacaremos algunas para que pueda comenzar:
- Ninja Tables : etiquetado como el complemento número uno de WordPress para crear tablas receptivas, viene con más de 100 estilos de tabla para elegir.
- wpDataTables : este es un complemento gratuito con una versión premium, pero la versión lite está repleta de funciones para crear tablas y gráficos ricos e interactivos.
- WP Responsive Table : este es un complemento simple y gratuito que facilita la creación de tablas receptivas que se desplazan horizontalmente en pantallas pequeñas.
Para el resto de este ejemplo, usaremos Ninja Tables para demostrar cómo crear una tabla de datos receptiva en WordPress.
Paso 2: ingrese sus datos
Después de instalar y activar el complemento, podrá pasar directamente a crear una tabla. Puede navegar a NinjaTables > Todas las tablas > Agregar tabla :
Aquí puede agregar una nueva tabla desde cero, o puede importar una tabla desde un archivo. Vamos a crear una tabla desde cero con la opción Agregar tabla . Luego deberá ingresar un título y una descripción para su tabla:
Tendrás algunas otras opciones aquí también. Por ejemplo, si está configurando una tienda de WooCommerce, podrá usar esa información para crear una tabla de WooCommerce.
Una vez que agregue su información, hará clic en Agregar para crear la tabla. Luego deberá comenzar a ingresar datos. Puede seleccionar Agregar columna para configurar la estructura de su tabla:
Tendrá que completar algunos campos para crear su columna. Esto incluye el nombre del encabezado de la columna y el tipo de datos que contiene. También podrá establecer su punto de interrupción receptivo:
Para elegir entre una serie de opciones que determinan cómo responderán sus tablas a diferentes dispositivos, puede acceder al menú haciendo clic en Mostrar siempre en todos los dispositivos :
Una vez que haya creado sus columnas, seleccione Agregar datos y NinjaTables le proporcionará un formulario fácil para que agregue varias entradas a la tabla rápidamente:
Puede dejar marcada la opción Continuar agregando si tiene que realizar varias entradas. Una vez que haya terminado, puede cerrar la ventana y volver a la pantalla de edición de su tabla.
Paso 3: formatea tu tabla
Ahora que tiene una tabla con información, puede explorar la configuración y las opciones de estilo de NinjaTable. Desde la ventana de edición de su tabla, puede acceder a más configuraciones a lo largo de las pestañas superiores y también en el lado derecho de la pantalla:
Tendrá muchas opciones para personalizar el estilo y la apariencia de su tabla, incluidos los colores alternos de las filas de la tabla, el centrado del texto, la ocultación de datos y más.
Paso 4: prueba tu tabla
NinjaTable facilita la prueba de la capacidad de respuesta de su tabla mientras la edita. En la pestaña Diseño de la tabla , encontrará tres opciones para probar la capacidad de respuesta de la pantalla:
Puede seleccionar Escritorio , Tableta o Móvil para ver cómo se vería su tabla en ese tipo de dispositivos.
Cada tabla que creas también viene con un shortcode. Además, puede agregar fácilmente cualquiera de sus tablas al contenido de su sitio web utilizando el bloque NinjaTable que encontrará en la sección Formato del menú Editor de bloques.
Deje que WP Engine lo ayude a mantener su sitio receptivo
La creación de un sitio web que emplee un diseño receptivo sólido no tiene por qué ser un desafío cuando tiene acceso a los recursos adecuados.
Aquí en WP Engine, queremos que pueda brindar la mejor experiencia digital a sus clientes. ¡Vea nuestros muchos planes de alojamiento de WordPress y soluciones para desarrolladores para su próximo proyecto!