Cómo crear tablas Responsive en WordPress sin plugins

En este artículo aprenderás a cómo crear tablas responsive en wordpress sin plugins, que carguen rápido y al momento. De esta forma podrás crear tablas que se adapten perfectamente a todos los dispositivos.

tablas Responsive 1

Esto lo vamos a hacer gracias a la web IanrMedia.unl.edu, accede pulsando al enlace antes de seguir con el tutorial, así lo puedes replicar.

El enlace lleva exactamente a su sección “generador de tablas responsive. Dentro de dicha sección podrás ver que tienes diferentes opciones para personalizar la tabla, y esta a su vez, te generará un código html que puedes copiar y pegar en tu página web.

Table Options

Primero que todo vamos a ver cuáles son las opciones y como se utilizan cada una de ellas.

  • Por un lado, vamos a tener a of rows que esto se refiere a cuantas filas quiere que tenga.
  • Luego también vamos a tener of columns que viene siendo para cuantas columnas quiere que tenga.
tablas Responsive 2

En table title vas a poder cambiar el título de la tabla.

  • Bordered table esto es por si quieres que la tabla tenga bordes, es lo habitual.
  • Striped tables es para que tenga las rayas y demás, por defecto está seleccionado también.
  • 100% Width es si quieres que ocupe el ancho completo, es recomendable selecciónalo.
  • Scrollable table es la opción que puedas hacer scroll horizontal con el móvil, esta no se suele habilitar.
tablas Responsive 3

Puedes habilitar otras opciones interesantes como:

  • First row as table header, esto hace que la fila de arriba sea un poco más grande, porque se puede colocar como títulos.
  • First column as table header, en caso de que quieras destacar la primera columna.

Luego, si quieres cambiar la alineación del texto a izquierda, centro y derecha, podrías también modificarlo.

Reset table data

Por debajo tenemos cómo queremos rellenar la tabla, como ves en la imágen yo lo estoy completando con un ejemplo relacionado a “Jugadores y Partidos”.

tablas Responsive 4

¿Cómo queda la tabla en ordenadores?

En desktop podrás observar una preview de cómo quedaría tu tabla en tamaño de pantalla de ordenador.

tablas Responsive 5

¿Cómo queda la tabla en móviles?

También con la opción de mobile, verás como quedaría en dispositivos móviles.

Posiblemente no te deje ver la preview, pero puedes pegarlo en tu web, y ver directamente cómo queda aplicado en la web, visitando el enlace desde tu teléfono móvil o tablet.

HTML Output

Una vez hayas copiado todo el código html generado, te dirijes a la entrada o página dónde quieras añadir dicha tabla.

Ahora añades una línea HTML o si estás en el editor antiguo, te dirijes a la sección de HTML.

tablas Responsive 6

Puedes cargar una Vista previa guarando como borrador, antes de publicar la entrada, para asegurarte de que todo va perfectamente.

Cómo ves, así se vería la talba anterior desde una vista más estrecha (similar a pantalla de móvil).

tablas Responsive 7

Además, añadiendo un poco de código CSS podrías hacer que la tabla se vea mucho más bonita o con otro estilo.

A continuación te adjunto un vídeo para que veas todo lo comentado puesto en práctica.

Te puede interesar...

plataformas para buscar influencers

3 mejores plataformas para buscar influencers (gratis y de pago)

En este artículo, te explico el TOP 3 Mejores Plataformas de Marketing de Influencers. Si quieres buscar influencers para patrocinar una marca o empresa, de cualquier red social como: Instagram, YouTube, TikTok, Twitch, Twitter; pudiendo filtrar por país, y nicho… ¡Este ranking te servirá! TOP 3 mejores plataformas para marketing

Leer más »

Cómo volver al editor clásico en WordPress (2 métodos)

Sabemos que WordPress ha tenido ciertas actualizaciones que han hecho dejar atrás el editor clásico, pero si deseas aún usarlo, existen formas de volver a él. Para muchas personas era más sencillo trabajar en el “Editor Antiguo” de WordPress, considerando que para ciertos artículos es suficiente. Te enseñaremos a continuación

Leer más »
5 mejores plataformas de afiliación

5 Mejores plataformas de marketing de afiliados en 2023

En este artículo, te presento las 5 mejores plataformas de afiliación para ser afiliado y patrocinar productos a cambio de una comisión. A través de… pago CPL, CPA, pago por venta, por acción, o incluso CPC o promociones especiales. También es posible unirte como anunciante y patrocinar productos o servicios,

Leer más »

Los 3 Mejores TEMAS de WordPress RÁPIDOS

En este artículo, te comentaré mi TOP 3 mejores temas de WordPress rápidos (optimizados para Page Speed y Core Web Vitals). GeneratePress Es un tema muy rápido y completo, con versión gratis y versión premium muy muy completa. Sinceramente, es el que más veces escojo. Se adapta a todo tipo

Leer más »

Como habilitar el ShortCode de 2024 en WordPress sin plugins

A continuación, aprenderemos cómo añadir el shortcode de “[.year.]” que se traduce a año actual — en WordPress. Así funciona el ShortCode [-year-] Cómo ves, cuando escribo el shortocde de “year” entre “[….]” en una entrada o página, o dónde quiera… Se transforma al año actual, en el momento que

Leer más »