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.
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>
Variationen¶ ↑
Kleine Tabelle¶ ↑
Bei Platzmangel empfliehlt sich die Verwendung der kleinen Tabellenvariante .table-small
. Wird diese CSS-Klasse angewendet, erscheint die Tabelle komprimierter:
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: 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>