Version: 2.5.0

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

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

<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

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

<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

<div class="kern-table-responsive" tabindex="0">
<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>

Aktionen

Tabellen haben eine Action Spalte. Die Aktions-Spalte wird am rechten Rand der Tabelle positioniert, wobei die enthaltenen Buttons innerhalb der Zellen rechtsbündig ausgerichtet werden.

Aktion-Buttons in Tabellen

In Tabellen wird unabhängig von der Tabellengröße (Default oder Small) konsistent die Button-Größe Extra-Small (x-small) für alle Interaktionselemente in der Aktions-Spalte verwendet. Dies gewährleistet eine kompakte Darstellung und optimale Zeilenhöhen.
Button-Varianten Für die Aktions-Spalte sind ausschließlich die Varianten Secondary und Tertiary zulässig:

Tertiary (Standard): Empfohlen für die meisten Tabellen-Aktionen, um das visuelle Rauschen zu minimieren.
Secondary: Kann für hervorgehobene Einzelaktionen genutzt werden.
Wichtig: Primary Buttons dürfen innerhalb der Tabelle nicht verwendet werden, um die visuelle Hierarchie der Seite (z. B. den Haupt-CTA außerhalb der Tabelle) nicht zu stören.

<table class="kern-table" tabindex="0" role="region" aria-labelledby="title">
<caption class="kern-title" id="title">Table mit Aktionen</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--action">
		Aktionen
	</th>
</tr>
</thead>

<tbody class="kern-table__body">
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header" id="hausmuellentsorgung">Hausmüllentsorgung</th>
    <td class="kern-table__cell">3,30 € pro Liter (wöchentliche Leerung)</td>
    <td class="kern-table__cell kern-table__cell--action">
      <button class="kern-btn kern-btn--secondary kern-btn--x-small" id="btn-copy-hausmuellentsorgung" aria-labelledby="btn-copy-hausmuellentsorgung hausmuellentsorgung" title="Kopieren">
        <span class="kern-icon kern-icon--content-copy" aria-hidden="true"></span>
        <span class="kern-label kern-sr-only">Kopieren</span>
      </button>
      <button class="kern-btn kern-btn--secondary kern-btn--x-small" id="btn-edit-hausmuellentsorgung" aria-labelledby="btn-edit-hausmuellentsorgung hausmuellentsorgung" title="Editieren">
        <span class="kern-icon kern-icon--edit" aria-hidden="true"></span>
        <span class="kern-label kern-sr-only">Editieren</span>
      </button>
      <button class="kern-btn kern-btn--secondary kern-btn--x-small" id="btn-delete-hausmuellentsorgung" aria-labelledby="btn-delete-hausmuellentsorgung hausmuellentsorgung" title="Löschen">
        <span class="kern-icon kern-icon--delete" aria-hidden="true"></span>
        <span class="kern-label kern-sr-only">Löschen</span>
      </button>
    </td>
  </tr>
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header" id="reinigung">Reinigung öffentlicher Wege</th>
    <td class="kern-table__cell">2,69 € pro m</td>
    <td class="kern-table__cell kern-table__cell--action">
      <button class="kern-btn kern-btn--secondary kern-btn--x-small" id="btn-copy-reinigung" aria-labelledby="btn-copy-reinigung reinigung" title="Kopieren">
        <span class="kern-icon kern-icon--content-copy" aria-hidden="true"></span>
        <span class="kern-label kern-sr-only">Kopieren</span>
      </button>
      <button class="kern-btn kern-btn--secondary kern-btn--x-small" id="btn-edit-reinigung" aria-labelledby="btn-edit-reinigung reinigung" title="Editieren">
        <span class="kern-icon kern-icon--edit" aria-hidden="true"></span>
        <span class="kern-label kern-sr-only">Editieren</span>
      </button>
      <button class="kern-btn kern-btn--secondary kern-btn--x-small" id="btn-delete-reinigung" aria-labelledby="btn-delete-reinigung reinigung" title="Löschen">
        <span class="kern-icon kern-icon--delete" aria-hidden="true"></span>
        <span class="kern-label kern-sr-only">Löschen</span>
      </button>
    </td>
  </tr>
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header" id="schmutzwasserbeseitigung">Schmutzwasserbeseitigung</th>
    <td class="kern-table__cell">2,41 € pro Kubikmeter</td>
    <td class="kern-table__cell kern-table__cell--action">
      <button class="kern-btn kern-btn--secondary kern-btn--x-small" id="btn-copy-schmutzwasserbeseitigung" aria-labelledby="btn-copy-schmutzwasserbeseitigung schmutzwasserbeseitigung" title="Kopieren">
        <span class="kern-icon kern-icon--content-copy" aria-hidden="true"></span>
        <span class="kern-label kern-sr-only">Kopieren</span>
      </button>
      <button class="kern-btn kern-btn--secondary kern-btn--x-small" id="btn-edit-schmutzwasserbeseitigung" aria-labelledby="btn-edit-schmutzwasserbeseitigung schmutzwasserbeseitigung" title="Editieren">
        <span class="kern-icon kern-icon--edit" aria-hidden="true"></span>
        <span class="kern-label kern-sr-only">Editieren</span>
      </button>
      <button class="kern-btn kern-btn--secondary kern-btn--x-small" id="btn-delete-schmutzwasserbeseitigung" aria-labelledby="btn-delete-schmutzwasserbeseitigung schmutzwasserbeseitigung" title="Löschen">
        <span class="kern-icon kern-icon--delete" aria-hidden="true"></span>
        <span class="kern-label kern-sr-only">Löschen</span>
      </button>
    </td>
  </tr>
  <tr class="kern-table__row">
    <th scope="row" class="kern-table__header" id="niederschlagswasserbeseitigung">Niederschlagswasserbeseitigung</th>
    <td class="kern-table__cell">0,83 € pro m² befestigter Fläche</td>
    <td class="kern-table__cell kern-table__cell--action">
      <button class="kern-btn kern-btn--secondary kern-btn--x-small" id="btn-copy-niederschlagswasserbeseitigung" aria-labelledby="btn-copy-niederschlagswasserbeseitigung niederschlagswasserbeseitigung" title="Kopieren">
        <span class="kern-icon kern-icon--content-copy" aria-hidden="true"></span>
        <span class="kern-label kern-sr-only">Kopieren</span>
      </button>
      <button class="kern-btn kern-btn--secondary kern-btn--x-small" id="btn-edit-niederschlagswasserbeseitigung" aria-labelledby="btn-edit-niederschlagswasserbeseitigung niederschlagswasserbeseitigung" title="Editieren">
        <span class="kern-icon kern-icon--edit" aria-hidden="true"></span>
        <span class="kern-label kern-sr-only">Editieren</span>
      </button>
      <button class="kern-btn kern-btn--secondary kern-btn--x-small" id="btn-delete-niederschlagswasserbeseitigung" aria-labelledby="btn-delete-niederschlagswasserbeseitigung niederschlagswasserbeseitigung" title="Löschen">
        <span class="kern-icon kern-icon--delete" aria-hidden="true"></span>
        <span class="kern-label kern-sr-only">Löschen</span>
      </button>
    </td>
  </tr>
</tbody>
</table>

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

Die Barrierefreiheit unserer Komponenten wird nach der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) geprüft, die auf der europäischen Norm EN 301 549 basiert. Diese legt Anforderungen an die Zugänglichkeit von Informations- und Kommunikationstechnologien (IKT) fest und orientiert sich an den WCAG 2.1. Die für Webinhalte relevanten Kriterien sind in Kapitel 9 der EN 301 549 beschrieben und übernehmen die Nummerierung der WCAG-Kriterien, ergänzt um eine führende 9 – z. B. wird aus WCAG 2.4.3 „Focus Order“ das Kriterium 9.2.4.3.

Da bereits an einer Aktualisierung der EN 301 549 gearbeitet wird, haben wir uns entschieden, alle dort referenzierten Kriterien schon jetzt anhand der WCAG 2.2 zu prüfen und zu dokumentieren. So stellen wir sicher, dass unser Design-System den kommenden europäischen Standards voraus ist und langfristig barrierefrei bleibt.

Implementierungsabhängig

Unsere Komponenten wurden einzeln auf Barrierefreiheit geprüft und sind für sich genommen barrierefrei. Bei der Nutzung bzw. Kombination mehrerer Komponenten müssen jedoch bestimmte Aspekte beachtet werden, um die Barrierefreiheit im Gesamtkontext sicherzustellen:

WCAG 1.4.1

Tabelleninformationen werden nicht nur durch Farbe vermittelt

WCAG 1.4.11

Tabellenrahmen heben sich mit mindestens 3:1 Kontrast ab

WCAG 2.4.2

Komplexe Tabellen haben zusätzliche Erklärungen

WCAG 3.3.2

Tabelle hat eine aussagekräftige Beschriftung

Bestanden

Folgendes ist bereits geprüft und erfüllt, vorausgesetzt die Komponente wird wie in den Code-Beispielen gezeigt verwendet:

WCAG 1.3.1

Tabellendaten sind programmatisch mit Headern verknüpft

WCAG 1.4.6

Tabellentext erfüllt das minimale Kontrastverhältnis von 7:1

WCAG 2.4.6

Tabellen-Header sind als solche ausgezeichnet

WCAG 4.1.1

Tabellen-HTML ist valide und wohlgeformt

Siehe auch: BFIT Handreichungen

Table

Kurzbeschreibung

Beispiele

Varianten

Striped

Footer

Responsiv

Aktionen

Aktion-Buttons in Tabellen

Beschreibung

Bestandteile einer Tabelle:

Verwendungsregeln

Dos und Don’ts

Dos

Barrierefreiheit

Implementierungsabhängig

WCAG 1.4.1

WCAG 1.4.11

WCAG 2.4.2

WCAG 3.3.2

Bestanden

WCAG 1.3.1

WCAG 1.4.6

WCAG 2.4.6

WCAG 4.1.1

Inhaltsverzeichnis

KERN Chat (Beta 2.1)

Hallo!

Kurzbeschreibung​

Beispiele​

Varianten​

Striped​

Footer​

Responsiv​

Aktionen​

Aktion-Buttons in Tabellen​

Beschreibung​

Bestandteile einer Tabelle:​

Verwendungsregeln​

Dos und Don’ts​

Dos​

Barrierefreiheit​

Implementierungsabhängig

WCAG 1.4.1

WCAG 1.4.11

WCAG 2.4.2

WCAG 3.3.2

Bestanden

WCAG 1.3.1

WCAG 1.4.6

WCAG 2.4.6

WCAG 4.1.1

Inhaltsverzeichnis

KERN Chat (Beta 2.1)

Hallo!

Kurzbeschreibung

Beispiele

Varianten

Striped

Footer

Responsiv

Aktionen

Aktion-Buttons in Tabellen

Beschreibung

Bestandteile einer Tabelle:

Verwendungsregeln

Dos und Don’ts

Dos

Barrierefreiheit