Crear tablas responsive y bonitas en WordPress con TablePress

Hola chicos, en este vídeo les explicaré como se usa el plugin TablePress, que sirve para hacer tablas en nuestros Post de WordPress.

Suscríbete a mi canal:  

Este Plugin gratuito lo podemos descargar del mismo repositorio de WordPress

descargar tablepress

Además TablePress tiene extensiones muy buenas que también son gratuitas y nos van a ayudar mucho. Una de esas extensiones es Responsive Tables, que hace que nuestras tablas sean Responsivas. Esta extensión es Premium pero la puedes descargar gratuitamente, solo nos piden que hagamos una donación de $9 por todo el trabajo que ellos hacen para mantener este plugin, pero hacer la donación no es obligatorio.

tablepress responsive addon

Las tablas normalmente tienen esta forma:

tabla tablepress

Pero si las hacemos Responsivas se convertirá el encabezado en una columna, de esta forma:

table tablepress responsive

Así, cuando lo veas en un iphone o cualquier dispositivo, la tabla se adaptará y siempre la verás bien.

Vamos a ver cómo se configura Table Press:

Lo primero que tienes que hacer es descargar el Plugin TablePress y su extensión.

plugin tablepress

Una vez instalado, me dirijo a TablePress y crear tabla. Ponemos un nombre a nuestra tabla, si queremos también le podemos agregar una descripción, y elegimos el número de filas y columnas que tendrá nuestra tabla:

tablepress nueva tabla

Le damos en Agregar Tabla y ahora ya podría poner la información. Para mi ejemplo tendría:

agregar tabla tablepress

Debajo me da la opción de mejorar el contenido, si quisiera editar una celda.

Hago clic en Editor Avanzado, me pide que seleccione la celda que quiero editar, la seleccionas y ya podría poner Negrita, subrayado, etc….

editor avanzado tablepress

Si quisiera agregar más filas o columnas a mi tabla, lo puedo hacer en el mismo apartado haciendo clic en:

tablepress columna fila

Una vez que termino de editar mi tabla, le doy a guardar cambios y en la parte superior me muestra el código de identificación. Si yo quisiera ver mi tabla dentro de un Post, tendría que pegar este código.

shortcode tablepress

Abro una entrada y pego el código, el resultado sería el siguiente:

tabla insertada tablepress

Pero podemos darnos cuenta que este no es el formato Responsive

Si yo quisiera convertir mi tabla, debo ir al apartado de la documentación y copiar el código que me indica que debo agregarle: responsive=”all”

shortcode responsive tablepress

Ahora si hago esto, podrás darte cuenta que mi encabezado se convirtió de una fila a una columna

tablepress encabezado fila

Y ya podría verlo en cualquier dispositivo móvil sin que la información se pierda, simplemente haría scroll horizontal para ver todas las celdas que desee.

tablepress scroll

Como podemos ver, esta es una manera de hacer tablas muy chulas.

Espero te haya tan útil como lo ha sido para mi.

Si no estás suscrito a la Zona Premium te puedes dar de alta por 10€/mes aquí

¡HASTA LUEGO!

Deja un comentario