Todos los sitios web modernos están diseñados para funcionar correctamente en una variedad de anchos de pantalla. En la antigüedad, las tablas se creaban utilizando HTML simple. A medida que el diseño web flexible se ha convertido en el nuevo estándar, las tablas HTML básicas han tenido dificultades para mantenerse al día con las demandas de los sitios web modernos. Debido a que las tablas HTML simples no son responsivas, el texto incluido en ellas es extremadamente difícil de leer en los tamaños de pantalla de los dispositivos móviles, por lo que se utilizan para desarrollar tablas responsivas que adaptan su diseño dependiendo del tamaño de la pantalla en la que se ven. Las consultas de medios HTML y CSS deben utilizarse conjuntamente.
- Solución 1: Las tablas se pueden crear usando Divi Builder.
- Solución 2: ¡Utilice plugin de tabla que incluyan esta funcionalidad de forma predeterminada!
- WP Table Manager
- Interfaz para WP Table Manager
- Conclusión
Las tablas se pueden construir con un diseño legible en todos los tamaños de pantalla para un único conjunto de información que no sea demasiado grande ni diverso, y esto se puede lograr con enfoques básicos de HTML y CSS. Sin embargo, si la tabla está destinada a contener una cantidad considerable de datos, no es fácil crear un diseño legible en dispositivos móviles o pantallas con un ancho inferior a 786 píxeles.
Si el diseñador web que trabaja con HTML y CSS para hacer que una tabla responda a todos los tamaños de pantalla no considera la cantidad de datos, es probable que se encuentre con problemas que afecten significativamente la legibilidad del contenido del sitio. Aquí hay algunas sugerencias que usted, como diseñador de sitios web Divi, puede poner en práctica al intentar crear tablas responsivas manualmente.
Mientras reduce el tamaño de la tabla para acomodar una pantalla más pequeña, necesitará construir múltiples clases CSS, cada una de las cuales tendrá como objetivo una resolución de pantalla particular.
Una solución alternativa que puede utilizar es ocultar columnas específicas de la tabla cuando el tamaño de la pantalla es menor.
Para pantallas más pequeñas, puede incluir desplazamientos horizontales o verticales en los encabezados y pies de página de la tabla.
Cree una tabla única que pueda ampliarse para adaptarse a todos los tamaños de pantalla y amplíe la tabla para que el material sea más legible.
Estas soluciones exigen una cantidad significativa de esfuerzo y los requisitos pueden diferir según el contenido y el tamaño de la pantalla.
Solución 1: Las tablas se pueden crear usando Divi Builder.
Elegant Themes ha producido un tutorial para demostrar cómo construir tablas responsivas utilizando las funciones integradas de Divi. Compruébalo aquí. Han agregado capacidades de desplazamiento horizontal a las columnas que desbordan el contenedor de la tabla, lo que permite que la tabla responda mejor a la entrada del usuario. Puede obtener más información visitando la página del tutorial:
Solución 2: ¡Utilice plugin de tabla que incluyan esta funcionalidad de forma predeterminada!
Crear una tabla responsiva para su sitio web Divi ya no es un problema, gracias a la abundancia de soluciones plugin GRATUITAS disponibles en el repositorio. Sin embargo, es un poco complicado encontrar plugin de tabla que tengan opciones integradas de capacidad de respuesta móvil. Los plugin populares como wpDataTables no tienen esta función como opción gratuita.
En este artículo, consideramos uno de los mejores plugin WP Tabe Builder.
WP Table Manager
WP Table Manager es el único plugin de tablas de WordPress que brinda una interfaz de hoja de cálculo completa para administrar tablas. Cree una tabla, seleccione un tema y comience a editar tablas tan pronto como termine de crearlas. Se beneficiará de un conjunto completo de potentes funciones de edición de tablas, que incluyen edición de celdas HTML, copia de tablas, cálculo y sincronización con Excel, Google Sheets y Office 365; es tan simple como hacer clic en una celda y editar datos con o sin la ayuda de un editor de texto visual para que el usuario final modifique una tabla.
WP Table Manager le permite diseñar tablas atractivas y responsivas utilizando una interfaz visual sencilla. Es de uso gratuito. Una vez que lo haya activado, será enviado a la guía de configuración. Sigue los procedimientos y haz los ajustes necesarios a tu gusto. Como por arte de magia, has creado una hermosa mesa que se muestra bellamente en todos los dispositivos de cualquier tamaño. Luego todo lo que tienes que hacer es copiar el shortcode y pegarlo en la página donde quieres que aparezca. Actualmente, el creador ofrece siete elementos (texto, imagen, lista, botón, calificación de estrellas, HTML personalizado y código corto) que puede arrastrar y soltar en marcadores de posición de la tabla utilizando la función de arrastrar y soltar. Se pueden utilizar para crear varios tipos de tablas, como tablas de comparación de productos, tablas de precios, tablas de listas, etc.; Este es el plugin Table que descubrimos durante nuestra investigación como el más amigable para los principiantes. Tenga en cuenta que la versión actual no tiene un campo de búsqueda ni ningún otro tipo de función de filtrado. Además, si tiene la intención de ingresar o administrar muchos conjuntos de datos, es posible que esta no sea la opción ideal. Para este tipo de escenario de uso, Visualizer o Tablepress son excelentes opciones.
Interfaz para WP Table Manager
Puede incluir el shortcode en un módulo de código o en un módulo de texto en Divi.
El tema DIVI incluye WP Table Manager .
plugin WP Table Manager responde a la gestión de detalles cuando se trata de manejar tablas;
- Una vez que la opción de filtro esté activada en su tabla, podrá buscar datos en cada columna y filtrar toda la tabla. También funciona en tablas enormes, incluida la paginación.
- La flecha hacia arriba y hacia abajo que se presenta en cada columna organizará los datos de su tabla. El orden de datos de tablas también funciona en tablas grandes, incluida la paginación.
- Una vez que haya construido su tabla con todos los datos que necesita, puede permitir que los usuarios ordenen, pero también puede establecer un orden predeterminado. Esto puede resultar bastante beneficioso cuando la información cambia con el tiempo, ya que puedes ordenar a los corredores después de la carrera por orden de llegada.
- La paginación es necesaria si desea mostrar una tabla grande en la interfaz de su sitio web mientras mantiene los recursos de su servidor. Seleccione una cantidad preestablecida de filas de la tabla, cada página.
También existe una forma abierta de administrar documentos de Excel a través del importador de archivos de Excel WP Table Manager . Sin embargo, sólo puede importar y transformar datos de Excel como una tabla HTML editable o importar el archivo de Excel con su estilo que incluye colores, fondos, tamaño de columna y enlaces.
¡Administre su tabla de Excel y publíquela en su sitio web de WordPress! Puede cargar un archivo de Excel a la mesa a través de la administración de medios de WordPress o un cliente FTP. Luego, seleccione su archivo de Excel e inicie la sincronización desde la configuración de la tabla.
La sincronización entre su tabla de WordPress y el archivo de Excel se puede realizar periódicamente, entre un minuto y un día. El retraso de sincronización automática también se puede definir para evitar actualizaciones no deseadas de tablas públicas de WordPress o para ahorrar recursos del servidor para una tabla enorme.
Después de importar una tabla, todos los datos pueden actualizarse; ¡Esta es solo una tabla HTML ordinaria editable como un plugin ! Hoja de cálculo de WordPress.
Por otro lado, después de crear una tabla ordenada con todos los datos que desee, puede exportarla como un archivo de Excel convencional y, por amp , volver a ejecutar la hoja de Excel actualizada más tarde. Sus usuarios ahora pueden exportar la tabla como una hoja de Excel en la interfaz de WordPress.
WP Table Manager también se sincroniza con Office 365 a través de OneDrive.
La herramienta de importación y exportación de archivos OneDrive Excel está disponible; Ahorre tiempo importando y modificando sus archivos sobre la marcha. ¡Sea aún más productivo con la sincronización de archivos de OneDrive! Seleccione un archivo Excel de Office 365 para sincronizarlo, ajustarlo automáticamente y estará disponible en su sitio web.
WP Table Manager le ayuda a crear e importar pestañas desde la base de datos; ahora incluye una herramienta para generar tablas a partir de una selección de contenido de bases de datos de sitios web, que anteriormente no estaba disponible. Se seleccionan tablas y columnas de la base de datos, se aplican filtros configurables y las tablas se administran a través de la interfaz WP Table manager . Cuando se actualiza la base de datos, ¡su tabla se incrementa automáticamente! Además, tienes a tu disposición opciones de clasificación, filtrado, diseño automático y paginación.
Si no es desarrollador, puede conectar visualmente cualquier material de base de datos a su tabla HTML. Todas las tablas de su base de datos se presentan mientras se genera una nueva tabla a partir del contenido de la base de datos.
La base de datos de su sitio web puede realizar una búsqueda simple y seleccionar sus tablas y columnas; esto es bastante beneficioso en una base de datos enorme. Además, hay un asistente que le ayudará paso a paso con la tabla de la base de datos.
En la etapa final, antes de obtener una vista previa de la tabla de la base de datos, puede escribir su consulta personalizada en las tablas de la base de datos especificadas. Admitimos algunas funciones, como SELECCIONAR, REEMPLAZAR, RENOMBRAR, MOSTRAR, EXPLICAR, DESCRIBIR.
A veces, una tabla de base de datos viene con muchas filas; por lo tanto, esta opción puede ayudar a mostrar una tabla que se ajuste a su pantalla. Además, puede establecer una cantidad predefinida de filas de la tabla, en cada página. Además, también puedes elegir una columna para ordenar toda la tabla de forma predeterminada.
La conexión de la tabla de la base de datos de WordPress no se limita únicamente a las tablas de WordPress. Se pueden conectar todas las tablas que no sean de WordPress pero que estén instaladas en la misma base de datos.
Entre los datos masivos de su tabla, puede crear algunas reglas personalizadas para concentrarse en un objeto específico. Si estás familiarizado con él, puedes jugar con los operadores de bases de datos como >, <, LIKE, IN…
Las tablas de la base de datos que ha creado se pueden editar como cualquier otra tabla (si el usuario tiene acceso a esa característica sensata) (si el usuario tiene acceso a esa característica práctica); Esto es bastante conveniente para editar por lotes algunos datos de la base de datos como, por amp , varias fechas posteriores a la publicación, lo que habría llevado un tiempo si se hubiera hecho una por una.
Conclusión
Las tablas son una de las formas más efectivas de mostrar un conjunto de información. Sin embargo, para una persona menos técnica, crear tablas en una página web es un desafío. Con estos plugin , puede crear fácilmente tablas que se puedan leer en cualquier dispositivo en tan solo unos sencillos pasos. Además, las tablas responsivas seguramente brindarán experiencias generales positivas a los visitantes de su sitio. Entonces, pruébalo y cuéntanos tu experiencia en la sección de comentarios a continuación.
