# Table
Una tabla organiza muchos elementos del mismo tipo en filas y columnas, para comparar y actuar. En móvil, cada fila se convierte en una tarjeta.
## Playground
```html
```
## Cuándo usarlo
- Para elementos comparados por las mismas características: horarios con cuándo y quién, servicios con estado.
- En pantallas de trabajo, casi siempre con `data-density="compact"`.
## Cuándo no usarlo
- **Un elemento, varias características:** SummaryList.
- **Cosas por hacer, cada una con un estado:** TaskList.
- **Para maquetar la página:** una tabla es datos, nunca posicionamiento.
## Ejemplos
### Una mesa de trabajo
Encabezado con la línea de tinta, números a la derecha y cada acción de fila al final.
Mostrar código
```html
```
### En móvil
En un cuadro más estrecho que 40rem, cada fila se convierte en una tarjeta: el nombre arriba, cada valor con su nombre de columna al lado (`data-label`), las acciones abajo.
Mostrar código
```html
| Backup semanal |
Domingo, 3h |
```
### Ordenar por encabezado
La columna de ordenación es un enlace: el servidor devuelve la página ordenada. La columna ordenada obtiene `aria-sort` y la flecha.
Mostrar código
```html
Prazo… |
```
### Acción por lotes
Un cuadro por fila y las acciones por lotes arriba, en botones pequeños. Es un formulario: los cuadros marcados van junto con el botón presionado.
Mostrar código
```html
```
Sin filas, la tabla se convierte en un [EmptyState](/es/components/emptystate/), a la vez de las filas. Nunca un encabezado solo con nada debajo.
## Anatomía
1. **Título:** el nombre de la tabla, leído por lectores de pantalla.
2. **Título:** texto suave, con la línea de tinta debajo.
3. **Fila:** separada de la siguiente por una línea muy fina.
4. **Números** a la derecha, con cifras de anchura igual.
5. **Acción de fila:** un pequeño botón, al final.
## Estados
- **Pasa el ratón sobre una fila:** un tono ligeramente más oscuro, muy claro, para que el ojo mantenga la fila. No es selección.
- **Densidad:** cómodo para leer, compacto en pantallas de trabajo; el interruptor se anima.
- **Caja estrecha:** cada fila se convierte en una tarjeta. **Caja media y tabla ancha:** se desliza dentro de su propia caja; la página nunca se desliza lateralmente.
## Hacer y no hacer
Do
Elemento
Valor
Fotos
1.204
Videos
38
Números a la derecha: las cifras se alinean y la comparación es a simple vista.
Don’t
Elemento
Valor
Fotos
1.204
Videos
38
Todo centrado: los números no se alinean.
Do
Respaldo
Editar
La acción con una palabra, pequeña, al final de la fila.
Don’t
Respaldo
Plantas
Cintas alternadas y acciones solo con iconos: ruido, y nadie sabe qué hace el icono.
## Escritura
- Encabezado: una o dos palabras, sin repetir la unidad en cada celda.
- Celda vacía: un guion, con texto oculto ("no fecha de entrega") para lectores de pantalla.
## Accesibilidad
- `` con el nombre y `` en cada encabezado.
- La acción de cada fila dice a qué fila pertenece ("Editar copia semanal"), con texto oculto.
- El cuadro deslizable es una región nombrada y toma el foco.
## Atributos
Atributo
Valores
Para qué sirve
`class="feitio-table"`
obligatorio
Líneas divisorias, encabezado con la línea de tinta, figuras de mismo ancho.
`class="feitio-table-scroll" tabindex="0"`
alrededor
Mide su propio ancho: estrecho, se convierte en tarjetas; medio, desliza. Con `tabindex="0"`, `role="region"` y un nombre.
`class="title"`
en la celda de nombre
El título de la tarjeta en móvil.
`data-label`
en las otras celdas
El nombre de la columna, junto al valor en la tarjeta.
`data-align="end"`
en la columna numérica
Números a la derecha.
`class="actions"`
en la celda de acciones
Botones pequeños, al final.
`aria-sort`
`"ascending"`, `"descending"`
En la columna ordenada.
|