Cómo Hacer Una Página

Hacer una Web Profesional con Wordpress

  • Mi Cuenta
  • Contacto
  • Curso GRATUITO de WordPress
  • Suscribirse (10€/mes)
Estás aquí: Inicio / Tablas / Crear tablas responsive y bonitas en WordPress con TablePress

Crear tablas responsive y bonitas en WordPress con TablePress

diciembre 14, 2018 Por Oscar martin Deja un comentario

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!

Publicado en: Tablas Etiquetado como: tabla responsive, Tablepress

Acerca de Oscar martin

Me llamo Óscar y me dedico al Marketing Online. Me gano la vida gracias a internet y a herramientas como Wordpress. ¿Te puedo ayudar? Contáctame

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Carrito

Categorías

Contenido Premium

¿Quieres Aprender WordPress y Ganar dinero? Cópiame

¿Necesitas Ayuda?

  • Contacto
  • Blog

Más Información

  • Condiciones de Uso
  • Condiciones generales de venta
  • Aviso Legal
  • Pólitica de Privacidad
  • Política de cookies

Buscador

Funciono con el Theme Genesis · Acceder

Este sitio web instalará en tu navegador cookies analíticas y publicitarias propias y de terceros si continúas navegando.
Encontrará más información en nuestra Política de Cookies...Configuración de CookiesAceptar
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Siempre activado
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.
Básicamente el blog no funcionará bien si no están activas.
Estas cookies son:
- Comprobación de inicio de sesión.
- Cookies de seguridad imprescindibles.
- Saber si ya has aprobado/rechazado las cookies.
Non-necessary
Esta web utiliza las siguientes cookies adicionales:
- Mautic: Recordar si ya estás suscrito al boletín de noticias.
- Google Analytics: un servicio de analítica web desarrollada por Google, que permite la medición y análisis de la navegación en las páginas web.
GUARDAR Y ACEPTAR