Bitte warten...

HTML: Tabellen

Tabellen dienen der übersichtlichen Anordnung von Informationen. Im Webdesign war es früher sehr verbreitet, auch das Layout einer Seite mit Hilfe von Tabellen zu realisieren, jedoch sollte die Zweckentfremdung von HTML-Elementen aus Gründen der Barrierefreiheit vermieden werden. Eine bessere Technik stellt das Layout mit Hilfe von CSS dar.

Eine Tabelle wird über das <table>-Tag definiert (table = Tabelle). Innerhalb dieses Tags muss immer mindestens eine Tabellenzeile mit mindestens einer Tabellenzelle vorhanden sein. Somit sieht der Code für eine Tabelle immer mindestens so aus:

Code kopieren
<table>
  <tr>
    <td>Zelleninhalt</td>
  </tr>
</table>

Die Tabellenzelle <td> (table data) befindet sich innerhalb einer Tabellenzeile <tr> (table row) innerhalb von <table>.

In der Regel besteht eine Tabelle natürlich aus mehreren Zeilen und Spalten. Hier ein Beispiel:

Code kopieren
<style>
  table { border-collapse:collapse; }
  td { border:2px solid silver; padding:3px 6px; }
</style>
<table>
  <tr>
    <td></td>
    <td>Montag</td>
    <td>Dienstag</td>
    <td>Mittwoch</td>
    <td>Donnerstag</td>
    <td>Freitag</td>
    <td>Samstag</td>
    <td>Sonntag</td>
  </tr>
  <tr>
    <td>00:00 - 04:00</td>
    <td>Paula</td>
    <td>Paula</td>
    <td>Ole</td>
    <td>Lotte</td>
    <td>Klaus</td>
    <td>Klaus</td>
    <td>Sarah</td>
  </tr>
  <tr>
    <td>04:00 - 08:00</td>
    <td>Axel</td>
    <td>Axel</td>
    <td>Paula</td>
    <td>Paula</td>
    <td>Lotte</td>
    <td>Ole</td>
    <td>Ole</td>
  </tr>
  <tr>
    <td>08:00 - 12:00</td>
    <td>Sarah</td>
    <td>Sarah</td>
    <td>Axel</td>
    <td>Paula</td>
    <td>Klaus</td>
    <td>Ole</td>
    <td>Klaus</td>
  </tr>
  <tr>
    <td>12:00 - 16:00</td>
    <td>Lotte</td>
    <td>Lotte</td>
    <td>Axel</td>
    <td>Ole</td>
    <td>Ole</td>
    <td>Klaus</td>
    <td>Sarah</td>
  </tr>
  <tr>
    <td>16:00 - 20:00</td>
    <td>Klaus</td>
    <td>Axel</td>
    <td>Paula</td>
    <td>Paula</td>
    <td>Sarah</td>
    <td>Ole</td>
    <td>Lotte</td>
  </tr>
  <tr>
    <td>20:00 - 24:00</td>
    <td>Sarah</td>
    <td>Ole</td>
    <td>Lotte</td>
    <td>Klaus</td>
    <td>Axel</td>
    <td>Paula</td>
    <td>Paula</td>
  </tr>
</table>

Vor der Tabelle wurden noch ein paar CSS-Stile definiert, um die einzelnen Zellen der Tabelle sichtbar zu machen.

Tabellenzellen zusammenfassen

Wenn wir innerhalb einer Tabelle Zellen zusammenfassen möchten, können wir das mit Hilfe der Attribute colspan (column span) bzw. rowspan (Spanne über mehrere Zeilen) machen:

Code kopieren
<table>
  <tr>
    <td></td>
    <td>Montag</td>
    <td>Dienstag</td>
    <td>Mittwoch</td>
    <td>Donnerstag</td>
    <td>Freitag</td>
    <td>Samstag</td>
    <td>Sonntag</td>
  </tr>
  <tr>
    <td>00:00 - 04:00</td>
    <td colspan='2'>Paula</td>
    <td>Ole</td>
    <td>Lotte</td>
    <td colspan='2'>Klaus</td>
    <td>Sarah</td>
  </tr>
  <tr>
    <td>04:00 - 08:00</td>
    <td colspan='2'>Axel</td>
    <td>Paula</td>
    <td rowspan='2'>Paula</td>
    <td>Lotte</td>
    <td rowspan='2'>Ole</td>
    <td>Ole</td>
  </tr>
  <tr>
    <td>08:00 - 12:00</td>
    <td colspan='2'>Sarah</td>
    <td rowspan='2'>Axel</td>
    <td>Klaus</td>
    <td>Klaus</td>
  </tr>
  <tr>
    <td>12:00 - 16:00</td>
    <td colspan='2'>Lotte</td>
    <td colspan='2'>Ole</td>
    <td>Klaus</td>
    <td>Sarah</td>
  </tr>
  <tr>
    <td>16:00 - 20:00</td>
    <td>Klaus</td>
    <td>Axel</td>
    <td colspan='2'>Paula</td>
    <td>Sarah</td>
    <td>Ole</td>
    <td>Lotte</td>
  </tr>
  <tr>
    <td>20:00 - 24:00</td>
    <td>Sarah</td>
    <td>Ole</td>
    <td>Lotte</td>
    <td>Klaus</td>
    <td>Axel</td>
    <td colspan='2'>Paula</td>
  </tr>
</table>

Zellen können vertikal mit rowspan und horizontal mit colspan zusammengefasst werden. Dabei müssen die ›einverleibten‹ Zellen aus der Tabellenmatrix im Quelltext entfernt werden. Eine Zusammenfassung ›über Eck‹ ist nicht möglich.

Semantische Auszeichnung

Neben den beschriebenen Elementen existieren noch ein paar weitere Elemente für die semantische Auszeichnung von Tabellen, um explizit anzugeben, ob sich eine Tabellenzeile innerhalb des Tabellenkopfes <thead>, Tabellenkörpers <tbody> oder des Tabellenfußes <tfoot> befindet.

Zellen, die keine eigentlichen Tabellendaten, sondern Überschriften enthalten, können mit <th> statt <td> gekennzeichnet werden.

Diese Elemente können zusätzlich die Formatierung der einzelnen Reihengruppen mit CSS erleichtern.

Code kopieren
<style>
  table { border-collapse:collapse; }
  td, th { border:2px solid silver; padding:3px 6px; }
  thead { background-color:aqua; }
  tbody { background-color:yellow; }
  tfoot { background-color:lime; }
</style>
<table>
  <thead>
    <tr>
      <th></th>
      <th>Montag</th>
      <th>Dienstag</th>
      <th>Mittwoch</th>
      <th>Donnerstag</th>
      <th>Freitag</th>
      <th>Samstag</th>
      <th>Sonntag</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>00:00 - 04:00</th>
      <td colspan='2'>Paula</td>
      <td>Ole</td>
      <td>Lotte</td>
      <td colspan='2'>Klaus</td>
      <td>Sarah</td>
    </tr>
    <tr>
      <th>04:00 - 08:00</th>
      <td colspan='2'>Axel</td>
      <td>Paula</td>
      <td rowspan='2'>Paula</td>
      <td>Lotte</td>
      <td rowspan='2'>Ole</td>
      <td>Ole</td>
    </tr>
    <tr>
      <th>08:00 - 12:00</th>
      <td colspan='2'>Sarah</td>
      <td rowspan='2'>Axel</td>
      <td>Klaus</td>
      <td>Klaus</td>
    </tr>
    <tr>
      <th>12:00 - 16:00</th>
      <td colspan='2'>Lotte</td>
      <td colspan='2'>Ole</td>
      <td>Klaus</td>
      <td>Sarah</td>
    </tr>
    <tr>
      <th>16:00 - 20:00</th>
      <td>Klaus</td>
      <td>Axel</td>
      <td colspan='2'>Paula</td>
      <td>Sarah</td>
      <td>Ole</td>
      <td>Lotte</td>
    </tr>
    <tr>
      <th>20:00 - 24:00</th>
      <td>Sarah</td>
      <td>Ole</td>
      <td>Lotte</td>
      <td>Klaus</td>
      <td>Axel</td>
      <td colspan='2'>Paula</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>24 Stunden</td>
      <td colspan='7'>6 Personen</td>
    </tr>
  </tfoot>
</table>

Spalten gruppieren

Um einzelne Spalten einer Tabelle zusammenzufassen wird das <col>-Element verwendet, das seinerseits in einem <colgroup>-Element enthalten ist. Die Anzahl der zusammengefassten Spalten wird mit dem Attribut span festgelegt. Die Zusammenfassung erfolgt von links nach rechts. Die Summe aller Spalten innerhalb von <colgroup> muss der Summe der Spalten der Tabelle entsprechen. Das <colgroup>-Element wird vor dem ersten <tr>-Element notiert.

Diese Konstruktion ermöglicht es beispielsweise, den zusammengefassten Spalten per CSS eigene Formatierungen zuzuweisen. Dazu dürfen die enthaltenen Zellen aber nicht bereits über CSS-Eigenschaften für Reihengruppen wie <thead>, <tbody> oder <tfoot> formatiert worden sein, da diese ansonsten dominieren.

Code kopieren
<style>
  table { border-collapse:collapse; }
  td, th { border:2px solid silver; padding:3px 6px; }
  thead { background-color:gold; }
  tfoot { background-color:peru; }
  .cg1 { background-color:lime; }
  .cg2 { background-color:aqua; }
  .cg3 { background-color:yellow; }
</style>
<table>
  <colgroup>
    <col class='cg1'>
    <col span='5' class='cg2'>
    <col span='2' class='cg3'>
  </colgroup>
  <thead>
    <tr>
      <th></th>
      <th>Montag</th>
      <th>Dienstag</th>
      <th>Mittwoch</th>
      <th>Donnerstag</th>
      <th>Freitag</th>
      <th>Samstag</th>
      <th>Sonntag</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>00:00 - 04:00</th>
      <td colspan='2'>Paula</td>
      <td>Ole</td>
      <td>Lotte</td>
      <td colspan='2'>Klaus</td>
      <td>Sarah</td>
    </tr>
    <tr>
      <th>04:00 - 08:00</th>
      <td colspan='2'>Axel</td>
      <td>Paula</td>
      <td rowspan='2'>Paula</td>
      <td>Lotte</td>
      <td rowspan='2'>Ole</td>
      <td>Ole</td>
    </tr>
    <tr>
      <th>08:00 - 12:00</th>
      <td colspan='2'>Sarah</td>
      <td rowspan='2'>Axel</td>
      <td>Klaus</td>
      <td>Klaus</td>
    </tr>
    <tr>
      <th>12:00 - 16:00</th>
      <td colspan='2'>Lotte</td>
      <td colspan='2'>Ole</td>
      <td>Klaus</td>
      <td>Sarah</td>
    </tr>
    <tr>
      <th>16:00 - 20:00</th>
      <td>Klaus</td>
      <td>Axel</td>
      <td colspan='2'>Paula</td>
      <td>Sarah</td>
      <td>Ole</td>
      <td>Lotte</td>
    </tr>
    <tr>
      <th>20:00 - 24:00</th>
      <td>Sarah</td>
      <td>Ole</td>
      <td>Lotte</td>
      <td>Klaus</td>
      <td>Axel</td>
      <td colspan='2'>Paula</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>24 Stunden</td>
      <td colspan='7'>6 Personen</td>
    </tr>
  </tfoot>
</table>

Tabellenbeschriftung

Die Beschriftung einer Tabelle kann mit dem <caption>-Element vorgenommen werden. Dieses Element ist das erste Kindelement innerhalb von <table>.

Code kopieren
<table>
  <caption>Unser Dienstplan</caption>
  <colgroup>
    <col class='cg1'>
    <col span='5' class='cg2'>
    <col span='2' class='cg3'>
  </colgroup>
  <thead>
    <tr>
      <th></th>
      <th>Montag</th>
      <th>Dienstag</th>
      <th>Mittwoch</th>
      <th>Donnerstag</th>
      <th>Freitag</th>
      <th>Samstag</th>
      <th>Sonntag</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>00:00 - 04:00</th>
      <td colspan='2'>Paula</td>
      <td>Ole</td>
      <td>Lotte</td>
      <td colspan='2'>Klaus</td>
      <td>Sarah</td>
    </tr>
    <tr>
      <th>04:00 - 08:00</th>
      <td colspan='2'>Axel</td>
      <td>Paula</td>
      <td rowspan='2'>Paula</td>
      <td>Lotte</td>
      <td rowspan='2'>Ole</td>
      <td>Ole</td>
    </tr>
    <tr>
      <th>08:00 - 12:00</th>
      <td colspan='2'>Sarah</td>
      <td rowspan='2'>Axel</td>
      <td>Klaus</td>
      <td>Klaus</td>
    </tr>
    <tr>
      <th>12:00 - 16:00</th>
      <td colspan='2'>Lotte</td>
      <td colspan='2'>Ole</td>
      <td>Klaus</td>
      <td>Sarah</td>
    </tr>
    <tr>
      <th>16:00 - 20:00</th>
      <td>Klaus</td>
      <td>Axel</td>
      <td colspan='2'>Paula</td>
      <td>Sarah</td>
      <td>Ole</td>
      <td>Lotte</td>
    </tr>
    <tr>
      <th>20:00 - 24:00</th>
      <td>Sarah</td>
      <td>Ole</td>
      <td>Lotte</td>
      <td>Klaus</td>
      <td>Axel</td>
      <td colspan='2'>Paula</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>24 Stunden</td>
      <td colspan='7'>6 Personen</td>
    </tr>
  </tfoot>
</table>