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 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 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.

 

tabla wordpress optimizada para móviles

Ejemplo de tabla optimizada para dispositivos móviles. En el ejemplo, solo la columna correspondiente a «Juan» está desplegada. El resto están sin desplegar

 

 

 

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

 

datos básicos tabla

Rellenar datos 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”.

 

Añadir columna a la tabla wordpress

Añadir columna a la tabla

 

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.

 

añadir columnas y datos tabla con wordpress

Añadir columnas y datos a la tabla

 

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)