Todos los sitios web modernos están diseñados para funcionar correctamente en una variedad de anchos de pantalla. Las tablas se crearon usando HTML simple en la antigüedad. A medida que el diseño web flexible se ha convertido en el nuevo estándar, las tablas HTML básicas han tenido problemas para mantenerse al día con las demandas de los sitios web modernos. Debido a que las tablas HTML simples no responden, el texto incluido dentro de ellas es extremadamente difícil de leer en tamaños de pantalla móviles, por lo que se utilizan para desarrollar tablas receptivas que adaptan su diseño según el 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 utilizando Divi Builder.
- Solución 2: ¡Utilice los plugin de tabla que incluyen 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 o 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 en 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 de Divi, podría poner en práctica cuando intente crear tablas receptivas manualmente.
Mientras reduce el tamaño de la tabla para acomodar una pantalla más pequeña, deberá construir múltiples clases de CSS, con cada clase dirigida a una resolución de pantalla particular.
Una solución alternativa que puede hacer 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 sola tabla que se pueda escalar 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 un esfuerzo considerable y los requisitos pueden diferir según el contenido y el tamaño de la pantalla.
Solución 1: las tablas se pueden crear utilizando Divi Builder.
Elegant Themes ha producido un tutorial para demostrar cómo construir tablas receptivas 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 en la página del tutorial:
Solución 2: ¡Utilice los plugin de tabla que incluyen esta funcionalidad de forma predeterminada!
Hacer una tabla receptiva para su sitio web Divi ya no es un problema, gracias a la abundancia de soluciones de plugin GRATUITAS disponibles en el repositorio. Sin embargo, es un poco complicado encontrar plugin tabla que tengan opciones de respuesta móvil integradas. Los plugin populares como wpDataTables no tienen esta función como opción gratuita.
En este artículo, consideramos uno de los mejores el plugin WP Tabe Builder.
WP Table Manager
WP Table Manager es el único plugin tabla 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 permite diseñar tablas atractivas y receptivas utilizando una interfaz visual simple. Es de uso gratuito. Una vez que lo haya activado, será enviado a la guía de configuración. Siga los procedimientos y realice los ajustes necesarios a su gusto. Como por arte de magia, ha creado una hermosa mesa que se muestra a la perfección en todos los dispositivos de cualquier tamaño. Luego, todo lo que tiene que hacer es copiar el código corto y pegarlo en la página donde desea que aparezca. Actualmente, el constructor ofrece siete elementos (texto, imagen, lista, botón, clasificación de estrellas, HTML personalizado y código corto) que puede arrastrar y soltar en los marcadores de posición de la tabla mediante la función de arrastrar y soltar. Estos 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, esta puede no ser 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 código corto en un módulo de código o un módulo de texto en Divi.
El tema DIVI incluye WP Table Manager .
WP Table Manager plugin WP Table Manager responde a la administración de detalles cuando se trata de manejar tablas;
- Una vez que la opción de filtro está activada en su tabla, puede 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 los datos de las tablas también funciona en tablas enormes, 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. Eso puede ser bastante beneficioso cuando la información cambia con el tiempo, ya que puede clasificar 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 hay una forma abierta de administrar documentos de Excel a través del importador de archivos de Excel de WP Table Manager . Sin embargo, solo 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, enlaces.
¡Administre su tabla de Excel y publíquela en su sitio web de WordPress! Puede cargar un archivo de Excel en la tabla 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 con regularidad, entre un minuto y un día. El retardo de sincronización automática también se puede definir para evitar actualizaciones de tablas públicas de WordPress no deseadas o para ahorrar recursos del servidor para una tabla enorme.
Después de importar una tabla, se pueden actualizar todos los datos; ¡Esto es solo una tabla HTML ordinaria editable como un plugin ! Hoja de cálculo de WordPress.
Por otra parte, después de construir una tabla ordenada con todos los datos que desea, es posible exportarlo como un archivo de Excel convencional y, por ej amp le, vuelva a ejecutar la hoja de Excel actualizado 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 de Office 365 Excel para sincronizar, ajustar automáticamente y estará disponible en su sitio web.
WP Table Manager 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 la base de datos del sitio 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 del 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 un 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 hacer una búsqueda simple y seleccionar sus tablas y columnas; esto es bastante beneficioso en una amplia base de datos. Además, un asistente está aquí para ayudarlo con la tabla de la base de datos paso a paso.
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, CAMBIAR NOMBRE, 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, cada página. Además, también puede 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 solo a las tablas de WordPress. Se pueden conectar todas las tablas que no son de WordPress pero que están instaladas en la misma base de datos.
Entre los datos masivos en su mesa, puede crear algunas reglas personalizadas para concentrarse en un objeto específico. Si está familiarizado con él, puede jugar con los operadores de la base 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 sensible) (si el usuario tiene acceso a esa característica práctica); esto es bastante conveniente para editar por lotes algunos datos de base de datos como, por ej amp le, varias fechas posteriores a la publicación que habrían tenido un tiempo si uno realizado por uno.
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, la creación de tablas en una página web es un desafío. Con estos plugin , puede crear fácilmente tablas que sean legibles en cualquier dispositivo en tan solo unos sencillos pasos. Además, las tablas receptivas seguramente brindarán experiencias generales positivas para los visitantes de su sitio. Entonces, pruébalo y cuéntanos tu experiencia en la sección de comentarios a continuación.
