Table

Eine Tabelle ordnet viele gleichartige Elemente in Zeilen und Spalten an, um zu vergleichen und zu handeln. Auf mobilen Geräten wird jede Zeile zu einer Karte.

Playground

<div style="inline-size: 100%"><div class="feitio-table-scroll" tabindex="0" role="region" aria-label="Name"><table class="feitio-table"><thead><tr><th scope="col">Name</th><th scope="col">Wann</th><th scope="col">Status</th><th scope="col" data-align="end">Läufe</th><th scope="col"><span class="feitio-visually-hidden">Aktionen</span></th></tr></thead><tbody><tr><td class="title">Wöchentliche Sicherung</td><td data-label="Wann">Sonntag, 3 Uhr</td><td data-label="Status"><span class="feitio-tag" data-status="ok"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-check"></use></svg>Pünktlich</span></td><td data-align="end" data-label="Läufe">48</td><td class="actions"><a class="feitio-button" href="#playground" data-size="small">Bearbeiten<span class="feitio-visually-hidden"> Wöchentliche Sicherung</span></a></td></tr><tr><td class="title">Pflanzen gießen</td><td data-label="Wann">Dienstag, 9 Uhr</td><td data-label="Status"><span class="feitio-tag" data-status="warn"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-warn"></use></svg>Verspätet</span></td><td data-align="end" data-label="Läufe">3</td><td class="actions"><a class="feitio-button" href="#playground" data-size="small">Bearbeiten<span class="feitio-visually-hidden"> Pflanzen gießen</span></a></td></tr></tbody></table></div></div>

Wann verwenden

• Für verglichenen Elemente mit denselben Merkmalen: Zeitpläne mit wann und wer, Dienstleistungen mit Status.
• Auf Arbeitsbildschermen fast immer mit data-density="compact".

Wann nicht verwenden

• Eines Element, mehrere Merkmale: SummaryList.
• Dinge zu tun, jeder mit einem Status: TaskList.
• Um die Seite anzuordnen: eine Tabelle ist Daten, nie Positionierung.

Beispiele

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

Ohne Zeilen wird die Tabelle zu einem EmptyState, anstelle der Zeilen. Niemals nur ein Header ohne etwas darunter.

Anatomie

States

• Hovern Sie über eine Zeile: etwas dunklerer Ton, sehr hell, damit das Auge die Zeile verfolgt. Es ist keine Auswahl.
• Dichte: angenehm zum Lesen, kompakt auf Arbeitsmonitoren; der Umschalter animiert.
• Eingebetteter Kasten: jede Zeile wird zu einer Karte. Mittlerer Kasten und breite Tabelle: scrollt in seinem eigenen Kasten; die Seite scrollt nie seitwärts.

Do and don't

Schreiben

• Überschrift: ein oder zwei Wörter, ohne das Einheit in jeder Zelle zu wiederholen.
• Leere Zelle: ein Bindestrich, mit verstecktem Text ("kein Termin") für Screenreader.

Barrierefreiheit

• <caption> mit dem Namen und <th scope="col"> in jeder Überschrift.
• Die Aktion jeder Zeile sagt, zu welcher Zeile sie gehört ("Wöchentliche Sicherung bearbeiten"), mit verstecktem Text.
• Das scrollende Feld ist ein benanntes Bereich und nimmt den Fokus.

Attribute