Cuándo usar
Usar una tabla cuando las personas deben comparar valores por filas y columnas.
- Elegir el elemento HTML nativo antes de agregar una primitiva interactiva.
- Mantener el nombre, el resultado y la acción visibles sin depender de un icono.
- Documentar cualquier excepción en el producto consumidor.
Ejemplo visible
Indicadores regionales · 2026-T2| Región | Tasa | Variación anual |
|---|
| Valparaíso | 8,1% | +0,4 pp |
|---|
| Biobío | 7,6% | −0,2 pp |
|---|
Anatomía
| Parte | Contrato |
|---|
| 1 | Caption |
| 2 | Encabezados con scope |
| 3 | Cuerpo |
| 4 | Unidades |
| 5 | Controles de orden y acciones |
Estados y variantes
| Estado | Comportamiento esperado |
|---|
| default | Todas las columnas esenciales |
| sorted | aria-sort y dirección visible |
| selected | Checkbox con alcance claro |
| loading | Encabezado estable y estado |
| empty | Explica filtros y acción |
| error | Conserva contexto y reintento |
Accesibilidad
- Caption identifica el conjunto.
- No usar tabla para layout.
- La versión móvil mantiene relaciones encabezado-valor.
- Las acciones por fila tienen nombre con objeto.
HTML de referencia
Código de referencia<table class="cis-table">
<caption>Indicadores regionales</caption>
<thead><tr><th scope="col">Región</th><th scope="col">Tasa</th></tr></thead>
<tbody><tr><th scope="row">Valparaíso</th><td>8,1%</td></tr></tbody>
</table>
Definition of Done
- Ejemplo visible y código copiable coinciden.
- Teclado, foco, nombre accesible y estado fueron probados.
- El componente funciona sin JavaScript o declara una mejora progresiva acotada.
- Los mensajes cumplen core/prosa en modo estricto.
- La promoción registra versión, compatibilidad y prueba de regresión.
