Tabellen

Tabellen sind geordnete Zusammenstellungen von Texten oder Daten. Sie dienen zur übersichtlichen Darstellung und Ordnung komplexer Sachverhalte. Sie sollten so einfach wie möglich gehalten und sparsam eingesetzt werden, da in der mobilen Darstellung die Benutzerfreundlichkeit weniger gegeben ist.

Standard Tabelle Eigenschaften

Im Unterschied zu Listen besitzen Tabellen mehrere Spalten. Die darzustellenden Inhalte werden dabei in Zeilen (waagerecht) und Spalten (senkrecht) gegliedert, die grafisch aneinander ausgerichtet werden. Tabellen können eine Kopfzeile mit Labels und/oder zu Beginn eine Label-Spalte aufweisen.

Labels für Spalten bzw. Zeilen optional
Icons optional
Linien optional
Badge optional
Spaltenbreiten verhalten sich abhängig vom Inhalt dynamisch
Spaltenanzahl variabel

Varianten:

Tabelle mit horizontalen Linien (table—border-rows)
Tabelle mit vertikalen Linien (table—border-cols)
Tabelle mobil einspaltig (table-block-md)
Tabelle ohne Linien (table-borderless)
Option für Trennlinie unter Spaltentiteln (table-border-start)
Option für Abschlusslinie (table-border-end)

Tabelle mit horizontalen Linien

Diese Tabelle besitzt sowohl Spaltentitel als auch Zeilentitel, Badges und Icon-Buttons. Beispiel mit horizontalen Linien (table—border-rows).

Titel der Tabelle
Zeilentitel	Label Spalte 1	Label Spalte 2	Label Spalte 3
Label Zeile 1	Text	Text	Badge
Label Zeile 2	Text	Dies ist ein längerer Text, der zu Zeilenumbruch führen kann	Badge
Label Zeile 3	Text	Text	Badge

<div class="table-responsive">
  <table class="table table--border-rows">
    <caption class="visually-hidden">
      Titel der Tabelle
    </caption>
    <thead>
      <tr class="text-nowrap">
        <th scope="col"><span class="visually-hidden">Zeilentitel</span></th>
        <th scope="col">Label Spalte 1</th>
        <th scope="col">Label Spalte 2</th>
        <th scope="col"><span class="visually-hidden">Label Spalte 3</span></th>
        <th scope="col"><span class="visually-hidden">Aktionen</span></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row" class="text-nowrap">Label Zeile 1</th>
        <td>Text</td>
        <td>Text</td>
        <td><span class="badge bg--bright-grey">Badge</span></td>
        <td>
          <div class="table-icons">
            <button class="btn btn-link flex-shrink-0" aria-label="Bearbeiten">
              <svg class="icon icon-edit">
                <use
                  xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-edit"
                ></use>
              </svg>
            </button>
            <button class="btn btn-link flex-shrink-0" aria-label="Löschen">
              <svg class="icon icon-delete-21">
                <use
                  xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-delete-21"
                ></use>
              </svg>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row" class="text-nowrap">Label Zeile 2</th>
        <td>Text</td>
        <td>Dies ist ein längerer Text, der zu Zeilenumbruch führen kann</td>
        <td><span class="badge bg--bright-grey">Badge</span></td>
        <td>
          <div class="table-icons">
            <button class="btn btn-link flex-shrink-0" aria-label="Bearbeiten">
              <svg class="icon icon-edit">
                <use
                  xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-edit"
                ></use>
              </svg>
            </button>
            <button class="btn btn-link flex-shrink-0" aria-label="Löschen">
              <svg class="icon icon-delete-21">
                <use
                  xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-delete-21"
                ></use>
              </svg>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row" class="text-nowrap">Label Zeile 3</th>
        <td>Text</td>
        <td>Text</td>
        <td><span class="badge bg--bright-grey">Badge</span></td>
        <td>
          <div class="table-icons">
            <button class="btn btn-link flex-shrink-0" aria-label="Bearbeiten">
              <svg class="icon icon-edit">
                <use
                  xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-edit"
                ></use>
              </svg>
            </button>
            <button class="btn btn-link flex-shrink-0" aria-label="Löschen">
              <svg class="icon icon-delete-21">
                <use
                  xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-delete-21"
                ></use>
              </svg>
            </button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Tabelle mit vertikalen Linien

Vertikale Linien werden nur bei nur bei großen, komplexen Tabellen eingesetzt, wenn es der Übersichtlichkeit dient. Bevorzugt wird die Standardvariante.

Tabelle mit Zeilen- und Spaltentitel

Diese Tabelle besitzt sowohl Spaltentitel als auch Zeilentitel. Beispiel mit horizontalen und vertikalen Linien (table—border-cols).

Titel der Tabelle
Zeilentitel	Label Spalte 1	Label Spalte 2	Label Spalte 3
Label Zeile 1	Text	Text	Text
Label Zeile 2	Text	Dies ist ein längerer Text, der zu Zeilenumbruch führen kann	Text
Label Zeile 3	Text	Text	Text

<div class="table-responsive">
  <table class="table table--border-cols">
    <caption class="visually-hidden">
      Titel der Tabelle
    </caption>
    <thead>
      <tr class="text-nowrap">
        <th scope="col"><span class="visually-hidden">Zeilentitel</span></th>
        <th scope="col">Label Spalte 1</th>
        <th scope="col">Label Spalte 2</th>
        <th scope="col">Label Spalte 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row" class="text-nowrap">Label Zeile 1</th>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <th scope="row" class="text-nowrap">Label Zeile 2</th>
        <td>Text</td>
        <td>Dies ist ein längerer Text, der zu Zeilenumbruch führen kann</td>
        <td>Text</td>
      </tr>
      <tr>
        <th scope="row" class="text-nowrap">Label Zeile 3</th>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
    </tbody>
  </table>
</div>

Tabelle mobil einspaltig

In Ausnahmefällen kann es sinnvoll sein, die Tabelle mobil umzubrechen, anstatt zu scrollen.
Achtung: Für diese Anwendung können nur Tabellen ohne Kopfzeile eingesetzt werden.

Tabelle mit Spaltentitel, Mobil einspaltig

Diese Tabelle besitzt nur Zeilentitel. Die Inhalte brechen mobil (< 800px) einspaltig untereinander (table-block-md).

Titel der Tabelle
Label Zeile 1	Text	Text	Text
Label Zeile 2	Text	Dies ist ein längerer Text, der zu Zeilenumbruch führen kann	Text
Label Zeile 3	Text	Text	Text

<div class="table-responsive nav-overflow">
  <table class="table table--border-rows table-block-md">
    <caption class="visually-hidden">
      Titel der Tabelle
    </caption>
    <tbody>
      <tr>
        <th scope="row" class="text-nowrap">Label Zeile 1</th>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <th scope="row" class="text-nowrap">Label Zeile 2</th>
        <td>Text</td>
        <td>Dies ist ein längerer Text, der zu Zeilenumbruch führen kann</td>
        <td>Text</td>
      </tr>
      <tr>
        <th scope="row" class="text-nowrap">Label Zeile 3</th>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
    </tbody>
  </table>
</div>

Tabelle ohne Linien

Eine Tabelle kann auch ohne Trennlinien dargestellt werden. Optional kann eine Linie unter den Spaltentiteln oder eine Abschlusslinie am Ende der Tabelle gesetzt werden.

Tabelle mit Zeilen- und Spaltentitel

Diese Tabelle besitzt nur Spaltentitel. Trennlinien werden keine angezeigt (table-borderless). Optional kann unter den Spaltentiteln eine Trennlinie (table-border-start) sowie bei jeder Tabellenart zusätzlich eine Abschlusslinie gesetzt werden (table-border-end).

Titel der Tabelle
Label Spalte 1	Label Spalte 2	Label Spalte 3	Label Spalte 4
Text	Text	Text	Text
Text	Text	Dies ist ein längerer Text, der zu Zeilenumbruch führen kann	Text
Text	Text	Text	Text

<div class="table-responsive">
  <table class="table table-borderless table-border-start table-border-end">
    <caption class="visually-hidden">
      Titel der Tabelle
    </caption>
    <thead>
      <tr class="text-nowrap">
        <th scope="col">Label Spalte 1</th>
        <th scope="col">Label Spalte 2</th>
        <th scope="col">Label Spalte 3</th>
        <th scope="col">Label Spalte 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Dies ist ein längerer Text, der zu Zeilenumbruch führen kann</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
    </tbody>
  </table>
</div>