Patrones de diseño de mesa en la web

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 realizar análisis comparativos en objetos categóricos. Las mesas se han utilizado para este propósito ya en el siglo ^II y cuando el mundo comenzó a digitalizarse, las mesas nos acompañaron.

Era inevitable que la web admitiera la visualización de datos en formato tabular. Las tablas HTML presentan datos tabulares de una manera semántica y estructuralmente apropiada. Sin embargo, los estilos predeterminados en las tablas HTML no son exactamente lo más estético que jamás haya visto. Dependiendo del diseño visual deseado, se requirió algo de esfuerzo en el frente de CSS para embellecer esas tablas. Hace una década, se publicó un artículo con los "10 mejores diseños de tablas CSS" en Smashing Magazine, y aún continúa recibiendo mucho tráfico hasta el día de hoy.

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

Opciones de solo CSS

Si su conjunto de datos no es tan grande y las funciones como la paginación y la clasificación no son necesarias, considere una opción sin JavaScript. Puede obtener algunos resultados bastante buenos que funcionan bien en una amplia gama de tamaños de pantalla sin el peso adicional de una gran biblioteca.

Desafortunadamente, sin la ayuda de JavaScript para manipular DOM en el frente de accesibilidad, solo tenemos un puñado de opciones exclusivas de CSS. Pero para conjuntos de datos pequeños, a menudo son suficientes.

Opción 1: No hacer nada

Vamos a comenzar con un escenario de bajo esfuerzo. Si sus datos caben en una tabla con solo unas pocas columnas y muchas filas, entonces dicha tabla está prácticamente lista para dispositivos móviles para empezar.

El problema que tendría es probablemente tener demasiado espacio en pantallas más anchas, por lo que podría ser recomendable "limitar" el ancho máximo de la tabla con un max-width dejar que se reduzca según sea 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 frases numéricas o cortas, probablemente puedas salirte con la tuya sin hacer mucho.

Opción 2: Dale estilo al pergamino

David Bushell escribió su técnica para tablas receptivas en 2012, que implicaba invocar el desbordamiento y permitir que los usuarios se desplazaran para ver más datos. Se podría argumentar que esta no es exactamente una solución receptiva, pero técnicamente, el contenedor responde al ancho de la ventana gráfica.

Veamos primero el desbordamiento "básico". Imagínenme usando comillas de aire alrededor de lo básico, porque el estilo de las sombras en movimiento es todo lo contrario. Aún así, en este caso, "básico" se refiere al hecho de que la mesa no se transforma de ninguna manera.

Esta técnica para crear sombras que se desplazan proviene de Roma Komarov y Lea Verou, que se inspiran mutuamente para crear magia. Se basa en el uso de múltiples degradados (lineales y radiales) como imágenes de fondo en el elemento contenedor y en el uso background-attachment: local para colocar el fondo en relación con su contenido.

Lo bueno de esta técnica es que para los navegadores que no admiten el desplazamiento de sombras, aún puede desplazarse por la tabla como de costumbre. No rompe el diseño en absoluto.

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

Al aplicar display: flex a la tabla, hace que <thead> y <tbody> sean ambos hijos flexibles, que por defecto están colocados uno al lado del otro en la misma línea flexible.

También hacemos que el elemento <tbody> sea un contenedor flexible, por lo que todos los elementos <tr> dentro de él también son elementos secundarios flexibles dispuestos en una sola línea flexible. Por último, cada celda de la tabla debe tener su pantalla configurada para block en lugar de la table-cell predeterminada.

La ventaja de esta técnica es que los encabezados siempre están a la vista, como un efecto de encabezado fijo, 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 da como resultado una discrepancia entre el orden visual y el de la fuente, y esto hace que las cosas sean un poco poco intuitivas.

Espolvorear un poco de JavaScript

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

Además, hay una serie de consejos sobre la experiencia del usuario cuando se trata de diseñar tablas de datos de Andrew Coyle, incluidas funciones como paginación, clasificación, filtrado, etc. (funciones que requieren algo de JavaScript para habilitarse).

Si está trabajando con un conjunto de datos relativamente más simple, tal vez le gustaría escribir sus propias funciones para algunas de estas características.

Filas a bloques, con corrección de accesibilidad

Hasta donde yo sé, esta técnica de tabla de datos receptivos surgió del artículo de CSS-Tricks "Tablas de datos receptivos" de Chris Coyier en 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 la tabla y sus elementos secundarios para block en una ventana de visualización estrecha.

En una pantalla estrecha, los encabezados de las tablas se ocultan visualmente, pero aún existen en el árbol de accesibilidad. Al aplicar atributos de datos a las celdas de la tabla, podemos mostrar etiquetas para los datos a través de CSS, mientras mantenemos el contenido de la etiqueta en el HTML. Consulte el CodePen a continuación para ver cómo se ven las marcas y los estilos:

El método original aplica un ancho en el pseudoelemento que muestra el texto de la etiqueta, pero eso significa que necesitaría saber la cantidad de espacio que necesita su etiqueta para comenzar. El ejemplo anterior utiliza un enfoque ligeramente diferente, en el que la etiqueta y los datos están en lados opuestos de su bloque contenedor.

Podemos lograr tal efecto a través de márgenes automáticos en un contexto de formato flexible. Si establecemos la propiedad de visualización para cada elemento <td> en flex, dado que los pseudoelementos generan cuadros como si fueran elementos secundarios inmediatos de su elemento de origen, se convierten en elementos secundarios flexibles de <td> .

Después de eso, se trata de configurar margin-right: auto en el pseudoelemento para empujar el contenido de la celda hasta el borde más lejano de la celda.

Otro enfoque para hacer el diseño de ventana estrecha es usar una combinación de Grid y display: contents . Tenga en cuenta que display: contents en los navegadores compatibles tienen problemas de accesibilidad en este momento, y este método no debe usarse en producción hasta que se solucionen esos errores.

Pero tal vez esté leyendo esto después de que se hayan resuelto esos errores, en ese caso, aquí hay una opción de diseño alternativa.

Cada elemento <tr> está configurado para display: grid y cada elemento <td> está configurado para display: contents . Solo los elementos secundarios inmediatos de un contenedor de cuadrícula participan en un contexto de formato de cuadrícula; en este caso, es el elemento <td> .

Cuando display: contents se aplica a <td> , se "reemplaza" por su contenido, en este caso, el pseudoelemento y el <span> dentro de <td> se convierten en los elementos secundarios de la cuadrícula.

Lo que me gusta de este enfoque es la capacidad de usar max-content para dimensionar la columna de pseudoelementos, 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 Nivel 3 del módulo de tamaño intrínseco y extrínseco de CSS) se admitan como valores generales de width y height , tendremos aún más opciones para colocar cosas fuera.

La desventaja de este enfoque es que necesita ese <span> o <p> adicional alrededor del contenido de la celda de su tabla si aún no tiene uno; 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 de este CodePen por Gjore Milevski para paginar en las filas de la tabla en lugar de divs. Es una extensión del ejemplo de "estilizar el pergamino" discutido en la sección anterior.

Desde la perspectiva del diseño, Flexbox es muy útil para colocar los elementos de paginación en varios tamaños de ventana gráfica. Los diferentes diseños de proyectos tendrán diferentes requisitos, pero la versatilidad de Flexbox debería permitirle atender estas diferencias en consecuencia.

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

Podemos hacer esto aprovechando la propiedad order . El reordenamiento visual del contenido siempre debe hacerse con consideración porque esta propiedad no cambia el orden de origen, solo cómo aparece en las pantallas.

Clasificación sencilla

Este ejemplo muestra una implementación de clasificación básica modificada a partir de este fragmento de código por Peter Noble para atender tanto el texto como 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 se pueden diseñar como quieras. En este caso, los símbolos indicadores son pseudoelementos que se alternan cuando se hace clic en el encabezado de destino.

Búsqueda sencilla

Este ejemplo es una funcionalidad de filtrado básica 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 escenario, podría ser una buena idea tener cada campo de entrada como parte de la tabla en sus respectivas columnas.

Deje que una biblioteca lo maneje

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 usar una biblioteca existente para administrar sus tablas grandes.

El patrón de cambio de columna es uno en el que las columnas no esenciales se ocultan en pantallas más pequeñas. Normalmente, no soy partidario de ocultar contenido simplemente porque la ventana gráfica es estrecha, pero este enfoque de Maggie Costello Wachs de Filament Group resuelve ese problema mío al proporcionar un menú desplegable que permite a los usuarios cambiar las columnas ocultas de nuevo a vista.

El artículo anterior se publicó en 2011, pero desde entonces Filament Group ha desarrollado un conjunto completo de complementos de tablas sensibles conocido como Tablesaw, que incluye funciones como clasificación, selección de filas, internacionalización, etc.

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

Terminando

Existe una gran variedad de patrones de diseño de tablas, y el enfoque que elija depende en gran medida del tipo de datos que tenga y del público objetivo de esos datos. Al final del día, las tablas son un método para la organización y presentación de datos. Es importante averiguar qué información es más importante para los usuarios y decidir el enfoque que mejor se adapte a sus necesidades.

Otras lecturas

• "Tablas receptivas solo CSS", David Bushell
• "Tablas receptivas, simples y accesibles", Davide Rizzo, CSS-Tricks
• "Disposición de la tabla receptiva", Matt Smith
• “Patrones receptivos: tablas”, Brad Frost
• "Oye, todavía está bien usar tablas", Adrian Roselli
• "Tablas, propiedades de visualización CSS y ARIA", Adrian Roselli
• "Tablas de datos", Heydon Pickering