Tablas Responsivas. Técnicas y Ejemplos
Tabla HTML responsiva
La tabla HTML está desde hace bastante tiempo, obsoleta en términos de su uso para el diseño de una página web. Pero sigue siendo fuerte con respecto a su intención original: Mostrar datos tabulares. Todavía son increíblemente útiles y se han mejorado aún más por los uso de CSS y jQuery.
Aún así, las tablas anchas o muy grandes, no siempre son una gran experiencia en pantallas móviles. Si no se maneja correctamente, las columnas se pueden cortar y por lo tanto ser ilegibles. Afortunadamente hay técnicas que podemos utilizar para hacer las tablas más fáciles de usar en dispositivos móviles. Exploremos algunos enfoques que podemos tomar para asegurarnos de que los datos sean accesibles en cada pantalla. También proporcionaremos un ejemplo de trabajo para que se pueda ver en acción.
Desplazamiento horizontal
He aquí una manera muy fácil de dar acceso a los usuarios móviles a una tabla ancha. La adición de un elemento contenedor con la propiedad overflow-x establecida en auto permitirá el desplazamiento horizontal en pantallas pequeñas. No es la forma más elegante de hacer las cosas, pero al menos el contenido es accesible.
See the Pen Simple Responsive Table by Eric Karkovack (@karks88) on CodePen.
Celdas plegables con cabeceras de tabla reposicionadas
Este método es un poco más fácil de usar que el desplazamiento, aunque más difícil de configurar. En las pantallas móviles, cada celda TD se muestra con un block, apilando uno encima del otro. Luego, usando el atributo data-th y el :before, las cabeceras de las tablas se mueven esencialmente de la fila superior a la izquierda.
See the Pen Responsive Table by Geoff Yuen (@geoffyuen) on CodePen.
A continuación se muestra una toma ligeramente diferente de esta opción. En lugar de utilizar el atributo data-th, los elementos de encabezado de la tabla se definen mediante la propiedad de contenido CSS. Si bien el efecto es esencialmente el mismo, los requisitos para mantener el código son diferentes. Esta solución es probablemente mejor para sitios más pequeños que no contienen muchas tablas.
See the Pen Responsive Table by Alico (@alico) on CodePen.
Cabeceras a la izquierda con desplazamiento horizontal
Aquí vemos un encabezado de tabla thead que está configurado con float:left a través de CSS y permanecen estáticamente posicionados en pantallas pequeñas. Las filas de datos se convierten en columnas. Se utiliza JavaScript para mantener los encabezados de la tabla de la misma altura y alineación que las otras celdas.
See the Pen Responsive Tables by Jason Gross (@JasonAGross) on CodePen.
Consultas de elementos (Element Queries)
Los Element Queries se centran en los requisitos de dimensionamiento de elementos específicos en lugar de sólo las dimensiones de una ventana del explorador. Son experimentales en este punto, (ver más en EQCSS). En el siguiente ejemplo de tabla, las celdas td se organizan en varios diseños de columnas. Todo se basa en el ancho de los elementos de la tabla. Esta es definitivamente una técnica interesante que vale la pena estudiar.
See the Pen Responsive Tables: Grid Layout by Tommy Hodgins (@tomhodgins) on CodePen.
Tablas de datos con plugin jQuery
El plugin jQuery de tablas de datos añade todo tipo de funcionalidad útil a las tablas HTML estándar. Y sus capacidades receptivas son bastante asombrosas. La secuencia de comandos ocultará automáticamente las columnas basándose en el tamaño de la pantalla. Los datos ocultos están disponibles para su visualización con un clic (o toque). También tiene la flexibilidad para dar prioridad a columnas específicas. El ejemplo de abajo muestra una tabla responsiva con todas las letras.
See the Pen Responsive Table with DataTables by SitePoint (@SitePoint) on CodePen.
Las tablas presentan un desafío único para los diseñadores. Se crearon mucho antes de que la red móvil existiera. Pero con un poco de creatividad, puedes construir una gran experiencia de usuario – incluso en la más pequeña de las pantallas.