En este artículo abarcaremos diferentes opciones para mostrar contenido dentro de tablas html sin perder de vista su correcta visualización en todos los dispositivos si nuestra web es adaptativa. Intentaremos no utilizar frameworks ni lenguajes extras al CSS pero también proponemos opciones para todos.
Dentro de las especificaciones de HTML, desde su primera versión hasta la actual, tenemos un tag que, quizás, es de todos, el que peor uso ha recibido a lo largo de los años.
Se trata de nuestras queridas (y odiadas a partes iguales) TABLAS. Elementos que fueron creados para mostrar datos encuadrados dentro de filas y columnas pero que durante mucho tiempo tomaron el rol de ser la base de la maquetación de nuestra página web.
Si bien su uso para maquetación o como estructura de nuestro documento era un error tan grande como un estadio de fútbol (o dos, si me apuras), creo que todos, en cierto momento de nuestra experiencia como desarrolladores las hemos utilizado de manera errónea... el salto a los divs era complicado, hay que reconocerlo, pero cómo cambiaba todo cuando empezabas a hacer las cosas bien.
Pues bien, dejando de lado esta pequeña introducción y mea culpa del mal uso de las tablas, vamos a ver para qué podemos y debemos utilizar tablas dentro de nuestro documento HTML.
Con el paso de los años, al igual que los usuarios Mac y PC, iOS y Android, etc... se crearon los lados Jedi y Sith del HTML, es decir, quien usaba tablas para maquetar era perseguido por toda la orden Jedi y, creo yo, se creó una mini paranoia en su uso, al punto de llegar, o intentar al menos, maquetar elementos a los que una tabla les encajaba perfectamente, con otros elementos mucho más complicados de aplicar, como listas desordenadas o, incluso, divisores...
La definición de la W3C de las tablas nos dice: “El modelo de tablas de HTML permite a los autores organizar datos - texto, texto con formato previo, imágenes, enlaces, formularios, campos de formulario, otras mesas, etc - en filas y columnas de celdas”.
Cerrado el antiguo debate tabla/div, en plena época de la web 3.0, nos encontramos con un nuevo reto, somos modernos, usamos muchos dispositivos diferentes para conectarnos a internet y ver nuestros sitios web y, queremos verlo de igual modo o, al menos, con su versión adaptada a mi dispositivo, ya sea éste una televisión enorme de 50 pulgadas, un móvil de 5, un tablet de 10 o, en breve, mi pequeño reloj, gafa o... ya verás, en la radio portátil de la ducha...
Estamos en la era de la web “responsive”, es decir, de la web X-men, la que muta y genera una experiencia de uso agradable al usuario, la que no le obliga a usar lupa ni hacer zoom ni reducir tamaños, la web “inteligente”... ¿Entonces, qué pasa con mis viejas (y ahora aceptadas) tablas?
Quienes hemos maquetado más de una vez, sabemos de sobra lo complicado que es controlar los tamaños de una tabla cuando cada fila o celda crece según el contenido, cuando por más que se define un 100% como ancho máximo, vemos que nuestros navegadores no lo respetan (y ésto, por primera vez en la vida no es culpa de Microsoft y su Internet Explorer), es cuestión de contenido...
Bien, dejando de lado esta enorme introducción, vamos a ver diferentes opciones para encajar una tabla en una web adaptativa, teniendo en cuenta siempre que la visibilidad de la misma sea la mejor que podamos lograr y, en lo posible, sin utilizar frameworks externos.
1.- Tabla adaptativa
En este ejemplo veremos como una tabla normal alterará su formato inicial utilizando únicamente @media queries de CSS. Para lograr el cambio, haremos que cada una de las celdas definidas en el header de la tabla se añada a cada fila como primera celda, dando como resultado una tabla vertical con todos las columnas transformadas en filas y repitiendo cabeceras en cada una de ellas. Esta idea está tomada de CSS Tricks.
See the Pen GzqmE on CodePen.8811
Pro: excelente efecto
Contra: tabla casi infinita verticalmente y posibles problemas en IE antiguos
2.- Tabla de ancho fijo dentro de DIV adaptativo
Este ejemplo es más sencillo, lo que haremos será definir un DIVISOR contenedor de nuestra tabla, y será este DIV el que sea adaptativo a nuestra pantalla, mostrando u ocultando las barras de desplazamiento horizontales.
See the Pen oKpsq on CodePen.8811
Pro: La tabla nunca altera su apariencia
Contra: en dispositivos móviles debe indicarse que el usuario puede hacer scroll horizontal
3.- Tabla con columnas descartables adaptativa
En este ejemplo, quizás el menos habitual, marcaremos determinadas celdas con la clase CSS “descarto” y nuestra hoja de estilos se encargará de escondernos los valores de aquellas celdas que no son importantes en versiones reducidas de pantalla.
See the Pen pIJoq on CodePen.8811
Pro: La tabla se mantiene legible a todas resoluciones
Contra: Se esconde contenido al usuario
4.- Tabla con tamaño de letra adaptable
En este ejemplo, nuestra tabla mantendrá siempre su ancho fijo, pero al ir reduciendo el tamaño de pantalla, la tipografía de la tabla se irá reduciendo.
See the Pen bniEp on CodePen.8811
Pro: Mantenemos el tamaño de la tabla
Contra: No es buena opción reducirle el tamaño de la tipografía al usuario y llegar a un punto en que sea muy pequeña y no pueda utilizar el zoom
Si quieres ver todas las demostraciones en un archivo nuevo:
Bien, hasta aquí, te he dejado 4 opciones para maquetar tus tablas adaptativas en CSS sin utilizar ningún framework ni javascript, pero vamos a ver las diferentes alternativas, ya sea en frameworks CSS o con pequeños plugins Javascript para jQuery.
Bootstrap
Quizá el framework CSS más extendido, liberado por Twitter nos deja como opción las “Responsive Tables”. Aplica un divisor que contiene nuestra tabla el cual debe contener la clase “table-responsive” para aplicar el ejemplo 02 de nuestras tablas adaptativas. Más info
Foundation
Este framework combina un poco de CSS y de Javascript para ofrecerte diferentes opciones para mostrar tu tabla adaptativa. Básicamente, fijará la primer columna de la tabla a la izquierda permitiendo hacer scroll horizontal para ver el resto de columnas. Más info
Tablesaw
Quizá uno de los mejores plugins para jQuery que he encontrado, trae diferentes modos de visualización, tales como: filas apiladas, elegir el orden de las columnas, ocultar las columnas menos importantes, ordenar datos, etc... realmente muy interesante. Más info
ResponsiveTables
Un pequeño plugin para jQuery que hará lo mismo que Foundation sin la necesidad de utilizar el framework, es decir, fijará la primer columna permitiendo hacer scroll horizontal sobre el resto de columnas. Más info
WordPress
No me olvido del framework por excelencia para blogs y websites autogestionables. TablePress nos promete que las tablas nunca fueron tan fáciles en WordPress. También existe una extensión premium para tablas adaptativas.
Bueno, hasta aquí llegamos... creo que es una buena base y hay muchas opciones para que tus tablas no rompan tu maquetación en dispositivos móviles, ahora te toca a ti elegir cuál prefieres usar... y recuerda, be responsive, my friend.