Tabellen

Grundsätzlich wird in HTML zwischen Layout- und Inhaltstabellen unterschieden. Im Folgenden werden ausschließlich Inhaltstabellen beschriebenen.

Die Wurzel einer vollständigen Tabelle wird dabei durch das <table>-Tag abgebildet und mit der CSS-Klasse .table versehen. Das erste Element ist die Tabellenüberschrift <caption> es sollte sinnvoll den Inhalt der Tabelle wiedergeben. Es wird unterstrichen über der Tabelle dargestellt. Das zweite Element ist der Tabellenkopf <thead>. Hier befinden sich die Titel der einzelnen Spalten. Im <tbody> wird der Tabelleninhalt festgelegt. Den Abschluss bildet das vierte Element <tfoot>. Hier können Summen oder Zusammenfassungen fesgehalten werden. Wird eine längere Beschreibung benötigt, kann diese in Form eines Absatzes <p> unter die Tabelle geschrieben werden.

<table class="table">
  <caption>Tabellenüberschrift</caption>
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>...</tfoot>
</table>
<p class="text-small">
  ...
</p>

Variationen

Kleine Tabelle

Bei Platzmangel empfliehlt sich die Verwendung der kleinen Tabellenvariante .table-small. Wird diese CSS-Klasse angewendet, erscheint die Tabelle komprimierter:

<table class="table table-small">
...
</table>

Numerische Spalten

Eine übersichtliche Darstellung von Summen ist wichtig. Hierfür ist die CSS-Klasse .numeric vorgesehen. Sie kann nur auf die Tags <td>-Tag und das <th>-Tag angewendet werden und sorgt dafür, dass die Zahlen rechtsbündig erscheinen. Aufgrund der HTML-Anatomie muss die Klasse auf jede einzelne Tabellenzelle mit numerischem Inhalt angewendet werden:

<table class="table">
  <thead>...</thead>
  <tbody>
    ...
    <tr>
      <td>12345</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td class="numeric">1,24 €</td>
    </tr>
    ...
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4" class="numeric text-brand text-semibold">
        Summe:&ensp;3,72 €
      </td>
    </tr>
  </tfoot>
</table>

Dekorationen

Alternierende Tabelle

Um Tabellenzeilen besser voneinander zu unterscheiden und das Lesen zu erleichtern, gibt es die Alternierende-Variante. Er wird über die CSS-Klasse .table-striped angewendet und sorgt dafür, dass jede zweite Zeile eine andere Hintergrundfarbe bekommt:

<table class="table table-striped">
...
</table>

Hover

Mit der CSS-Klasse .hover wird eine Interaktion mit der Maus sichtbar gemacht. Berührt man eine Zeile mit dem Mauszeiger, wird sie speziell hervorgehoben. Dieser Effekt wirkt sich nur auf Zeilen des <tbody> aus:

<table class="table table-hover">
...
</table>