Darstellung

• Eine Tabelle kann einen optionalen Titel haben (H2-H4).
• In der Tabelle sind folgende Titel-Varianten möglich:
  • Horizontaler Titel
  • Vertikaler Titel
  • Horizontaler und vertikaler Titel
• Die Titelspalte und -zeile der Tabelle sind hervorgehoben dargestellt.
• Zeilen oder Spalten der Tabelle können farbig hervorgehoben werden.
• Es gibt zwei mögliche Breiten für eine Tabelle:
  • Inhaltsbreite: Die Tabelle ist genauso breit wie die Inhaltsspalte
  • Überbreit: Die Tabelle geht über die Inhaltsspalte hinaus
• Die Tabelle behält über alle Breakpoints hinweg die gleiche Schrift- und Zellengrösse.
• Die Tabelle kann optional eine Legende und/oder eine Quelle haben.

Verhalten

Hover- und Aktivzustände

Tabellen haben an sich keine Hover- oder Aktivzustände. Sind interaktive Elemente innerhalb einer Tabelle platziert, weisen diese Elemente ihr angestammtes Interaktionsverhalten auf.

Responsives Verhalten

Kann die Tabellenzeile nicht mehr verkleinert werden, ohne den Inhalt zu verkürzen, wird der Inhalt über ein horizontales Scrollen zugänglich gemacht. Durch einen vertikalen Verlauf und die Scrollbar wird dem Nutzer signalisiert, dass der Inhalt nicht vollständig angezeigt wird.

Fixierte Spalte

Ist die erste Spalte eine Titelspalte, so kann diese fixiert dargestellt werden und ist so immer sichtbar. Die erste Spalte darf jedoch nicht breiter als 50 Prozent sein, um die weiteren Inhalte der Tabelle zugänglich zu halten.

Tabelle sortieren

Nutzende können eine Tabelle individuell nach Spalten sortieren. Die ausgewählte Spalte wird als aktiv ausgezeichnet, und das Icon zeigt die sortierte Richtung an. Innerhalb der gewählten Spalte ist eine Einstellung der Sortierreihenfolge möglich (aufsteigend / absteigend; A–Z / Z–A usw.), indem den Nutzer erneut auf das Spaltenlabel klickt.

Tabellen nachladen oder paginieren

Um die Ladezeiten so kurz wie möglich zu halten und den Nutzer nicht mit zu viel Informationen zu überfluten, bietet es sich an, Tabellen in Teilen anzuzeigen. Zu diesem Zweck werden nur die ersten 5, 10 oder 20 Zeilen einer Tabelle direkt angezeigt. Über einen gezielten Klick auf den «Mehr anzeigen»-Button oder eine Paginierung werden dem Nutzer die nächsten Inhalte dargestellt.

Verwendung

Die Tabelle dient dazu, Daten besser zu vergleichen. In der Tabelle können sich folgende Inhalte befinden:

• Text
• Links
• Aufzählungen (Nummer, Liste)
• Buttons/Icons für Funktionen

In der Tabelle dürfen keine Bilder oder Videos platziert werden.