Estoy seguro de que muchos de vosotros, alguna vez, habéis tenido algún tipo de problema a la hora de ajustar el tamaño de tablas HTML. Quienes habitualmente maquetamos, sabemos de sobra lo complicado que es controlar los tamaños de una tabla, son uno de los elementos del diseño web que más quebraderos de cabeza nos trae a la hora de desarrollar una maquetación responsive.
El Diseño Web Responsive (RWD), como ya sabéis, tiene como objetivo hacer que las páginas web sean flexibles y adaptables a las distintas resoluciones de pantalla de los diferentes dispositivos: desktop, tablet, móvil… Que los sitios web sean responsive está tomando cada vez más protagonismo y comienza a introducirse en ámbitos donde la estructura es más compleja, como por ejemplo el e-commerce, para ofrecer la mejor experiencia al usuario a la hora de visitar, leer e interactuar con toda comodidad en tu sitio web.
Si no tienes muy claro lo que es esto del diseño web responsive, quieres profundizar más sobre como maquetar una web adaptativa o simplemente quieres salir de dudas de si tu sitio web está optimizado para diferentes resoluciones de pantalla
Para qué usar (y para qué no) una tabla en HTML
Antes de nada, quiero dejar claro que las tablas tienen una función muy importante en el HTML. Las tablas son elementos que se crearon para mostrar una presentación de datos encuadrados dentro de filas y columnas, NO fueron creadas para darle forma al diseño de una página web. Destaco el NO porque durante mucho tiempo las tablas fueron la base de la maquetación. Por si acaso hay algún despistado, estas son algunas de las razones por las que tenemos que olvidarnos de estructurar una página web con tablas y deberíamos optar por maquetar con hojas de estilo CSS:
Las tablas no sirven para estructurar contenido de un sitio web
Esto pasaba por una simple razón: Los diseñadores optaron por esto al ser uno de los métodos más fáciles para diseñar visualmente sitios web complejos y poder combinar texto e imágenes de una manera fácil y sencilla. Esto lo conseguían fácilmente con la magia del border=”0″. Sin embargo, el CSS es más flexible y te da muchas más posibilidades a la hora de maquetar.
A día de hoy, aparte de que dificulta la visualización del contenido en diferentes dispositivos, no se puede permitir que nadie diga que está bien estructurar páginas web en base a tablas. Si alguien dice que es imposible hacerlo sin tablas, simplemente no sabe suficiente CSS.
La velocidad de carga de tu sitio web será muy lenta
Usar tablas para hacer el diseño de la página hace que tu archivo HTML pese bastante más, lo que conlleva que tu sitio web tarde en cargar, en cambio haciéndolo con hojas de estilo CSS, los estilos se quedan en la memoria caché del navegador y esto hace que se consuma menos ancho de banda y tus páginas cargarán mucho más rápido, lo que hará una mejor experiencia de navegación para el usuario, además de mejorar la indexabilidad, la tasa de rebote y la conversión.
Modificar el diseño de varias páginas es más lento y costoso
Si las páginas de contenido de tu sitio web están basadas en una misma estructura de diseño, a la hora de modificar algún elemento, es mucha la diferencia entre hacerlo con tablas o hacerlo con hojas de estilo. Me explico: el trabajo que tardes en diseñar con CSS la primera estructura de las páginas, podrás aprovecharlo en todas las demás, es decir, realizando un solo cambio en el CSS, se modificarán todas las páginas. De esta manera, los cambios en el diseño van a ser muy rápidos. Sin embargo, al hacerlo con tablas, si necesitas realizar algún tipo de modificación, deberás de replicar la estructura en cada una de las páginas con su cambio correspondiente.
Afectará negativamente a tu posicionamiento en buscadores
Otra de las razones, por si todavía no te sirve con las anteriores, es que si maquetas con tablas, buscadores web como Google no te permitirán indexar tu sitio web correctamente, es decir, afecta negativamente a tu posicionamiento en las búsquedas. En cambio, si en la página HTML solo tienes el contenido que quieres mostrar, con las etiquetas necesarias de HTML y con una buena estructura de código, te permitirá posicionarte mejor en los buscadores, ya que hace que las páginas sean más amigables.
Aquí el que manda es el contenido de tu sitio web, y que al ser la página más semántica, los robots de los buscadores podrán encontrar mejor el contenido más importante.
Tu contenido será menos accesible para el usuario
Otro problema que existe es que las páginas son mucho menos accesibles para los usuarios con cierta discapacidad (por ejemplo, usuarios con poca visión). Estos usuarios a la hora de navegar por el contenido de cualquier sitio web, utilizan dispositivos especiales como navegadores de voz para leer la información. Al utilizar la maquetación con tablas, el dispositivo no interpreta el orden visual de una tabla, sino que lee tal cual todo el contenido en filas y columnas, y por lo tanto al usuario no se le podrá aportar la información que necesita.
Además de estas razones, por si todavía no estás convencido, la misma persona que tuvo esta fantástica idea de maquetar la estructura de una página web basada completamente en tablas te deja otra razón más: “La web está arruinada y yo la arruiné”: David Siegel, puedes leer su artículo The Web is Ruined and I Ruined it.
Con todo esto, no quiero decir que nunca debamos usar tablas en nuestro sitio web, sino que las tablas HTML, repito, deben utilizarse únicamente para la presentación ordenada de datos.
En definitiva y dejando de lado esta enorme introducción, vamos a ver diferentes soluciones para encajar una tabla HTML en una web adaptativa (Responsive), teniendo en cuenta siempre que la visibilidad sea la mejor que podamos conseguir en función de la resolución del dispositivo que utilicemos para navegar.
Soluciones más comunes para adaptar tablas a distintos dispositivos
1. Tabla adaptativa
Este ejemplo —una técnica de Cris Cover— es una tabla normal a la que, mediante @mediaQuerys, se le aplica un formato especial, consiguiendo repetir la cabecera de la tabla de manera vertical para cada una de las filas de datos que contenga. Esto sucederá cuando se esté visualizando desde resoluciones más pequeñas. Esta solución es recomendable utilizarla si no tienes que representar una tabla de datos muy extensa, más que nada porque de esta manera podría quedarte una tabla casi infinita verticalmente.
@media screen and (max-width: 600px) {
table {
width:100%;
}
thead {
display: none;
}
tr:nth-of-type(2n) {
background-color: inherit;
}
tr td:first-child {
background: #f0f0f0;
font-weight:bold;
font-size:1.3em;
}
tbody td {
display: block;
text-align:center;
}
tbody td:before {
content: attr(data-th);
display: block;
text-align:center;
}
}
2. Esconder información vs. selector de columnas
En algunos casos, deciden que para que una tabla se visualice correctamente en diferentes resoluciones de dispositivos, la solución más acertada, explicado por primera vez por Stuar Curry, implica esconder columnas a medida de que la resolución del dispositivo va disminuyendo, pero tengo que decir que no estoy de acuerdo con esta técnica.
Está claro que hay que ahorrarle al usuario trabajo y tomas de decisiones innecesarias, pero a la hora de representar datos, cada usuario tiene sus prioridades a la hora de buscar los datos que le interesan. Por esto mismo, si directamente nosotros nos encargamos de ir ocultando parte de la información según veamos conveniente, el usuario puede encontrarse con que los datos que se muestran no le interesen. Con esto quiero decir, que nunca hay que decidir por el usuario en estos casos.
En cambio, existen algunas propuestas que gracias a JavaScript, permiten al usuario seleccionar de un desplegable las columnas concretas que le interesan ver. Un selector de columnas es un gran complemento combinado con otras técnicas, pero no una solución en sí mismo para las tablas. Digo que no es una solución porque ¿qué pasa si el usuario quiere tener una visión completa de toda la información? No quedaría bien, ya que si se trata de una tabla con un montón de columnas probablemente se desmonte la estructura del diseño.
Esta solución de utilizar un desplegable para seleccionar columnas concretas depende del contenido que pretendas mostrar. Por ejemplo, si quieres exponer una presentación de datos que no es muy extensa, en estos casos sería otra posible solución. Aquí os dejo un ejemplo.
3. Scroll horizontal sobre la tabla
Si tu sitio web tiene bastantes presentaciones de datos en tablas y no puedes darle estilo a cada una de ellas para que se muestren de una manera visual correcta, existe la solución de incluir un scroll horizontal a la tabla, sin romper su diseño.
En la hoja de estilos CSS, en la mediaQuery definida para cada resolución debes incluir a la etiqueta <table> que contenga display:block y establecer overflow-x:auto, por ejemplo:
@media screen and (max-width: 320px) {
table {
display: block;
overflow-x: auto;
}
}
Consejo: Siempre será mejor introducir la tabla en un <div> establecido con overflow-x:scroll;este <div> se adaptará a nuestra pantalla. Hay que tener en cuenta que si la tabla tiene pocas columnas, display:block significa que no redimensionarán el ancho de la tabla (siempre que la tabla esté configurada como 100% de ancho).
Esto es lo que sucede en el móvil (320px de ancho). El usuario puede deslizar el dedo hacia la derecha y hacia la izquierda para desplazarse horizontalmente por la tabla.
4. Reorganizar el contenido
Un planteamiento que puede llegar a ser muy apropiado en casos concretos, especialmente en aquellos casos en los que te encuentras con que la tabla que quieres mostrar a los usuarios tiene más columnas que filas, la solución es cambiar la orientación de la información. De manera que las columnas se convierten en filas y las filas en columnas. Esta es la propuesta de Dave Bushell, quien apunta también que es posible obtener el mismo resultado mediante flex-box, una técnica avanzada de CSS.
5. Ajustar tamaño y contenido de la tabla
Desaconsejada totalmente esta táctica, la incluyo porque todavía hay gente que implementa esta solución y no es para nada factible. En este caso, la tabla mantiene siempre su ancho fijo, pero dependiendo de la resolución que tenga el dispositivo con el que visualices la representación de datos de la tabla, la tipografía se irá reduciendo.
Claramente, no es buena opción reducirle el tamaño de la fuente al usuario y llegar a un punto en el que sea muy pequeña, no pueda utilizar el zoom y no consiga leer nada.
6. Reinterpretar los datos
Otro formato muy habitual que nos encontramos a la hora de necesitar una representación de datos para hacer una buena comparación es en modo gráfico. Esta solución, no está considerada como una tabla responsive, pero podríamos disponer de este recurso para mostrarlo solo en los dispositivos de resolución más reducida.
En estos casos donde los datos son representables en gráficos, una gran opción para realizarlos podría ser <canvas> de HTML5. Para los que estéis interesados en HTML5.
7. Otras alternativas
Hasta aquí han sido algunas de las opciones que existen para maquetar tablas en CSS y, en algunas, implementando algo de JavaScript. Además de esto, os dejo más alternativas; algunas de ellas son parecidas a las nombradas anteriormente, pero incluyendo frameworks CSS, plugins JavaScript para jQuery…
Bootstrap
Quizá el framework CSS más extendido, nos deja como opción las “Responsive Tables”. Aplica sobre el <div> que contiene nuestra tabla, el cual debe contener la clase “table-responsive”, automáticamente aplicará una solución de anchura variable a dicha tabla.
Foundation
Este framework es un combo formado por CSS y Javascript, ofrece diferentes opciones para mostrar una tabla responsive. Se basa en fijar la primera columna de la tabla a la izquierda lo que permite hacer scroll horizontal sobre el resto de columnas para visualizar los datos.
TablePress
Framework para WordPress, te permite crear y administrar tablas en tu sitio web. No requiere conocimientos de HTML, ya que es una interfaz sencilla y permite editar los datos de la tabla de manera muy fácil. Las tablas pueden contener cualquier tipo de datos y además es posible usar una biblioteca adicional de JavaScript para agregar funciones como clasificación, paginación, filtrado… dependiendo de lo que necesites mostrar a los usuarios.
Librería Stacktable
Si lo tuyo no es el JavaScript esta librería quizás pueda ayudarte. Stacktable es una librería JavaScript, no es CSS puro y duro, pero tiene la ventaja de que no hay que codificar nada, bastaría solo con inicializarlo. Esta librería se encarga de transformar las columnas en filas.
Tablesaw
Dicen que puede ser uno de los mejores plugins para jQuery, ofrece diferentes modos de visualización de datos, para que escojas el que mejor se adapte a tu representación. Permite hacer agrupación de filas, ordenar columnas, ocultar datos.
FooTable
FooTable es un plugin construido en jQuery y hecho para Bootstrap, aunque debe funcionar también compilando CSS y JavaScript para usarlo independientemente. Hay tres formas para descargar FooTable y te ofrecen una visión general de cómo utilizarlo y, por si fuera poco, un montón de ejemplos básicos para empezar.
Y hasta aquí llegamos con las tablas HTML. Creo que es un buen primer acercamiento y hay muchas opciones para que tus tablas no rompan tu maquetación en las diferentes resoluciones de dispositivos. Os dejo también un enlace a filament group en GitHub, donde encontraréis varias soluciones prácticas y bien documentadas que os pueden ser útiles. Ahora te toca a ti elegir cuál prefieres usar y empezar a trastear.
Sea cual sea la solución que elijas, lo más importante es que la interacción sea intuitiva, accesible y fácil de utilizar para el usuario.
