Table

La Table organiza datos en filas y columnas para que se puedan leer y comparar. Usa un <table> real y puede incluir selección de filas y un pie con paginación.

Propiedades y configuraciones

Cuando usarlo

Úsala cuando la persona necesita revisar o comparar varios registros con los mismos atributos: pagos y cuotas, historial de solicitudes, montos de un beneficio por período o una ficha de datos personales (variante vertical).

Buenas prácticas

Recomendado: Alinea las cifras a la derecha

Con la alineación numérica los dígitos quedan en columna y los montos se comparan de un vistazo.

Recomendado: Escribe encabezados breves que nombren el dato

Una o dos palabras por encabezado, con la unidad si aplica. Así se entiende la tabla sin leer las celdas.

Recomendado: Usa la tabla vertical para fichas de datos

Para los datos de un solo registro, pon el nombre de cada dato en la primera columna.

Recomendado: Pagina las tablas largas e informa el total

Muestra una cantidad manejable por página y usa el pie para indicar el total y avanzar.

Malas prácticas

No recomendado: No la uses para una sola columna de datos

Un dato por fila no se compara con nada: el marco y el encabezado sobran. Usa un Item list.

No recomendado: No agregues columnas que no ayudan a decidir

Identificadores internos y datos repetidos obligan a desplazarse en horizontal y esconden lo importante.

No recomendado: No dejes celdas vacías sin explicación

Una celda en blanco no dice si el dato falta, está pendiente o no aplica. Escríbelo.

No recomendado: No uses encabezados genéricos

“Dato” o “Valor” no explican qué contiene cada columna y obligan a deducirlo de las celdas.

Recomendaciones de accesibilidad

Da un nombre a la tabla
Usa un <caption> (visible o con cl-visually-hidden) o aria-labelledby hacia el título de la sección, para que el lector de pantalla anuncie qué datos contiene antes de recorrerla.

Mantén scope en los encabezados
Los encabezados de columna van como <th scope="col"> y, en la variante vertical, como <th scope="row">. Así cada celda se anuncia junto a su encabezado.

Nombra cada checkbox con su fila
En tablas seleccionables, el texto oculto del checkbox debe identificar el registro (“Seleccionar solicitud 48213”), no un “Seleccionar fila” repetido.

Sincroniza aria-selected con la selección
Cada fila seleccionable expone aria-selected; actualízalo cuando cambie su checkbox para que el estado anunciado coincida con el visual.

Haz accesible el scroll horizontal
Si la tabla desborda, el marco __scroll debe poder recibir foco (tabindex="0") con un nombre (role="region" + aria-label) para desplazarlo con el teclado.

No uses la tabla para maquetar
Reserva <table> para datos tabulares. Usarla para ubicar textos o botones hace que el lector de pantalla anuncie filas y columnas que no existen.

Anuncia el contexto de la paginación
El pie usa <nav aria-label> y aria-current="page". Actualiza el contador (“Mostrando 1 - 5 de 18”) al cambiar de página para que el cambio sea perceptible.