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.

**Anmerkung Style und Barrierefreiheit:** Auf verbundene Tabellenzellen sollte verzichtet werden. Dies ist im Styleguide nicht vorgesehen und wird auch von vielen Unterstützungstechnologien nicht erkannt. Stattdessen sollten die Werte in jeder Zeile bzw. Spalte erneut aufgeführt werden.
Tabellenüberschrift
Index Spalte Titel Beschreibung
999 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
999 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
999 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Index Spalte Total Total

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing

<table class="table">
  <caption>Tabellenüberschrift</caption>
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>...</tfoot>
</table>
<p class="text-small">
  ...
</p>
**Anmerkung Barrierefreiheit:** Ist eine Index-Spalte vorgesehen sollte diese für Unterstützungstechnologien separat ausgezeichnet werden da der visuelle Kontext hier nicht gegeben ist. Beispiel: `Index Spalte`

Variationen

Kleine Tabelle

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

Tabellenüberschrift
Index Spalte Titel Beschreibung
999 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
999 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
999 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Index Spalte Total Total
<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:

# Produkt Beschreibung Preis Spalte
12345 Lorem ipsum Lorem ipsum dolor sit amet 1,24 €
12345 Lorem ipsum Lorem ipsum dolor sit amet 1,24 €
12345 Lorem ipsum Lorem ipsum dolor sit amet 1,24 €
Summe: 3,72 €
<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:

Index Spalte Titel Beschreibung
999 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
999 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
999 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
<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:

Index Spalte Titel Beschreibung
999 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
999 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
999 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
<table class="table table-hover">
...
</table>

Responsive Tabellen

Da sich Tabellen nicht richtig responsive umbrechen lassen gibt es eine Hilfs-Klasse ´.table-responsive´ die um eine Tabelle herum angewendet werden kann.

Index Spalte Titel Beschreibung
999 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
999 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
999 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
<div class="table-responsive">
  <table class="table">
  ...
  </table>
</div>