Cómo agregar tablas interactivas en WordPress sin HTML

La última vez que intenté agregar una tabla a mi blog de WordPress, terminé desechando todo y usando una lista de viñetas.

¿Suena familiar?

Tantos temas impresionantes de WordPress vienen con la capacidad de crear tablas de gran apariencia. Y claro, pueden verse bien al principio, pero no se puede hacer mucho con ellos.

¿Quieres datos filtrables? No

¿Quiere que la mesa responda a los dispositivos móviles? No

¿Quiere importar datos desde un CSV? De ninguna manera.

Estas son las buenas noticias:

Con el plugin adecuado, puede crear tablas interactivas altamente funcionales. El tipo de cosas que te permiten mostrar datos que se pueden filtrar.

Junto con gráficos y todo tipo.

¿Suena bien? Echemos un vistazo a cómo se puede hacer con wpDataTables.

Nota: Si bien este tutorial se centra en tablas interactivas, es posible que le resulte útil nuestro tutorial sobre la creación de tablas receptivas móviles con wpDataTables. Haz clic aquí para echarle un vistazo. Este nuevo tutorial tiene en cuenta la interfaz de usuario actualizada y las funciones adicionales lanzadas recientemente en wpDataTables.

Este plugin le permite crear hermosas tablas sin ningún conocimiento de HTML

wpDataTables es un plugin premium de WordPress que simplifica el proceso de creación y publicación de tablas en su sitio web. Es liviano, intuitivo y hace el trabajo en cuestión de minutos, dejándolo con menos código para leer y más tiempo para bloguear.

Obtener wpDataTables

Uno de los puntos clave de este plugin es que no necesito ningún conocimiento previo de HTML para ponerlo en funcionamiento. Todo se hace dentro de una página de configuración fácil de usar. Para publicar es simplemente un caso de copiar y pegar un código corto y listo.

Para los bloggers y las empresas, esta es una gran noticia porque le permite mostrar una gran cantidad de datos de una manera concisa y fácil de digerir.

Incluso podrías usarlo para:

• Un catálogo de productos
• Cuadros comparativos de productos
• Lista de precios
• Recopilación de datos de los usuarios
• Resultados deportivos
• Seguimiento de su progreso para cualquier cosa que involucre números (por ejemplo, un informe de ingresos de blog)

Las posibilidades son infinitas.

Crear una tabla de principio a fin: una guía paso a paso

Usar el plugin wpDataTables para crear tablas hermosas, claras y completamente funcionales en su sitio web de WordPress es simple.

He aquí cómo empezar:

Paso 1: tenga su archivo listo

A continuación, he creado un ejemplo de documento de Excel para varios gastos aleatorios. Esto incluye varias columnas como fecha, método de pago y costo.

Asegúrese de que sus datos se muestren de manera similar, de lo contrario, el plugin tendrá dificultades para definir las columnas en su tabla.

Paso 2: crea una nueva tabla

Navegue a wpDataTables en el lado izquierdo de su Panel de WordPress.

Al hacer clic en este enlace, accederá a la pantalla de arriba. Aquí es donde creará y agregará su nueva tabla:

Después de hacer clic en el botón "Agregar nuevo", verá esta pantalla. Aquí es donde comenzará a configurar los parámetros de su tabla, para que funcione y se vea de la manera que desea:

Paso 3: define las características de tu mesa

En las tres primeras secciones de la página de configuración de la tabla, puede hacer lo siguiente:

• Crea un título
• Seleccione si desea mostrar el título de su tabla en la página
• Seleccione un tipo de fuente de entrada para su mesa

Estos son sus ajustes de mesa más básicos.

Haga clic en "Cargar archivo" y busque su documento. Las tablas que puede crear pueden ser tan complicadas como las necesite.

Como puede ver, le di a mi tabla un título relevante, seleccioné el tipo de archivo Excel del cuadro desplegable y cargué mi archivo en WordPress.

Más abajo en la página, encontrará más configuraciones para personalizar su tabla:

Estos son:

• Sensible - Permite que su mesa se muestre de manera diferente en computadoras de escritorio, tabletas y móviles
• Desplazable - Le permite desplazarse horizontalmente por la tabla
• Ocultar tabla hasta que la página esté completamente cargada - Útil para cargar páginas lentamente
• Filtrado avanzado - Para mostrar un filtro debajo de cada columna
• Filtrar en formulario - Para un filtro dentro del propio formulario
• Herramientas de mesa - Para opciones como copiar, guardar en Excel y guardar en CSV incrustado en su formulario
• Habilitar clasificación - Esto le permite ordenar sus tablas
• Limitar el diseño de la mesa - Limite el ancho de la mesa al 100% del contenedor principal
• Longitud de la pantalla - Definir cuántas entradas se muestran en una página.

Al hacer clic en "Vista previa", puede ver su tabla y cambiar cualquier configuración que considere necesaria para que tenga el aspecto que necesita.

Una vez que haya seleccionado las opciones que mejor se adapten al tipo de tabla que desea mostrar, es hora de hacer clic en el botón "guardar".

Si desea personalizar aún más sus columnas, una vez que haya hecho clic en "guardar", podrá desplazarse hacia abajo en la página para ver más opciones. La configuración predeterminada se genera automáticamente, sin embargo, con esto puede cambiar el color de cada columna, la columna y el tipo de filtro (como fecha, hora y texto).

A continuación, agregué algunos colores y edité los tipos de columna en texto, número y cadena.

Paso 4: guarde y copie el código corto

Una vez que haya guardado su tabla, haga clic en "Cerrar" y lo dirigirá de nuevo a la página de inicio del plugin. Ahora debería ver su tabla que ha creado, el título y el tipo de su tabla, el código corto para ingresar en su publicación o página y la opción de duplicarla.

Quiero mostrar esta tabla en una página, por lo tanto, necesitaría copiar el código corto y luego navegar a la página que deseo editar.

Paso 5: agregue un código corto a la publicación o la página

Para agregar su tabla a una página, es realmente tan simple como pegar su código corto en el editor de página. Seleccione en qué parte de la página le gustaría mostrar su tabla, pegue su código y continúe creando su contenido:

Paso 6: publicar

Una vez que hayas presionado el botón de publicar en tu página, tu tabla debería verse así. Como puede ver, es claro, consistente, perfectamente alineado y contiene todos mis datos de una manera fácil de navegar:

Las opciones en la parte superior de la tabla permitirán a los usuarios exportar el contenido de la tabla en una variedad de formatos. También puede filtrar los resultados fácilmente en la parte frontal de su sitio.

¿Qué otras tablas puedes crear?

Sin embargo, no solo está limitado a tablas simples basadas en CSV. Las tablas de datos de WP pueden mostrar una amplia gama de datos en múltiples formatos.

A continuación, se muestra un ejemplo de una tabla completamente funcional, sensible y editable con múltiples columnas y opciones.

Esta tabla está basada en MySQL con filtros para ordenar el contenido según las necesidades del usuario:

Esta tabla basada en matrices PHP está serializada e incluye imágenes; esto agrega una dinámica y funcionalidad completamente diferente que muchas tiendas de comercio electrónico encontrarían particularmente útiles:

Tampoco está limitado a solo archivos CSV. WP Data Tables también permite el uso de archivos basados ​​en Excel, lo que le permite hacer uso de las muchas características específicas que vienen con él:

Otras características de wpDataTable que vale la pena mencionar

• Asistente wpDataChart - Le permite transformar sus datos en un gráfico o tabla en unos pocos y sencillos pasos. Actualmente es compatible con 3 motores de renderizado: Google Charts, Highcharts y Chart.js. Encuentre más documentación aquí.
• Formato condicional - Le permite resaltar celdas, filas y columnas según su contenido. Es útil especialmente si la tabla es completamente numérica. Encuentre más documentación aquí.
• Columnas de fórmula - Le permite agregar una columna que se puede utilizar para calcular una cifra basada en los números establecidos en otras celdas. Encuentre más documentación aquí.
• Columnas de fecha y hora - Se utiliza para celdas que contienen fechas y horas. Aparecerán automáticamente en el formato que establezca en la página de configuración. Encuentre más documentación aquí.
• Fila de suma / totales - Utilizado para columnas numéricas, permite calcular la suma de todos los valores. Encuentre más documentación aquí.
• Generador de informes - Es un plugin para wpDataTables. Report Builder crea instantáneamente documentos y hojas de cálculo llenando sus plantillas con datos reales de su sitio de WordPress. Encuentra más documentación aquí.
• Tablas de detalles maestros - Es un plugin para wpDataTables que le permite a usted y a los visitantes de su sitio ver los detalles de cada fila con un simple clic. Encuentre más documentación aquí.

Obtener wpDataTables

Pensamientos finales

Las tablas son una excelente manera de mostrar datos. Y cuando agrega funciones interactivas como el filtrado, mejora mucho las cosas para los visitantes de su sitio web.

Le enseñé cómo crear una tabla interactiva en WordPress cargando datos desde Microsoft Excel (o usando cualquier otra herramienta de hoja de cálculo). Pero hay mucho más que es posible.

Incluso puede convertir cualquiera de sus tablas en tablas o gráficos, y más.

Ahora es el momento de comenzar con su propia mesa, ¡disfrútelo!

Lectura relacionada: 5 plugins de tabla potentes y con capacidad de respuesta móvil para WordPress.

(Divulgación: esta es una publicación patrocinada, pero solo decimos cosas buenas cuando REALMENTE lo decimos en serio. Leer más).