# 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

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

### Arbeitsplatz

Überschrift, Kopfzeile mit Strichlinie, Zahlen rechts und Aktionen am Ende jeder Zeile.

Code anzeigen

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

### Auf Mobilgeräten

In einem Box-Element enger als 40rem wird jede Zeile zu einer Karte: der Name oben, jeder Wert mit seinem Spaltennamen daneben (`data-label`), die Aktionen unten.

Code anzeigen

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

### Sortieren nach Kopfzeile

Die Sortier-Spalte ist ein Link: der Server gibt die sortierte Seite zurück. Die sortierte Spalte erhält `aria-sort` und den Pfeil.

Code anzeigen

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

### Batch-Aktion

Ein Feld pro Zeile und die Batch-Aktionen oben in kleinen Buttons. Es ist ein Formular: die gekreuzten Kästchen gehen mit dem gedrückten Button einher.

Code anzeigen

```html
<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](/de/components/emptystate/), anstelle der Zeilen. Niemals nur ein Header ohne etwas darunter.

## Anatomie

1.  **Überschrift:** der Name der Tabelle, von Screenreadern gelesen.
2.  **Kopfzeile:** weicher Text mit einer Tintenlinie darunter.
3.  **Zeile:** durch eine Haardicke von der nächsten getrennt.
4.  **Zahlen** rechtsbündig, gleiche Breite der Ziffern.
5.  **Handlung in Zeile:** ein kleiner Button am Ende.

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

Do

Element

Wert

Fotos

1.204

Videos

38

Zahlen rechtsbündig: Die Ziffern stehen in einer Linie und der Vergleich ist auf den ersten Blick möglich.

Don’t

Element

Wert

Fotos

1.204

Videos

38

Alles zentriert: die Zahlen sind nicht ausgerichtet.

Do

Sicherungskopie

Bearbeiten

Die Aktion mit einem Wort, klein, am Ende der Zeile.

Don’t

Sicherungskopie

Pflanzen

Wechselnde Streifen und nur-Ikon-Aktionen: Rauschen, und niemand weiß, was die Ikone tut.

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

Attribut

Werte

Zum Zweck

`class="feitio-table"`

erforderlich

Kopfstücke, Überschrift mit der Tinte Linie, gleich breite Figuren.

`class="feitio-table-scroll" tabindex="0"`

um

Misst seine eigene Breite: eng, wird es zu Karten; mittel, scrollt es. Mit `tabindex="0"`, `role="region"` und einem Namen.

`class="title"`

auf der Namen-Zelle

Der Kartentitel auf dem Handy.

`data-label`

auf den anderen Zellen

Der Spaltenname, neben dem Wert auf der Karte.

`data-align="end"`

auf der Zahlen-Spalte

Zahlen rechts.

`class="actions"`

auf der Aktionen-Zelle

Kleine Buttons, am Ende.

`aria-sort`

`"ascending"`, `"descending"`

Auf der sortierten Spalte.