FigmaOpenCode

Table

Synonyme: Tabelle, DataTable
Ähnliche Komponenten: List

Kurzbeschreibung

Stellt Daten in tabellarischer Form dar und ermöglicht einen einfachen Vergleich sowie schnelles Erfassen von Informationen.

Beispiele

Default Table

Code anzeigen

<table class="kern-table">
<caption class="kern-table__caption">Autovermietung Flotte</caption>

<thead class="kern-table__head">
  <tr class="kern-table__row">
    <th scope="col" class="kern-table__header">Marke</th>
    <th scope="col" class="kern-table__header">Verfügbarkeit</th>
    <th scope="col" class="kern-table__header kern-table__header--numeric">Tagespreis</th>
  </tr>
</thead>

<tbody class="kern-table__body">
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">BMW</th>
    <td class="kern-table__cell">Frei</td>
    <td class="kern-table__cell kern-table__cell--numeric">69,00 €</td>
  </tr>
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Fiat</th>
    <td class="kern-table__cell">Vermietet</td>
    <td class="kern-table__cell kern-table__cell--numeric">49,59 €</td>
  </tr>
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">VW</th>
    <td class="kern-table__cell">Frei</td>
    <td class="kern-table__cell kern-table__cell--numeric">54,99 €</td>
  </tr>
</tbody>

</table>

Striped Table

Code anzeigen

<table class="kern-table kern-table--striped">
<caption class="kern-table__caption">Autovermietung Flotte</caption>

<thead class="kern-table__head">
  <tr class="kern-table__row">
    <th scope="col" class="kern-table__header">Marke</th>
    <th scope="col" class="kern-table__header">Verfügbarkeit</th>
    <th scope="col" class="kern-table__header kern-table__header--numeric">Tagespreis</th>
  </tr>
</thead>

<tbody class="kern-table__body">
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">BMW</th>
    <td class="kern-table__cell">Frei</td>
    <td class="kern-table__cell kern-table__cell--numeric">69,00 €</td>
  </tr>
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Fiat</th>
    <td class="kern-table__cell">Vermietet</td>
    <td class="kern-table__cell kern-table__cell--numeric">49,59 €</td>
  </tr>
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">VW</th>
    <td class="kern-table__cell">Frei</td>
    <td class="kern-table__cell kern-table__cell--numeric">54,99 €</td>
  </tr>
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Audi</th>
    <td class="kern-table__cell">Frei</td>
    <td class="kern-table__cell kern-table__cell--numeric">84,99 €</td>
  </tr>
</tbody>

</table>

Table Footer

Code anzeigen

<table class="kern-table">
<caption class="kern-table__caption">Kino Besucherzahlen</caption>

<thead class="kern-table__head">
  <tr class="kern-table__row">
    <th scope="col" class="kern-table__header">Wochentag</th>
    <th scope="col" class="kern-table__header kern-table__header--numeric">Besucherzahl</th>
    <th scope="col" class="kern-table__header kern-table__header--numeric">Tagesumsatz</th>
  </tr>
</thead>

<tbody class="kern-table__body">
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Montag</th>
    <td class="kern-table__cell kern-table__cell--numeric">320</td>
    <td class="kern-table__cell kern-table__cell--numeric">3439,00 €</td>
  </tr>
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Dienstag</th>
    <td class="kern-table__cell kern-table__cell--numeric">445</td>
    <td class="kern-table__cell kern-table__cell--numeric">5043,90 €</td>
  </tr>
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Mittwoch</th>
    <td class="kern-table__cell kern-table__cell--numeric">686</td>
    <td class="kern-table__cell kern-table__cell--numeric">7336,60 €</td>
  </tr>
</tbody>

<tfoot class="kern-table__footer">
  <tr class="kern-table__row">
    <th scope="col" class="kern-table__header">Durchschnitt</th>
    <th scope="col" class="kern-table__header kern-table__header--numeric">483,67</th>
    <th scope="col" class="kern-table__header kern-table__header--numeric">5273,17 €</th>
  </tr>
</tfoot>
</table>

Responsive Table

Code anzeigen

<div class="kern-table--responsive">
<table class="kern-table kern-table--striped">
  <caption class="kern-table__caption">Autovermietung Flotte</caption>

  <thead class="kern-table__head">
    <tr class="kern-table__row">
      <th scope="col" class="kern-table__header">Marke</th>
      <th scope="col" class="kern-table__header">Model</th>
      <th scope="col" class="kern-table__header">Baujahr</th>
      <th scope="col" class="kern-table__header">Farbe</th>
      <th scope="col" class="kern-table__header kern-table__header--numeric">PS</th>
      <th scope="col" class="kern-table__header">Verfügbarkeit</th>
      <th scope="col" class="kern-table__header kern-table__header--numeric">Tagespreis</th>
      <th scope="col" class="kern-table__header kern-table__header--numeric">Wochenpreis</th>
      <th scope="col" class="kern-table__header kern-table__header--numeric">Monatspreis</th>
      <th scope="col" class="kern-table__header kern-table__header--numeric">Jahrespreis</th>
    </tr>
  </thead>

  <tbody class="kern-table__body">
    <tr class="kern-table__row">
      <th scope="row" class="kern-table__header">BMW</th>
      <td class="kern-table__cell">5er</td>
      <td class="kern-table__cell">2020</td>
      <td class="kern-table__cell">Rot</td>
      <td class="kern-table__cell kern-table__cell--numeric">89</td>
      <td class="kern-table__cell">Frei</td>
      <td class="kern-table__cell kern-table__cell--numeric">69,00 €</td>
      <td class="kern-table__cell kern-table__cell--numeric">369,00 €</td>
      <td class="kern-table__cell kern-table__cell--numeric">1169,00 €</td>
      <td class="kern-table__cell kern-table__cell--numeric">6069,00 €</td>
    </tr>
    <tr class="kern-table__row">
      <th scope="row" class="kern-table__header">Audi</th>
      <td class="kern-table__cell">A6</td>
      <td class="kern-table__cell">2021</td>
      <td class="kern-table__cell">Schwarz</td>        
      <td class="kern-table__cell kern-table__cell--numeric">77</td>
      <td class="kern-table__cell">Frei</td>
      <td class="kern-table__cell kern-table__cell--numeric">59,00 €</td>
      <td class="kern-table__cell kern-table__cell--numeric">319,00 €</td>
      <td class="kern-table__cell kern-table__cell--numeric">1069,00 €</td>
      <td class="kern-table__cell kern-table__cell--numeric">5069,00 €</td>
    </tr>
    <tr class="kern-table__row">
      <th scope="row" class="kern-table__header">Mercedes</th>
      <td class="kern-table__cell">200D</td>
      <td class="kern-table__cell">1994</td>
      <td class="kern-table__cell">Weiß</td>
      <td class="kern-table__cell kern-table__cell--numeric">105</td>
      <td class="kern-table__cell">Frei</td>
      <td class="kern-table__cell kern-table__cell--numeric">49,00 €</td>
      <td class="kern-table__cell kern-table__cell--numeric">269,00 €</td>
      <td class="kern-table__cell kern-table__cell--numeric">969,00 €</td>
      <td class="kern-table__cell kern-table__cell--numeric">3069,00 €</td>
    </tr>
  </tbody>

</table>
</div>

Beschreibung

Eine Tabelle ist eine strukturierte Darstellung von Daten in Zeilen und Spalten. Sie ist eine statische tabellarische Struktur mit einer oder mehreren Zeilen, die jeweils eine oder mehrere Zellen enthalten. Es handelt sich dabei nicht um ein interaktives Widget.

Aufbau einer Tabelle

• Caption (optional): Beschreibt den Inhalt der Tabelle und dient als Titel, ähnlich einer Überschrift. Sie sollte prägnant und informativ sein.
• Header: Enthält die Spaltenüberschriften und bietet Kontext zu den dargestellten Daten.
• Body: Beinhaltet die Datenzeilen der Tabelle. Jede Zeile repräsentiert einen Datensatz, jede Spalte ein Attribut dieses Datensatzes. Zur besseren Lesbarkeit können die Zeilen gestreift dargestellt werden.
• Footer (optional): Wird verwendet, um Summen, Berechnungen oder Zusatzinformationen darzustellen. Er steht typischerweise unterhalb des Bodys.

Verwendungsregeln

• Klarheit und Übersichtlichkeit: Vermeide überladene Tabellen. Beschränke die Anzahl der Spalten auf das Wesentliche.
• Lesbare Beschriftungen: Spaltenüberschriften sollten kurz und prägnant sein.
• Verbesserte Lesbarkeit durch Streifen: Die Zeilen einer Tabelle lassen sich optisch besser erfassen, wenn jede zweite Zeile grau hinterlegt ist.

Dos und Don’ts

Dos

• Verwende Tabellen für die Darstellung strukturierter Daten.
• Nutze visuelle Hervorhebungen (fett, Farbe) für wichtige Datenpunkte.
• In Spalten, die ausschließlich Zahlen enthalten, sollten die Werte stets rechtsbündig ausgerichtet werden, um einen leichteren Vergleich zu ermöglichen.

Don’ts

• Nutze Tabellen nicht für unstrukturierte Inhalte.
• Überlade die Tabelle nicht mit zu vielen Spalten oder Daten.
• Verwende keine unverständlichen Abkürzungen oder Symbole ohne Erklärung.
• Verwende zum Layouten von Inhalten auf einer Seite niemals die Tabellenkomponente. Verwenden stattdessen ein Gridsystem.

Barrierefreiheit

Diese Komponente erfüllt die formalen Eigenschaften (Größe, Kontrastverhältnis) für barrierefreie Dienste. Achte in der angewandten Nutzung darauf, dass die Tabellen auch für Menschen mit kognitiven Beeinträchtigungen verständlich sind.

• Verwende das <table>-Element, um die Tabelle zu erstellen, und die <th>, <tr>, <td>, <thead>, <tbody> und <tfoot>-Elemente, um die verschiedenen Teile der Tabelle zu strukturieren.
• Verwende das Element <caption class="kern-table__caption">, um eine Tabelle auf die gleiche Weise zu beschreiben, wie mit einer Überschrift. Eine Überschrift hilft Benutzern, Tabellen zu finden, darin zu navigieren und sie zu verstehen.
• Verwende das Scope-Attribut Bsp. scope="col", um Benutzern von Hilfstechnologien dabei zu helfen, zwischen Zeilen- und Spaltenüberschriften zu unterscheiden.
• Stelle sicher, dass alle Tabellenüberschriften klar und prägnant sind.
• Verwende keine Sonderzeichen als Icons innerhalb der Tabellenüberschriften oder Zellen, da diese vom Screenreader als Schrift interpretiert und vorgelesen werden können.
• Falls Sonderzeichen zwingend genutzt werden müssen, sollten diese über ein aria-hidden="true" für den Screenreader versteckt werden.
• Verwende das aria-describedby-Attribut, um zusätzliche Informationen mit den entsprechenden Tabellenzellen zu verknüpfen.

Siehe auch: BFIT Handreichungen