Tablas accesibles, sencillas y receptivas | Programar Plus

No existe una solución única para hacer <table> adecuadamente receptivo. Eso es lo que me gusta de esta publicación de Davide Rizzo: lo admite y luego sigue con algunas soluciones. Esta es una gran adición al territorio que hemos estado pisando durante un tiempo.

Tablas de contenido y comparación

Hay muchos tipos de tablas en sitios web donde el contenido puede variar tanto como los enfoques utilizados para hacerlos receptivos. Las tablas que encuentro más frustrantes son las tablas de comparación o las tablas de diseño de contenido normal, realmente no existen soluciones completas basadas en CSS para hacer que este tipo de tablas responda.

Me propuse encontrar una solución flexible y simple que pudiera funcionar como un componente web reutilizable, independientemente del contenido que contenga.

Ejemplos de tablas comparativas

¿Sigue funcionando el marcado de tabla para nosotros?

El marcado de tabla estándar parece tener sentido semántico y hace un trabajo bastante decente al alinear celdas. Una de mis principales preocupaciones fue la accesibilidad. Sin duda, el marcado de tabla nativo ayuda a un usuario con un lector de pantalla a comprender el contenido del pedido que se debe leer y navegar.

Hice algunas pruebas con una sencilla tabla de mejores prácticas. Usando algunos lectores de pantalla (Chrome Vox y VoiceOver), intenté navegar por el marcado:

1. ChromeVox te dice que estás en una mesa, mientras que VoiceOver también te dice cuántas columnas y filas tiene la tabla (lo cual es útil).
2. Ni CromeVox ni VoiceOver te dicen cuándo estás en el encabezado de una mesa. <thead>, <th> e incluso scope="row|col" no parece hacer nada! La única forma de hacer que reconozca un encabezado es envolverlo en un <h#> etiqueta.
3. El lector recorre la tabla a través de filas sin importar cómo esté organizado su contenido. VoiceOver al menos le permite navegar en cualquier dirección usando las teclas de flecha, pero aún no tiene ninguna indicación en qué orden debe navegar.

En esencia, nada en el marcado le dice al usuario del lector de pantalla si el contenido debe leerse a través de filas o columnas. El marcado más significativo todavía proviene del contenido semántico no tabular.

Enfoques para las tablas receptivas

Pensemos en las diferentes formas en que una tabla podría comportarse de manera receptiva:

1. Calabaza: Si las columnas tienen poco contenido, pueden aplastarse horizontalmente sin problemas en una pantalla móvil, por lo que no cambiar el diseño debe ser una opción válida.
2. Desplazamiento vertical: Si el diseño y el contenido son exactos y críticos, un usuario puede desplazarse hacia la izquierda o hacia la derecha. Esto es trivial en CSS con un overflow="auto" envoltura.
3. Contraer por filas: Divida cada fila en su propia mini-tabla de una sola columna en pantallas pequeñas. Traspuesta display:table en display:block causará esto con el marcado de tabla normal.
4. Contraer por columnas: Aquí es donde las cosas se ponen complicadas. No puede hacer esto con el marcado de tabla normal en CSS puro porque el orden del código es por filas y el <tr> los contenedores lo bloquean. Tenemos que cambiar el marcado o comenzar a manipular con JavaScript.

Ejemplos visuales de esas cuatro posibilidades.

Formas no recomendadas de crear una tabla receptiva

A través del ensayo y la experimentación, descarté estos métodos:

1. Generar una segunda tabla más estrecha a través de JavaScript y ocultar / mostrar alternativamente por punto de interrupción.
   ¿Por qué? Duplicación de contenido, no mejor que un sitio ‘.m’. Romperá cualquier ID única dentro de una tabla. Mala idea para componentes impulsados ​​por Styleguide.
2. Usar marcado de tabla normal y JavaScript en un punto de interrupción para reorganizar la tabla en una versión receptiva.
   ¿Por qué? Requiere marcado diferente para tablas verticales y horizontales. Romperá cualquier inicialización JS del contenido de la tabla. Requiere muchos oyentes de eventos JS y manipulación DOM.
3. Mantener el marcado de la tabla pero cambiar a display:flex para contenido de tabla alineado verticalmente.
   ¿Por qué? No es posible alinear celdas en filas con <tr> tipo envoltorios y display: table-cell anula el flex-item.

Tablas receptivas con flexbox

1a) Para tablas orientadas a filas …

• Ordene el marcado exactamente como debe leerlo un lector de pantalla o móvil, use encabezados semánticos y contenido.
• Abandone todo concepto de envoltorios de “filas”.
• Establezca el ancho de cada celda como un porcentaje basado en el número de columnas o filas.
  No es posible dimensionar automáticamente el ancho de las columnas.

Consulte las tablas receptivas de lápiz (por filas) de Programar Plus(@ css-tricks) en CodePen.

1b) Para tablas orientadas a columnas …

• Establecer el flex order por fila para crear instantáneamente una mesa vertical. Esto debe estar en línea, de lo contrario, necesitaríamos una clase única para cada fila. Bastante fácil de hacer manualmente, o muy fácil de aplicar para un CMS o JavaScript.

Consulte las tablas receptivas de lápiz (por columnas) de Programar Plus(@ css-tricks) en CodePen.

2) Estilo para ayudar a hacer conexiones

• Diseñe las celdas individualmente en cualquier patrón que necesite.
• Corrija la duplicación del borde de la celda con márgenes negativos.

Consulte las tablas receptivas de lápiz (estilos de celda) de Davide Rizzo (@davidelrizzo) en CodePen.

3) Colapsar a bloques en pantallas pequeñas

En una consulta de medios de pantalla pequeña, configure todo en display: block. ¡Eso nos da tablas receptivas!

Consulte las tablas receptivas de lápiz (contraer) de Programar Plus(@ css-tricks) en CodePen.

3b) Colapso en tablaturas o acordeones

• El marcado de tabulación y acordeón está dentro de la mesa en una posición lógica
• Alternar fila o columna según la celda order
• Usar display: none para alternar tanto para usuarios visuales como para lectores de pantalla

Vea las Tablas sensibles al lápiz (tabulaciones y acordeones) de Programar Plus(@ css-tricks) en CodePen.

Otras mejoras

Alinear el contenido de la celda
Agregue márgenes de columna compensando el ancho de las celdas
Rayas de cebra en la mesa
Emule tramos de columna con anchos de celda manuales.
Limitación: no hay forma de hacer intervalos de filas en una tabla flexible.

Puede usar el mismo estilo de celda para otros tipos de marcado

¡Incluso marcado de tabla estándar!

Consulte las tablas receptivas de lápiz (marcado alternativo) de Programar Plus(@ css-tricks) en CodePen.

Fallbacks para no-flexbox

IE9 y versiones anteriores no son compatibles con flexbox. Para los navegadores más antiguos, puede detectar flexbox (con Modernizer) y mostrar la versión móvil, que es un buen ejemplo de degradación elegante.

.no-flexbox .Rtable > .Rtable-cell { 
  display: block; 
}

Conclusión

En general, este método ofrece tanta flexibilidad que podría considerar reemplazar todas sus tablas de contenido con estas técnicas. Puede continuar agregando diferentes temas y estilos con facilidad en CSS y los diseñadores serán mucho más efectivos si comprenden de antemano de qué son capaces las tablas receptivas.

Otros recursos de Responsive Tables

• Aquí en CSS-Tricks: resumen de tabla de datos receptivos
• David Bushell: CSS solo tablas receptivas
• Grupo de filamentos: Tablesaw (un grupo de complementos para tablas receptivas).
• Jason Grigsby: Elegir una solución de tablas receptivas
• Aquí en CSS-Tricks: Tablas de datos receptivas
• Cody House: una tabla de comparación de productos (receptivos)

Esta publicación se publicó originalmente en CodePen.