# Table
Un tableau organise de nombreux éléments du même type en lignes et colonnes, pour comparer et agir. Sur mobile, chaque ligne devient une carte.
## Playground
```html
```
## Quand l'utiliser
- Pour des éléments comparés selon les mêmes caractéristiques : plannings avec quand et qui, services avec statut.
- Sur les écrants de travail, presque toujours avec `data-density="compact"`.
## Quand ne pas l'utiliser
- **Un élément, plusieurs caractéristiques :** SummaryList.
- **Choses à faire, chacune avec un statut :** TaskList.
- **Pour disposer la page :** un tableau est des données, jamais du positionnement.
## Exemples
### Un tableau de travail
Titre, en-tête avec la ligne d'encre, numéros à droite et actions de chaque ligne à la fin.
Afficher le code
```html
Agendamentos
Nome
…
Disparos
Backup semanal
…
48
```
### Sur mobile
Dans un boîtier plus étroit que 40rem, chaque ligne devient une carte : le nom en haut, chaque valeur avec son nom de colonne à côté (`data-label`), les actions en dessous.
Afficher le code
```html
Backup semanal
Domingo, 3h
```
### Trier par en-tête
La colonne de tri est un lien : le serveur retourne la page triée. La colonne triée obtient `aria-sort` et la flèche.
Afficher le code
```html
```
### Action par lot
Une case par ligne et les actions par lot en haut, dans de petits boutons. C'est un formulaire : les cases cochées vont de pair avec le bouton pressé.
Afficher le code
```html
```
Sans lignes, le tableau devient un [EmptyState](/fr/components/emptystate/), à la place des lignes. Jamais un seul en-tête sans ce qui suit.
## Anatomie
1. **Légende :** le nom du tableau, lu par les lecteurs d'écran.
2. **En-tête :** texte doux, avec la ligne d'encre en dessous.
3. **Ligne :** séparée de la suivante par une fine ligne.
4. **Chiffres** à droite, avec des chiffres de même largeur.
5. **Action de ligne :** un petit bouton, à la fin.
## États
- **Survol d'une ligne :** un ton légèrement plus foncé, très léger, pour que l'œil garde la ligne. Ce n'est pas une sélection.
- **Densité :** confortable pour la lecture, compacte sur les écrans de travail ; le commutateur s'anime.
- **Cadre étroit :** chaque ligne devient une carte. **Cadre moyen et tableau large :** il défile dans sa propre boîte ; la page ne défile jamais de côté.
## Faire et ne pas faire
Do
Élément
Valeur
Photos
1.204
Vidéos
38
Chiffres à droite : les chiffres s'alignent et la comparaison est par l'œil.
Don’t
Élément
Valeur
Photos
1.204
Vidéos
38
Tout centré : les nombres ne s'alignent pas.
Do
Sauvegarde
Modifier
L'action avec un mot, petite, à la fin de la ligne.
Don’t
Sauvegarde
Plantes
Bandes alternées et actions uniquement iconiques : du bruit, et personne ne sait ce que fait l'icône.
## Écriture
- En-tête : un ou deux mots, sans répéter l'unité dans chaque cellule.
- Cellule vide : un tiret, avec du texte caché (« pas de date d'échéance ») pour les lecteurs d'écran.
## Accessibilité
- `
` avec le nom et `
` sur chaque en-tête.
- L'action de chaque ligne indique à quelle elle appartient (« Modifier la sauvegarde hebdomadaire »), avec du texte caché.
- La boîte déroulante est une région nommée et prend le focus.
## Attributs
Attribut
Valeurs
Pour quoi
`class="feitio-table"`
obligatoire
Lignes de cheveux, en-tête avec la ligne d'encre, figures de même largeur.
`class="feitio-table-scroll" tabindex="0"`
autour
Il mesure sa propre largeur : étroit, il se transforme en cartes ; moyen, il défile. Avec `tabindex="0"`, `role="region"` et un nom.
`class="title"`
sur la cellule du nom
Le titre de la carte sur mobile.
`data-label`
sur les autres cellules
Le nom de la colonne, à côté de la valeur sur la carte.
`data-align="end"`
sur la colonne des nombres
Nombres à droite.
`class="actions"`
sur la cellule des actions
Petits boutons, à la fin.
`aria-sort`
`"ascending"`, `"descending"`
Sur la colonne triée.