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

<div style="inline-size: 100%"><div class="feitio-table-scroll" tabindex="0" role="region" aria-label="Nom"><table class="feitio-table"><thead><tr><th scope="col">Nom</th><th scope="col">Quand</th><th scope="col">Statut</th><th scope="col" data-align="end">Exécutions</th><th scope="col"><span class="feitio-visually-hidden">Actions</span></th></tr></thead><tbody><tr><td class="title">Sauvegarde hebdomadaire</td><td data-label="Quand">Dimanche, 3 h</td><td data-label="Statut"><span class="feitio-tag" data-status="ok"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-check"></use></svg>À jour</span></td><td data-align="end" data-label="Exécutions">48</td><td class="actions"><a class="feitio-button" href="#playground" data-size="small">Modifier<span class="feitio-visually-hidden"> Sauvegarde hebdomadaire</span></a></td></tr><tr><td class="title">Arroser les plantes</td><td data-label="Quand">Mardi, 9 h</td><td data-label="Statut"><span class="feitio-tag" data-status="warn"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-warn"></use></svg>En retard</span></td><td data-align="end" data-label="Exécutions">3</td><td class="actions"><a class="feitio-button" href="#playground" data-size="small">Modifier<span class="feitio-visually-hidden"> Arroser les plantes</span></a></td></tr></tbody></table></div></div>

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

<div class="feitio-table-scroll" tabindex="0" role="region" aria-labelledby="agendamentos">
  <table class="feitio-table">
    <caption id="agendamentos">Agendamentos</caption>
    <thead><tr><th scope="col">Nome</th>…<th scope="col" data-align="end">Disparos</th></tr></thead>
    <tbody><tr><td class="title">Backup semanal</td>…<td data-align="end" data-label="Disparos">48</td></tr></tbody>
  </table>
</div>

<td class="title">Backup semanal</td>
<td data-label="Quando">Domingo, 3h</td>

<th scope="col" aria-sort="ascending"><a href="?ordem=prazo">Prazo…</a></th>

<form action="/tarefas/lote" method="post">
  <button type="submit" name="acao" value="concluir" class="feitio-button" data-size="small">Concluir selecionadas</button>
  …
  <td class="select"><input type="checkbox" name="ids" value="12" aria-label="Selecionar revisar o contrato"></td>
</form>

Sans lignes, le tableau devient un EmptyState, à la place des lignes. Jamais un seul en-tête sans ce qui suit.

Anatomie

É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

É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é

• <caption> avec le nom et <th scope="col"> 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