FigmaOpenCode

Table

Synonyme: Tabelle, DataTable
Ähnliche Komponenten: Description List, Summary

Kurzbeschreibung

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

Beispiele

Varianten

Code anzeigen

<table class="kern-table">
<caption class="kern-title">Table default</caption>

<thead class="kern-table__head">
  <tr class="kern-table__row">
    <th scope="col" class="kern-table__header">Dienstleistung</th>
    <th scope="col" class="kern-table__header">Gebühr 2025</th>
    <th scope="col" class="kern-table__header kern-table__header--numeric">Erhöhung</th>
  </tr>
</thead>

<tbody class="kern-table__body">
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Hausmüllentsorgung</th>
    <td class="kern-table__cell">3,30 € pro Liter (wöchentliche Leerung)</td>
    <td class="kern-table__cell kern-table__cell--numeric">4,8%</td>
  </tr>
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Reinigung öffentlicher Wege</th>
    <td class="kern-table__cell">2,69 € pro m</td>
    <td class="kern-table__cell kern-table__cell--numeric">5,6%</td>
  </tr>
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Schmutzwasserbeseitigung</th>
    <td class="kern-table__cell">2,41 € pro Kubikmeter</td>
    <td class="kern-table__cell kern-table__cell--numeric">4,3%</td>
  </tr>
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Niederschlagswasserbeseitigung</th>
    <td class="kern-table__cell">0,83 € pro m² befestigter Fläche</td>
    <td class="kern-table__cell kern-table__cell--numeric">3,7%</td>
  </tr>
</tbody>
</table>

Code anzeigen

<table class="kern-table kern-table--small">
<caption class="kern-title">Table small</caption>

<thead class="kern-table__head">
  <tr class="kern-table__row">
    <th scope="col" class="kern-table__header">Dienstleistung</th>
    <th scope="col" class="kern-table__header">Gebühr 2025</th>
    <th scope="col" class="kern-table__header kern-table__header--numeric">Erhöhung</th>
  </tr>
</thead>

<tbody class="kern-table__body">
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Hausmüllentsorgung</th>
    <td class="kern-table__cell">3,30 € pro Liter (wöchentliche Leerung)</td>
    <td class="kern-table__cell kern-table__cell--numeric">4,8%</td>
  </tr>
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Reinigung öffentlicher Wege</th>
    <td class="kern-table__cell">2,69 € pro m</td>
    <td class="kern-table__cell kern-table__cell--numeric">5,6%</td>
  </tr>
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Schmutzwasserbeseitigung</th>
    <td class="kern-table__cell">2,41 € pro Kubikmeter</td>
    <td class="kern-table__cell kern-table__cell--numeric">4,3%</td>
  </tr>
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Niederschlagswasserbeseitigung</th>
    <td class="kern-table__cell">0,83 € pro m² befestigter Fläche</td>
    <td class="kern-table__cell kern-table__cell--numeric">3,7%</td>
  </tr>
</tbody>
</table>

Striped

Code anzeigen

<table class="kern-table kern-table--striped">
<caption class="kern-title">Städtische Gebühren</caption>

<thead class="kern-table__head">
  <tr class="kern-table__row">
   <th scope="col" class="kern-table__header">Dienstleistung</th>
    <th scope="col" class="kern-table__header">Gebühr 2025</th>
    <th scope="col" class="kern-table__header kern-table__header--numeric">Erhöhung</th>
  </tr>
</thead>

<tbody class="kern-table__body">
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Hausmüllentsorgung</th>
    <td class="kern-table__cell">3,30 € pro Liter (wöchentliche Leerung)</td>
    <td class="kern-table__cell kern-table__cell--numeric">4,8%</td>
  </tr>
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Reinigung öffentlicher Wege</th>
    <td class="kern-table__cell">2,69 € pro m</td>
    <td class="kern-table__cell kern-table__cell--numeric">5,6%</td>
  </tr>
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Schmutzwasserbeseitigung</th>
    <td class="kern-table__cell">2,41 € pro Kubikmeter</td>
    <td class="kern-table__cell kern-table__cell--numeric">4,3%</td>
  </tr>
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Niederschlagswasserbeseitigung</th>
    <td class="kern-table__cell">0,83 € pro m² befestigter Fläche</td>
    <td class="kern-table__cell kern-table__cell--numeric">3,7%</td>
  </tr>
</tbody>

</table>

Footer

Code anzeigen

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

<thead class="kern-table__head">
  <tr class="kern-table__row">
   <th scope="col" class="kern-table__header">Dienstleistung</th>
    <th scope="col" class="kern-table__header">Gebühr 2025</th>
    <th scope="col" class="kern-table__header kern-table__header--numeric">Erhöhung</th>
  </tr>
</thead>

<tbody class="kern-table__body">
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Hausmüllentsorgung</th>
    <td class="kern-table__cell">3,30 € pro Liter (wöchentliche Leerung)</td>
    <td class="kern-table__cell kern-table__cell--numeric">4,8%</td>
  </tr>
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Reinigung öffentlicher Wege</th>
    <td class="kern-table__cell">2,69 € pro m</td>
    <td class="kern-table__cell kern-table__cell--numeric">5,6%</td>
  </tr>
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Schmutzwasserbeseitigung</th>
    <td class="kern-table__cell">2,41 € pro Kubikmeter</td>
    <td class="kern-table__cell kern-table__cell--numeric">4,3%</td>
  </tr>
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header">Niederschlagswasserbeseitigung</th>
    <td class="kern-table__cell">0,83 € pro m² befestigter Fläche</td>
    <td class="kern-table__cell kern-table__cell--numeric">3,7%</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">-</th>
    <th scope="col" class="kern-table__header kern-table__header--numeric">4,6%</th>
  </tr>
</tfoot>
</table>

Responsiv

Code anzeigen

<div class="kern-table-responsive">
<table class="kern-table kern-table--striped">
  <caption class="kern-title">Gebührenänderungen</caption>
  <thead class="kern-table__head">
    <tr class="kern-table__row">
      <th scope="col" class="kern-table__header">Dienstleistung</th>
      <th scope="col" class="kern-table__header">Alte Gebühr</th>
      <th scope="col" class="kern-table__header">Neue Gebühr</th>
      <th scope="col" class="kern-table__header kern-table__header--numeric">Erhöhung in %</th>
      <th scope="col" class="kern-table__header kern-table__header--numeric">Erhöhung in €</th>
      <th scope="col" class="kern-table__header">Zeitraum</th>
      <th scope="col" class="kern-table__header">Begründung</th>
      <th scope="col" class="kern-table__header">Auswirkung</th>
    </tr>
  </thead>
  <tbody class="kern-table__body">
    <tr class="kern-table__row">
      <th scope="row" class="kern-table__header">Hausmüllentsorgung</th>
      <td class="kern-table__cell">3,15 € pro Liter</td>
      <td class="kern-table__cell">3,30 € pro Liter</td>
      <td class="kern-table__cell kern-table__cell--numeric">4,8%</td>
      <td class="kern-table__cell kern-table__cell--numeric">0,15 €</td>
      <td class="kern-table__cell">jährlich</td>
      <td class="kern-table__cell">Tarifabschlüsse, Inflation</td>
      <td class="kern-table__cell">Durchschnittshaushalt zahlt 0,99 € mehr pro Monat</td>
    </tr>
    <tr class="kern-table__row">
      <th scope="row" class="kern-table__header">Schmutzwasserbeseitigung</th>
      <td class="kern-table__cell">2,31 € pro m³</td>
      <td class="kern-table__cell">2,41 € pro m³</td>
      <td class="kern-table__cell kern-table__cell--numeric">4,3%</td>
      <td class="kern-table__cell kern-table__cell--numeric">0,10 €</td>
      <td class="kern-table__cell">-</td>
      <td class="kern-table__cell">Kostendeckung</td>
      <td class="kern-table__cell">Teil der 9,69 € Mehrbelastung für Durchschnittshaushalt</td>
    </tr>
    <tr class="kern-table__row">
      <th scope="row" class="kern-table__header">Niederschlagswasserbeseitigung</th>
      <td class="kern-table__cell">0,80 € pro m²</td>
      <td class="kern-table__cell">0,83 € pro m²</td>
      <td class="kern-table__cell kern-table__cell--numeric">3,7%</td>
      <td class="kern-table__cell kern-table__cell--numeric">0,03 €</td>
      <td class="kern-table__cell">-</td>
      <td class="kern-table__cell">Kostendeckung</td>
      <td class="kern-table__cell">Teil der 9,69 € Mehrbelastung für Durchschnittshaushalt</td>
    </tr>
  </tbody>
</table>
</div>

Beschreibung

Eine Tabelle ist eine statische, tabellarische Struktur mit einer oder mehreren Zeilen und mehreren Spalten. Es handelt sich dabei nicht um ein interaktives Element. Zur besseren Lesbarkeit können die Zeilen der Tabelle auch abwechselnd farblich hinterlegt werden.
Die Komponente ist in zwei Größen verfügbar: „default“ und „small“.

Bestandteile einer Tabelle:

• Caption (optional): Beschreibt den Inhalt der Tabelle und dient als Titel, ähnlich einer Überschrift. Sie sollte prägnant und informativ sein.
• Head: 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.
• Footer (optional): Wird verwendet, um Summen, Berechnungen oder Zusatzinformationen darzustellen. Er steht unterhalb des Bodys.

Verwendungsregeln

Die Tabelle wird zur übersichtlichen Darstellung und zum Vergleich von strukturierten Daten verwendet. Sie eignet sich besonders für Informationen, die in Zeilen und Spalten sinnvoll angeordnet werden können.

Spaltenüberschriften sollten klar und verständlich formuliert sein. Die Inhalte der Tabelle sollten so angeordnet werden, dass eine schnelle Erfassung der wichtigsten Informationen möglich ist. Falls eine Tabelle sehr viele Spalten hat, sollten alternative Darstellungsformen geprüft werden.

Spalten mit numerischen Werten werden rechtsbündig, Texte linksbündig und Datumsangaben je nach Konvention ausgerichtet. Falls eine Tabelle mehrere Informationen enthält oder eine zusätzliche Erläuterung benötigt, sollte eine Caption hinzugefügt werden, um den Nutzenden eine bessere Orientierung zu ermöglichen.

Falls Tabellenwerte verglichen werden sollen, kann eine abwechselnde Zeilenfärbung oder eine visuelle Hervorhebung der wichtigsten Spalten sinnvoll sein.

Falls die Tabelle auf kleinen Displays genutzt wird, sollte geprüft werden, ob eine horizontale Scrollmöglichkeit (Responsive Table) oder eine alternative Darstellung notwendig ist.

Dos und Don’ts

Dos

• Nutze Tabellen nicht für unstrukturierte Inhalte.
• Nutze visuelle Hervorhebungen, z. B. Fettungen 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.
• Überlade die Tabelle nicht mit zu vielen Spalten oder Daten.
• Verwende keine unverständlichen Abkürzungen oder Symbole ohne Erklärung.
• Verwende Tabellen niemals zum Layouten von Inhalten auf einer Seite. Verwende stattdessen das Grid.

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-title">, 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 (z. B. 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