Tablas de datos: diseño para escanear, comparar y actuar

Una tabla de datos debe permitir encontrar, comparar y actuar sobre filas. Cómo alinear números, marcar el orden y usar el marcado accesible del W3C.

info Definición Rápida

Una tabla de datos es una forma de mostrar información en filas y columnas para que la persona pueda escanear, comparar y actuar sobre registros. Su valor no está en verse ordenada, sino en que cada columna signifique algo y cada fila pueda revisarse sin perder el contexto.

¿Qué debe permitir una tabla?

El NN/g describe cuatro tareas que una tabla debe soportar: encontrar registros que cumplan criterios, comparar datos, ver, editar o agregar los datos de una fila, y actuar sobre registros (NN/g: Data Tables: Four Major User Tasks, Page Laubheimer, 2022). Esa lista sirve para revisar cualquier tabla: si falla una tarea, probablemente falta una función o sobra una columna.

Para encontrar, el NN/g pide filtros que se descubran rápido y que indiquen con claridad cuándo están activos, además de búsqueda. Para comparar, ocultar y reordenar columnas debe ser fácil, con indicadores visibles de las columnas ocultas. Para actuar sobre varios registros, la tabla usa una casilla por fila y controles de acción arriba o debajo de la tabla; una opción «Seleccionar todo» ayuda cuando la misma acción suele aplicarse a todo el conjunto. El NN/g advierte que las acciones escondidas bajo un gesto de hover o un menú genérico «Acciones» son difíciles de descubrir.

Cuando la tabla es más grande que la pantalla, el NN/g recomienda congelar las filas y columnas de encabezado. Los bordes, las filas alternadas y el resaltado al pasar el cursor también ayudan a no perder el lugar.

¿Cómo se alinean los números y el texto?

El sistema de diseño Pajamas de GitLab da una regla concreta: el texto se alinea a la izquierda, sin justificar ni centrar, y los datos numéricos pueden alinearse a la derecha con un número constante de decimales para mejorar el escaneo (GitLab Pajamas: Table). Alineados así, los dígitos de unidades, decenas y centenas quedan en la misma posición vertical y se comparan de un vistazo.

Pajamas también permite alinear a la derecha el encabezado de una columna numérica, incluso cuando es ordenable, y señala que la alineación dentro de una tabla importa más que la consistencia entre tablas. La regla práctica: el encabezado sigue la alineación de sus datos, y esa alineación no cambia dentro de la misma columna.

¿Cómo se marca el orden?

Una columna ordenable debe mostrar cuál está activa y en qué dirección. En Pajamas, el orden se indica en el encabezado con una flecha, y el primer clic ordena de forma ascendente y los siguientes alternan con descendente. El sistema Carbon, de IBM, define tres estados (sin orden, ascendente y descendente); solo la columna ordenada muestra un icono permanente, y los iconos de las demás aparecen al pasar el cursor (IBM Carbon: Data table).

Para lectores de pantalla, el atributo aria-sort comunica el mismo estado. El ejemplo de tabla ordenable de la guía de prácticas de WAI-ARIA lo pone en el th de la columna ordenada y lo quita de la columna anterior cuando cambia el orden (W3C WAI-ARIA APG: Sortable table). El orden inicial depende del uso: en una lista de contratos, por fecha de vencimiento puede ser lo más útil, pero no hay una regla universal.

¿Qué marcado accesible necesita?

El W3C separa tres piezas. Las celdas de encabezado se marcan con th y las de datos con td. Con dos encabezados (fila y columna), el atributo scope con el valor col o row indica la dirección de cada uno (W3C WAI: Tables with two headers). Y el título de la tabla va en un elemento caption dentro de table.

Para tablas con encabezados irregulares, scope admite también los valores colgroup y rowgroup (W3C WAI: Tables with irregular headers). Para encabezados de varios niveles, cada encabezado recibe un id y las celdas de datos lo citan en su atributo headers, separando varios id con espacios (W3C WAI: Tables with multi-level headers).

Un resumen de una tabla compleja puede ir dentro del caption, en un elemento referenciado con aria-describedby o en un figcaption dentro de figure. El W3C advierte que esta última opción puede hacer que el título y el resumen se lean varias veces (W3C WAI: Caption and summary).

¿Cómo se ve en móvil?

Pajamas ofrece dos caminos: mantener el formato de tabla y permitir el desplazamiento horizontal sin romper el diseño de la página, o convertir cada fila en su propio grupo. Su criterio es claro: si hay que comparar filas, conserva la tabla; si el contenido de cada fila puede entenderse solo, sin comparación, apílalo. En la versión apilada, el icono y la función de orden no deben mostrarse.

La decisión depende entonces de cuántas columnas necesita comparar la persona. Lo que no ayuda es esconder columnas sin avisar: si una columna queda fuera de la vista, la persona debe saber que existe y cómo verla.

Ejemplo ilustrativo

Ejemplo ilustrativo: un equipo de compras de una empresa de logística revisa cuatro proveedores con precio, tiempo de entrega, cumplimiento y contrato. La tabla original tenía doce columnas, ninguna con alineación consistente, y el encabezado se perdía al bajar. El rediseño deja seis columnas, alinea los números a la derecha con dos decimales, congela el encabezado y marca la columna de orden activa con su dirección. En móvil, cada proveedor se muestra como grupo apilado con las tres métricas principales, y las demás columnas quedan en una pantalla de detalle. La meta es que los compradores elijan con menos pasos y dejen de copiar cifras a una hoja aparte.

Si la tabla funciona como listado con muchos criterios, revisa filtros y búsqueda facetada. Y si la tabla tarda en cargar, los estados de carga explican cómo mostrar el progreso sin dejar la pantalla en blanco.

Las acciones sobre filas deben seguir la jerarquía de botones: una acción principal por pantalla y la acción destructiva lejos del foco por defecto.

Errores comunes

Alinear números al centro o a la izquierda, lo que impide compararlos.
Tener encabezados alineados distinto a sus datos.
Marcar columnas ordenables sin indicar la dirección activa.
Usar div para simular una tabla sin marcar encabezados, de modo que los lectores de pantalla no entienden la relación entre celdas.
Esconder columnas en móvil sin que la persona sepa que existen.
Poner una acción destructiva al lado de un botón de consulta sin confirmación.

Qué puedes hacer mañana

Revisa tu tabla más usada y verifica que los números estén a la derecha con los mismos decimales.
Abre el código y confirma que los encabezados usan th y que la tabla tiene un caption.
Pide a dos personas que encuentren el registro más caro de una columna. Si dudan o recurren a una hoja de cálculo, falta un orden visible o un filtro.

Fuentes

Preguntas frecuentes

¿Qué tareas debe permitir una tabla de datos?

Según el NN/g, cuatro: encontrar registros que cumplan criterios, comparar datos, ver, editar o agregar los datos de una fila y actuar sobre los registros. Una tabla que no sirve para una de ellas suele fallar en la práctica.

¿Cómo se alinean los números en una tabla?

El sistema de diseño Pajamas de GitLab alinea el texto a la izquierda y, cuando ayuda a la lectura, los números a la derecha con una cantidad constante de decimales para facilitar el escaneo.

¿Qué marcado HTML necesita una tabla accesible?

Las celdas de encabezado usan th y las de datos td. Con dos encabezados, scope con el valor col o row indica la dirección de cada uno. El título de la tabla va en un elemento caption.

¿Cómo se maneja una tabla en móvil?

Hay dos caminos: mantener el formato de tabla con desplazamiento horizontal, o convertir cada fila en un grupo apilado. Si las filas se comparan entre sí, conviene mantener la tabla.