Las tablas son un patrón de diseño para mostrar grandes cantidades de datos en filas y columnas, lo que las hace eficientes para hacer análisis comparativos sobre objetos categóricos. Las tablas se han utilizado para este propósito desde el siglo II y cuando el mundo comenzó a digitalizarse, las tablas vinieron con nosotros.

Era inevitable que la web soportara la visualización de datos en un formato tabular. Las tablas HTML presentan los datos tabulares de una manera semántica y estructuralmente apropiada. Sin embargo, los estilos por defecto de las tablas HTML no son precisamente lo más agradable estéticamente que hayas visto nunca. Dependiendo del diseño visual deseado, se requería algún esfuerzo en el frente CSS para embellecer esas tablas. Hace una década, se publicó un artículo con los “10 mejores diseños de tablas CSS” en la revista Smashing Magazine, y todavía sigue recibiendo mucho tráfico a día de hoy.

La web ha evolucionado mucho en la última década, y es más conveniente que nunca hacer que tu sitio o aplicación se adapte a la ventana gráfica en la que se ve. Dicho esto, tenemos que seguir tomando decisiones de diseño consideradas que no comprometan la accesibilidad. Dado que las tablas no parecen estar cayendo en desgracia a corto plazo, vamos a ver cómo se pueden crear tablas en la web en 2019.

Opciones solo con CSS

Si tu conjunto de datos no es tan grande, y las características como la paginación y la ordenación no son necesarias, entonces considera una opción sin JavaScript. Puede obtener algunos resultados bastante buenos que funcionan bien en toda una gama de tamaños de pantalla sin el peso añadido de una gran biblioteca.

Desgraciadamente, sin la ayuda de JavaScript para alguna manipulación del DOM en el frente de la accesibilidad, sólo tenemos un puñado de opciones sólo CSS. Pero para pequeños conjuntos de datos, a menudo son suficientes.

Opción 1: No hacer nada

Vamos a empezar con un escenario de bajo esfuerzo. Si sus datos caben en una tabla con sólo unas pocas columnas y muchas filas, entonces dicha tabla está bastante preparada para el móvil para empezar.

El problema que tendrías es probablemente tener demasiado espacio en pantallas más anchas, por lo que podría ser aconsejable “limitar” la anchura máxima de la tabla con un max-width mientras que dejar que se reduzca lo necesario en una pantalla estrecha.

Este tipo de patrón funciona mejor si sus datos en sí no son líneas y líneas de texto. Si son numéricos, o frases cortas, probablemente puedes salirte con la tuya sin hacer mucho.

Opción 2: Estilizar el desplazamiento

David Bushell escribió su técnica para las tablas responsivas allá por 2012, que implicaba invocar el desbordamiento y permitir a los usuarios desplazarse para ver más datos. Se podría argumentar que esto no es exactamente una solución responsiva, pero técnicamente, el contenedor está respondiendo a la anchura de la ventana gráfica.

Veamos primero el desbordamiento “básico”. Imagínate que uso comillas alrededor de “basic”, porque el estilo de las sombras de desplazamiento es cualquier cosa menos eso. Aún así, en este caso, “básico” se refiere al hecho de que la tabla no se transforma de ninguna manera.

Esta técnica para hacer sombras de desplazamiento viene de Roma Komarov y Lea Verou riffing de las ideas de cada uno para crear magia. Se basa en el uso de múltiples gradientes (lineales y radiales) como imágenes de fondo en el elemento contenedor, y el uso de background-attachment: local para posicionar el fondo en relación con su contenido.

Lo bueno de esta técnica es que para los navegadores que no soportan sombras de desplazamiento, todavía se puede desplazar la tabla de forma normal. No rompe el diseño en absoluto.

Otra opción de desplazamiento sería voltear los encabezados de la tabla de una configuración de filas a una configuración de columnas, mientras se aplica un desplazamiento horizontal sobre el contenido del elemento <tbody>. Esta técnica aprovecha el comportamiento de Flexbox para transformar las filas de la tabla en columnas.

Aplicando display: flex a la tabla, hace que los elementos <thead> y <tbody> se conviertan en hijos flexibles, que por defecto se colocan uno al lado del otro en la misma línea flexible.

También hacemos que el elemento <tbody> sea un contenedor flexible, haciendo así que todos los elementos <tr> dentro de él sean hijos flexibles colocados en una sola línea flexible también. Por último, todas las celdas de la tabla tienen que tener su visualización establecida en block en lugar de la predeterminada table-cell.

La ventaja de esta técnica es que las cabeceras están siempre a la vista, como un efecto de cabecera fija, por lo que los usuarios no pierden el contexto mientras se desplazan por las columnas de datos. Una cosa a tener en cuenta es que esta técnica resulta en una discrepancia del orden visual y de origen, y esto hace que las cosas sean ligeramente poco intuitivas.

Sprinkle On Some JavaScript

Como se mencionó anteriormente, las opciones de diseño que implican la morfología de la tabla mediante la modificación de los valores display a veces tienen implicaciones negativas para la accesibilidad, que requieren alguna manipulación menor del DOM para rectificar.

Además, hay una serie de consejos de experiencia de usuario cuando se trata de diseñar tablas de datos de Andrew Coyle, incluyendo características como la paginación, la ordenación, el filtrado, etc. (características que requieren algo de JavaScript para habilitar).

Si trabajas con un conjunto de datos relativamente sencillo, quizás quieras escribir tus propias funciones para algunas de estas características.

Rows To Blocks, With Accessibility Fix

Por lo que sé, esta técnica de tablas de datos responsivas surgió del artículo de CSS-Tricks “Responsive Data Tables” de Chris Coyier allá por 2011. Desde entonces ha sido adaptada y ampliada por muchos otros.

La esencia de esta técnica es hacer uso de una consulta de medios para cambiar la propiedad de visualización del elemento de tabla y sus hijos a block en una ventana gráfica estrecha.

En una pantalla estrecha, los encabezados de la tabla están visualmente ocultos, pero siguen existiendo en el árbol de accesibilidad. Aplicando atributos de datos a las celdas de la tabla, podemos entonces mostrar etiquetas para los datos a través de CSS, manteniendo el contenido de la etiqueta en el HTML. Por favor, consulte el CodePen a continuación para ver cómo se ven el marcado y los estilos:

El método original aplica una anchura al pseudoelemento que muestra el texto de la etiqueta, pero eso significa que tendría que saber la cantidad de espacio que necesita su etiqueta para empezar. El ejemplo anterior utiliza un enfoque ligeramente diferente, en el que la etiqueta y los datos están cada uno en lados opuestos de su bloque de contención.

Podemos lograr este efecto a través de los márgenes automáticos en un contexto de formato flex. Si establecemos la propiedad de visualización de cada elemento <td> en flex, ya que los pseudoelementos generan cajas como si fueran hijos inmediatos de su elemento de origen, se convierten en hijos de flex de los <td>.

Después de eso, es cuestión de establecer margin-right: auto en el pseudoelemento para empujar el contenido de la celda al borde final de la celda.

Otro enfoque que hace el diseño de la ventana gráfica estrecha es utilizar una combinación de Grid y display: contents. Tenga en cuenta que display: contents en los navegadores compatibles tiene problemas de accesibilidad en este momento, y este método no debe ser utilizado en la producción hasta que esos errores se solucionen.

Pero tal vez usted está leyendo esto después de esos errores se han resuelto, en ese caso, aquí es una opción de diseño alternativo.

Cada elemento <tr> se establece en display: grid, y cada elemento <td> se establece en display: contents. Sólo los hijos inmediatos de un contenedor de rejilla participan en un contexto de formato de rejilla; en este caso, es el elemento <td>.

Cuando se aplica display: contents al <td>, se “sustituye” por su contenido, en este caso, el pseudoelemento y el <span> dentro del <td> se convierten en los hijos de la rejilla en su lugar.

Lo que me gusta de este enfoque es la posibilidad de utilizar max-content para dimensionar la columna de pseudo-elementos, asegurando que la columna siempre tendrá el ancho de la etiqueta más larga, sin que tengamos que asignarle manualmente un valor de ancho.

En el futuro, cuando los valores de tamaño de min-content, max-content y fit-content (cubiertos por el módulo de tamaño intrínseco de CSS & Nivel 3) sean soportados como valores generales de width y height, tendremos aún más opciones para la disposición de las cosas.

La desventaja de este enfoque es que necesitas ese <span> o <p> adicional alrededor del contenido de tu celda de la tabla si no lo tiene ya, de lo contrario, no habría forma de aplicarle estilos.

Paginación simple

Este ejemplo muestra una implementación de paginación básica que fue modificada fuera de este CodePen por Gjore Milevski para paginar en filas de la tabla en lugar de divs. Es una extensión del ejemplo “style the scroll” discutido en la sección anterior.

Desde una perspectiva de diseño, Flexbox es muy útil para posicionar los elementos de paginación a través de varios tamaños de vista. Diferentes diseños de proyectos tendrán diferentes requisitos, pero la versatilidad de Flexbox debería permitirle atender a estas diferencias en consecuencia.

En este caso, la paginación está centrada en la página y por encima de la tabla. Los controles para navegar hacia atrás y hacia delante se colocan a ambos lados de los indicadores de página en pantallas más anchas, pero los cuatro aparecen por encima de los indicadores de página en pantallas estrechas.

Podemos hacer esto variando la propiedad order. La reordenación visual del contenido debe hacerse siempre con consideración, ya que esta propiedad no cambia el orden de la fuente, sólo la forma en que aparece en las pantallas.

Ordenación simple

Este ejemplo muestra una implementación de ordenación básica modificada a partir de este fragmento de código de Peter Noble para atender tanto al texto como a los números:

Sería útil tener algún tipo de indicador de qué columna se está ordenando actualmente y en qué orden. Podemos hacer eso con la adición de clases CSS que luego puede ser de estilo como quieras. En este caso, los símbolos indicadores son pseudo-elementos que se conmutan cuando se hace clic en la cabecera de destino.

Búsqueda simple

Este ejemplo es una funcionalidad básica de filtrado que itera a través de todo el contenido textual de cada celda de la tabla y aplica una clase CSS para ocultar todas las filas que no coinciden con el campo de entrada de búsqueda.

Tal implementación es relativamente ingenua, y si su caso de uso lo requiere, podría tener sentido buscar por columna en su lugar. En ese caso, podría ser una buena idea tener cada campo de entrada como parte de la tabla en sus respectivas columnas.

Deja que una biblioteca se encargue

Los fragmentos de JavaScript anteriores sirven para demostrar cómo se pueden mejorar las tablas con grandes cantidades de datos para facilitar la vida de los usuarios de esas tablas. Pero con conjuntos de datos realmente grandes, probablemente tenga sentido utilizar una biblioteca existente para gestionar sus tablas grandes.

El patrón de alternancia de columnas es uno por el cual las columnas no esenciales se ocultan en las pantallas más pequeñas. Normalmente, no soy partidario de ocultar el contenido simplemente porque la ventana gráfica es estrecha, pero este enfoque de Maggie Costello Wachs de Filament Group resuelve ese reparo mío proporcionando un menú desplegable que permite a los usuarios volver a ver las columnas ocultas.

El artículo anterior se publicó en 2011, pero Filament Group ha desarrollado desde entonces un conjunto completo de plugins de tablas responsivas conocido como Tablesaw, que incluye características como la ordenación, la selección de filas, la internacionalización, etc.

La función de alternancia de columnas en TableSaw tampoco depende ya de jQuery, a diferencia de los ejemplos del artículo original. Tablesaw es una de las únicas bibliotecas que he podido encontrar que no depende de jQuery en este momento.

Resumiendo

Hay una miríada de patrones de diseño de tablas por ahí, y el enfoque que elijas depende en gran medida del tipo de datos que tengas y el público objetivo de esos datos. A fin de cuentas, las tablas son un método de organización y presentación de datos. Es importante averiguar qué información es la más importante para tus usuarios y decidir el enfoque que mejor sirva a sus necesidades.

Lectura adicional

• “Tablas responsivas con CSS”, David Bushell
• “Tablas accesibles, simples y responsivas”, Davide Rizzo, CSS-Tricks
• “Diseño de tablas responsivas”, Matt Smith
• “Patrones responsivos: Tablas”, Brad Frost
• “Hey, It’s Still OK To Use Tables”, Adrian Roselli
• “Tables, CSS Display Properties, And ARIA”, Adrian Roselli
• “Data Tables”, Heydon Pickering

(ra, il)