Guía Tutorial / Cómo crear Tablas Responsive en WordPress optimizadas para móviles con Ninja Tables

Vamos a ver en este post un tutorial para crear tablas en WordPress y que esté optimizada para dispositivos móviles. Utilizaremos un plugin gratuito que dispone de una versión premium con más opciones.

 

 

ACCEDE A TODOS MIS CURSOS POR SOLO 10 €/MES

VER CURSOS

 

 

 

 

1.- Plugins para crear tablas en wordpress y tablas Responsive optimizadas para móviles

 

Al final me he decantado por el plugin “Ninja Tables” porque es el único que he encontrado con el cual es posible crear una tabla que esté optimizada para dispositivos móviles. No solo que sea posible crear una versión móvil de la tabla, sino que además, está cuidado el diseño móvil.

El plugin Ninja Tables tiene un versión  gratuita y una versión de pago. En principio, con la versión gratuita seguramente te será suficiente crear tu tabla. Pero, siempre tienes la opción de pago con más opciones de personalización de la tabla y las ventajas que ofrece disponer de un soporte.

IR VERSIÓN GRATUITA NINJA TABLES IR VERSIÓN PREMIUM DE NINJA TABLES

 

 

2.- Técnica para crear tablas Responsive en WordPress optimizadas para móviles

 

La manera básica de reconocer una tabla que no está optimizada para dispositivos móviles es que sea necesario desplazar horizontalmente la pantalla a través de una barra de scroll, o sin ella, en el móvil que nos permita visualizar la tabla completa a través de dicho desplazamiento. Es decir, para que una tabla esté optimizada para dispositivos móviles se debe visualizar la tabla sin tener que realizar ningún tipo de desplazamiento horizontal en el móvil. Claro, también debemos poder visualizar correctamente los textos situados en las diferentes celdas de la tabla.

El plugin Ninja Tables permite seleccionar una columna como principal de la tabla, que se visualizará en dispositivos móviles o tabletas inicialmente y ocultar otras columnas de manera inicial, en móviles, pero que se mostrarán en caso de hacer clic en un desplegable.

Podemos establecer que este comportamiento especial solo se aplique a dispositivos móviles y que por el contrario en PC la tabla se muestre siempre con todas sus columnas.

Vamos a ver un ejemplo a lo largo del post.

 

 

 

 

3.- Cómo crear una tabla en WordPress

 

Para crear una tabla con el plugin Ninja Tables iremos en el menú lateral a: “Ninja Tables > All Tables”. A continuación, haremos clic en el botón “Add Table” para crear una nueva tabla. Se nos mostrará una ventana emergente con varias pestañas: “Default, Import table, etc.”. Nosotros nos centraremos en la pestaña “Default” donde rellenaremos los siguientes campos:

 

a.- Table title: nombre de la tabla, que podremos mostrar o no de manera pública, pero que principalmente servirá para diferenciar esta tabla, desde la administración, de otras tablas que pudiéramos haber creado. En el ejemplo que vamos a hacer, la vamos a denominar “Ficha de alumno”

b.- Table description: descripción del contenido que vamos a escribir en la tabla, para que podamos identificar la tabla desde la administración.

 

A continuación, haremos clic en el botón “Add” para crear la tabla

 

 

 

4.- Crear estructura y contenido de la tabla con WordPress

 

Vamos a proceder ahora a crear la estructura + contenido de la tabla. Para eso, iremos columna a columna.

 

 

4.1.- Añadir columna a la tabla

 

Directamente accederás a la pantalla de cración de estructura de columnas y datos. Pero, también puedes acceder desde “Ninja Tables > All Tables” y hacer clic en el enlace “Edit” para editarla y comenzar a darle contenido.

Ya se ha crado la tabla. Desde la pestaña “Table Rows” añadiremos una columna a la tabla haciendo clic en el botón “Add Column”. A continuación, se nos mostrará una ventana emergente con las características de la columna que hemos añadido.

Nos centraremos en la pestaña “Basic Settings” de la columna, donde rellenaremos:

 

a.- Column Name: aquí pondremos el nombre de la columna. Este texto aparecerá en la cabecera o parte superior de la columna. En nuestro caso, será la columna principal de la tabla, que denominaremos “Nombre Alumno”

 

b.- Column key: Este campo se rellenará solo. Lo mejor es que lo dejes tal cual está. Este campo es el identificador de la columna a nivel de la base de datos.

 

c.- Data type: Aquí seleccionaremos el tipo de dato que vamos a introducir en las celdas de esta columna. Podremos elegir entre campos como: Single line text field (línea de texto), Text área (Area de texto), HTML Field (campo para meter código HTML), Numeric Value (campo para introducir números), Data field (campo para introducir fechas), Select Field (solo versión PRO – Selector), Image / File (archivo o imagen – solo versión PRO), Button (botón, solo versión PRO).

En el ejemplo elegiremos “Single line text field” ya que vamos a introducir nombres

 

d.- Responsive Breakpoint: Aquí elegiremos la visibilidad en dispositivos de la columna. Si tienes muy pocas columnas en la tabla (2 o 3) puedes probar a elegir en todas las columnas: “Always show in all devices” (mostrar siempre en todos los dispositivos) y luego mirar como se muestra la tabla en móviles, que es la interface con pantalla más desfavorable.

Si necesitas hacer scroll horizontal en el móvil, significa que la tabla no está optimizada para móviles y debes ir a la solución que a continuación te comento:

Elige en la columna principal de la tabla “Always show in all devices” (En nuestro caso sería la columna “nombre de Alumno”, que es la que estamos creando), y en el resto de columnas elige la opción: “Initial Hidden Movile” (Columna oculta en móvil inicialmente). De esta manera solo se mostrará la columna principal en móviles y el resto serán desplegables. De este modo conseguiremos una tabla totalmente optimizada para dispositivos móviles.

 

Finalmente, haremos clic en el botón: “Add Column”.

 

 

IR VERSIÓN GRATUITA NINJA TABLES IR VERSIÓN PREMIUM DE NINJA TABLES

 

 

4.2.- Añadir datos a la columna de la tabla

 

Una vez creada la columna añadiremos datos a la misma haciendo clic en el botón “Add Data”. Escribiremos el dato de la columna correspondiente a la primera fila y haremos clic en “Add” para añadir otro dato. Y así sucesivamente, hasta que hayamos rellenado todos los datos correspondientes a la columna. Para salir, haremos clic en el aspa situado en la parte superior derecha.

Si queremos editar algún nombre, simplemente tendremos que hacer clic con el botón izquierdo del ratón sobre el dato que queramos editar.

 

 

4.3.- Añadir una nueva columna y datos de la columna

 

Para añadir una nueva columna a la tabla haremos clic en el botón: “Add Column” y seguiremos el proceso descrito en el punto 4.1. ( En el ejemplo, en el resto de columnas seleccoinaremos, en el selector Responsive Breakpoint, la opción “Initial Hidden Movile”, para la optimización móvil)

Una vez creada la columna, rellenaremos los datos de esta siguiendo el apartado 4.2. Aunque, al haber ya una columna creada, podremos rellenar los datos directamente haciendo clic con el botón izquierdo del ratón sobre la fila y columna cuyo dato queramos rellenar.

Repetiremos este proceso una y otra vez hasta que tengamos creadas todas las columnas de la tabla y rellenados todos los datos de cada columna.

 

 

NOTA: Si posteriormente quieres modificar las opciones de configuración de una columna o eliminarla, ve a «NinjaTables > All Tables». Acerca el ratón a la tabla cuyo diseño quieres personalizar y haz clic en «Edit». A continuación, haz clic en la pestaña «Table Configuration»

 

 

4.4.- Previsualización de la tabla

 

Para realizar una previsualización de la tabla, haz clic en el botón: “Preview” situado en la parte superior derecha de la pantalla.

La visualización final, no será exactamente así, en lo que se refiere a sus dimensiones y márgenes, ya que va a depender de donde se inserte la tabla. Pero, la apariencia de la tabla sí será la que se muestra en la previsualización.

Para ver como quedaría la tabla en el móvil desengancha el navegador y reduce su anchura hasta la que podría tener un dispositivo móvil.

 

 

5.- Diseño y estética de la tabla con WordPress

 

Vamos a ver ahora las opciones de diseño que tenemos para la tabla.

Pero, antes de empezar, debes tener claro que existen dos opciones para esto:

a.- Crear un diseño general: Si creamos un diseño general, éste se mostrará por defecto en las tablas que vayamos creando nuevas. Aunque ese diseño general lo podremos modificar con la configuración de diseño específico de la tabla. Para personalizar al diseño general ve a: “NinjaTables > Tools” (Pestaña Global Appearance)

b.- Crear un diseño específico para la tabla que estamos creando: Para personalizar el diseño específico de una tabla ve a: “NinjaTables > All tables”. Edita la tabla cuyo diseño quieras personalizar haciendo clic en “Edit”. Finalmente, ve a la pestaña “Table Design”.

En ambos casos, las opciones de diseño son las mismas ya estemos realizando un diseño general o específico.

IR VERSIÓN GRATUITA NINJA TABLES IR VERSIÓN PREMIUM DE NINJA TABLES

 

 

5.1.- Diseño general de tablas y diseño específico de una tabla

 

Como he comentado, las opciones de personalización del diseño de tablas general y específico son las mismas.

Vamos a ver el diseño específico de una Tabla. Para esto ve a «NinjaTables > All Tables». Acerca el ratón a la tabla cuyo diseño quieres personalizar y haz clic en «Edit». A continuación, haz clic en la pestaña «Table Design»

En la pestaña: “Styling”, situada en la parte derecha de la pantalla, observa que puedes elegir entre tres paquetes de opciones de diseño diferentes: Semantic UI, Bootstrap 4 y Bootstrap 3. Como puedes ver, cada uno tienes opciones de diseño diferentes.

 

 

 

Prueba a ir marcando opciones y las verás reflejadas en la previsualización de la tabla situada en la izquierda de la pantalla. Verás que en cada opción hay un pequeño icono con una “i”. Si pones el ratón sobre él, se mostrará una descripción de esa opción de diseño. Abre el traductor de Google (si no tienes mucha idea de ingles) y ve traduciendo las opciones que no veas claras. Son la mayoría muy intuitivas y se ven claramente en la previsualización de la tabla situada a la izquierda

Fíjate, que también tienes una pestaña denominada: “Other”, donde tienes unas cuantas opciones más. Principalmente, tienes opciones de paginación para establecer cuantas filas de la tabla se deben mostrar en un primer momento y detalles sobre los enlaces a otras páginas para mostrar más filas de la tabla.

Cuando hayas realizado la personalización a tu gusto, haz clic en el botón: “Update settings” para guardar los cambios.

 

 

6.- Inserción de la tabla en una página o entrada de blog WordPress

 

Para insertar una tabla en una página o post, lo primero que debemos hacer es copiar el shortcode de la tabla que queramos insertar. Para esto, iremos a “NinjaTables > All tables”. Fíjate, que hay una columna denominada “ShortCode”. Pues copia el código de la tabla que quieras insertar.

 

 

A continuación, ve a una página o post de WordPress, pega el código y guarda la página. Haz una previsualización de la página y verás como se muestra la tabla. Si usas Divi, también puedes insertar el shortcode en un módulo tipo texto o en un módulo tipo código.