Zum Hauptinhalt springen
Version: 2.4.0
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>
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" 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>

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:

Implementierungsabhängig

WCAG 1.4.1

Tabelleninformationen werden nicht nur durch Farbe vermittelt

Implementierungsabhängig

WCAG 1.4.11

Tabellenrahmen heben sich mit mindestens 3:1 Kontrast ab

Implementierungsabhängig

WCAG 2.4.2

Komplexe Tabellen haben zusätzliche Erklärungen

Implementierungsabhängig

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:

Bestanden

WCAG 1.3.1

Tabellendaten sind programmatisch mit Headern verknüpft

Bestanden

WCAG 1.4.6

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

Bestanden

WCAG 2.4.6

Tabellen-Header sind als solche ausgezeichnet

Bestanden

WCAG 4.1.1

Tabellen-HTML ist valide und wohlgeformt

Siehe auch: BFIT Handreichungen

Inhaltsverzeichnis

KERN Chat (Beta 2.1)

Hallo!

Ich bin die KERN KI und kann zu allen Inhalten auf dieser Website Auskunft geben.

-  
-  
-  
-  
-  
-  
-  
-  
-