Inhaltsbereich Navigation Navigation Fußzeile

Tabelle

Verwendung

Tabellen dienen der rasterförmigen Darstellung strukturierter Daten in Spalten und Zeilen und unterstützen so die schnelle Erkennbarkeit von Zusammenhängen und Zuständen.

Entscheidungskriterien für den Einsatz von Datentabellen sind:

  • Eine Tabelle ist eine Matrix aus mindestens 2x2 Datenzellen.
  • Die enthaltenen Daten stehen in einem Bezug zueinander.
  • Nutzende können artverwandte oder vergleichbare Daten in Spalten oder Zeilen miteinander vergleichen.
  • Nutzende können Daten sortieren oder filtern, ohne dass Zusammenhänge in einem Datensatz verloren gehen.

Tabellen als Mittel zum Layout von Seiten oder Komponenten sind nicht zulässig, hierzu muss das Gestaltungsraster mit seinen Spalten und Zeilen benutzt werden.

Das Design System macht keine weiteren Vorgaben zur Anzahl von Zeilen und Spalten, die in einer Datentabelle dargestellt werden können. Falls aber keines dieser Kriterien erfüllt wird, so handelt es sich semantisch wahrscheinlich eher um eine Definitionsliste <dl>.

Übergroße Tabellen & mobile Darstellung

Die Anzahl der Spalten wird in erster Linie in der zugehörigen Maskenspezifikation definiert. Hierbei ist es zulässig, eine höhere Anzahl an Spalten zu definieren als in einer mobilen Ansicht vom Gerät dargestellt werden können. In diesem Fall sieht das Design System sogenannte Overflow-Tables vor, die in solchen Fällen einen horizontalen Scrollbalken ermöglichen. Bitte beachten Sie, dass hierfür ein weiterer Container mit tabindex="0" benötigt wird, um die Tabelle fokussierbar zu machen und damit die Tastaturbedienung der Inhalte einer solchen Tabelle zu ermöglichen.

Auf andere responsive Tabellenmuster, mit denen eine Tabellenmatrix aufgelöst und linearisiert dargestellt werden kann, wird bewusst verzichtet.

Positionierung & responsives Verhalten

  • Eine Tabelle kann vertikal scrollbar sein, wenn nicht ausreichend Platz zur Verfügung steht. Das betrifft den Tabellenkopf, den Tabelleninhalt und den Tabellenfuß (Summen o.Ä.).
  • Unterhalb der Tabelle wird eine horizontale Scrollbar angezeigt.
  • Sammelaktionen und Tabellenbeschreibung werden darunter innerhalb des Grids der Seite und ohne Scrollbar platziert.
  • Bis zu fünf eindeutige Icon-Buttons können sich eine Zeile teilen.

Ab dem Breakpoint SM (≥ 575px)

Alle Buttons für Sammelaktionen werden inline sortiert und brechen bei Bedarf in mehrere Zeilen um.

Aufbau und Inhalte von Tabellen und deren Varianten

Ohne weitere Attribute oder Klassen sind Tabellenspalten zunächst flexibel, die Aufteilung richtet sich dann nach den Bedarfen der Inhalte der Zellen und den Layout-Algorithmen moderner Browser. Tabellen kann über das optionale <caption>-Element eine übergeordnete kurze Beschreibung der gesamten Tabelle zugeordnet werden, sofern dies der Orientierung dient.

Jeder Tabelle ist eine Kopfzeile <thead> übergeordnet, in der die zugeordneten Spalten über die Spaltenköpfe <th> benannt werden und per scope="row" oder scope="col" verknüpft werden. Wenn sinnvoll können Zeilen einer Tabelle auch eine Zeilenüberschrift <th> erhalten – diese steht dann grundsätzlich links in einer Zeile und beschreibt deren Inhalte. <th>-Elemente enthalten ausschließlich Text, optionale Icon-Buttons zur Sortierung der Zeilen. Spalten- und Zeilenköpfe <th> dürfen keine Tooltips enthalten.

Optional können Tabellen auch mit einer Fußzeile <tfoot> ausgezeichnet werden, die am unteren Ende der Tabelle dargestellt wird. Sinnvoll ist dies insbesondere bei langen Tabellen bei denen nicht garantiert werden kann, dass sich der Tabellenkopf während der gesamten Betrachtung immer im sichtbaren Bereich (“Viewport“) befindet. Eine Fußzeile bietet hier zusätzliche Orientierung.

Das Design System stellt entsprechende Klassen zur Verfügung, falls fixe (Pixel-)Breiten für bestimmte Inhalte wie fest bemaßte Eingabe-Elemente oder Buttons in Funktionsspalten benötigt werden.

Innerhalb der Datenzellen einer Tabelle können weitere Text- und Formularelemente verwendet werden, wie z. B. Ausgabetexte, Checkboxen oder Icon-Buttons. Standard-Buttons sind in Datentabellen (th und td) nicht vorgesehen, sondern müssen in einer separaten Schaltflächenzeile außerhalb der Tabelle platziert werden.

Texte in Datenzellen sollen, wie auch in Fließtexten, grundsätzlich linksbündig ausgerichtet sein, Zahlen hingegen oftmals rechtsbündig, und Icon-Buttons in Funktionsspalten zentriert sein. Bei der Darstellung von numerischen Daten mit Dezimalstellen muss darauf geachtet werden, dass alle Zellen die gleiche Anzahl Dezimalstellen enthalten (12,99 € und 9,00 € statt 9 €). Das Design System stellt hierfür entsprechende Klassen zur Verfügung.

Dynamische & sortierbare Tabellen

Neben statischen, nur darstellenden Tabellen sind auch dynamische Tabellen mit erweiterten Funktionalitäten vorgesehen. So können, wenn dies fachlich verlangt ist, auch Tabellenzeilen hinzugefügt oder gelöscht werden, Einträge gefiltert oder Spalten sortiert werden.

Tabelle mit Checkboxen in der ersten Spalte.
Mehrfachauswahl
Tabelle mit zusätzlichem Button in der Fußzeile.
Zeilen hinzufügen

Dies geschieht zum einen über eigene Funktionsspalten, in der entsprechende Checkboxen zur Auswahl von Zeilen und Kontextmenüs mit Buttons zum Löschen und Hinzufügen von Tabellenzeilen angeboten werden.

Leere Tabellen

Ob eine Tabelle weiterhin angezeigt wird, wenn Nutzende den letzten verbliebenen Eintrag löschen, ist eine fachliche Einzelentscheidung. Entweder bleibt die Tabelle bestehen, wird aber mit mindestens einer Reihe von leeren Datenzellen angezeigt, oder die Tabelle inklusiver der Kopfzeilen wird vollständig entfernt und durch einen Text wie z. B. „In Ihrem Posteingang befinden sich keine Nachrichten“ ersetzt.

Tabelle mit Spaltenüberschriften und dem Hinweis “Keine Einträge vorhanden“ im tbody.
Leere Tabelle

Sortierbare Tabellen

Die optionale Sortierung erfolgt immer anhand einer Spalte, hierfür sind entsprechende Buttons vorgesehen. Die Sortierung kann nicht additiv über mehrere Spalten hinweg angewendet werden.

Die Verwendung von Funktionsspalten mit interaktiven Formular- oder Link-Elementen schliesst die Verwendung von Scripts z. B. zur Auswahl ganzer Zeilen oder Spalten per Mausklick aus.

Filterbare Tabellen

Tabellen können optional mit einem Filter versehen werden, über die z. B. eine Freitextsuche oder eine Einschränkung des anzuzeigenden Datumsbereichs möglich ist.

Tabelle mit vorangestellter Filter-Komponente in geschlossenem Zustand und aktivem Filter.
Aktive Filter

Paginierte Tabellen

Optional haben Tabellen eine Blätterfunktion, die Regeln zur Verwendung und Bemaßungen finden Sie im Muster Paginierung.

In der Anzahl der Zeilen begrenzte Tabelle mit anschließender Blätterfunktion

Mehrdimensionale Tabellen

Mehrdimensionale Datentabellen mit zwei oder mehr Ebenen von <th> oder mit rowspan oder colspan verbundenen Zellen sind zurzeit mangels Bedarf nicht in den Beispiel-Codes vorgesehen, aber per HTML mit dem zur Verfügung gestellten CSS einfach umsetzbar. Beachten sie aber bei diesen komplexen Tabellen zwingend die Hinweise im Tab Barrierefreiheit.

Buttons in Tabellen

Tabellen mit erweiterten Interaktionsmöglichkeiten verfügen über zusätzliche Spalten, in denen Icon-Buttons inkl. Kontextmenüs platziert werden können. Die Spaltenbreiten sind hierbei nicht flexibel, sondern fixiert und richten sich nach dem Bedarf des Icon-Buttons. Buttons mit gleicher Funktion müssen in der gesamten Tabelle immer auf einer gemeinsamen senkrechten Achse untereinander stehen.

Beschriftungen von Tabellen

Wenn Tabellen eine eigene Beschriftung zugeordnet werden kann, die den Zweck oder Inhalt der Tabelle beschreibt, dann ist hierfür das <caption>-Element als Kind von <table> vorgesehen. Optisch sind diese an Bildunterschriften angelehnt und bieten den Vorteil der eindeutigen Zuordnung erklärender Hilfetexte.

Do’s and Dont’s

So:

  • Daten abbilden, die eine 2-dimensionale Matrix benötigen, um Zusammenhänge erkennen zu können
  • Sortierbare Daten abbilden, wenn die einzelnen Daten in einem Verhältnis zueinander stehen

So nicht:

  • Daten abbilden, die eine komplexere Visualisierung wie z. B. ein Schaubild benötigen
  • Tabellen zum Layout verwenden