Die heutige Verwendung

Tabellen wurden früher sehr gerne für die Strukturierung des gesamten Webdokuments benutzt. Dadurch, dass Tabellen Elemente jeglicher Art beinhalten können, konnte man so auf einfachste weiße bestimmen, an welcher Stelle, welche Inhalte zu stehen hatten. Durch die Rasterform der Tabelle (Zeilen und Spalten) braucht man sich keinen großen Kopf machen, dass Elemente nicht da standen, wo sie nicht stehen durften. Heutzutage ist diese Technik weniger im Einsatz. Wenn überhaupt, sieht man des Öfteren <div></div> Elemente, die durch CSS mittels der display Eigenschaft zu einer Tabelle umfunktioniert wurden.

Tabellen werden also heutzutage hauptsächlich für die Anzeige von Inhalten verwendet, die tatsächlich auch auf dem Blatt Papier in einer Tabelle zu finden wären. Darunter fallen nicht nur Textinhalte und langweilige Zahlen, sondern durchaus auch Bilder und andere Elemente. Das ganze wird jedoch nur auf einen einzigen Sachverhalt begrenzt und nicht auf die gesamte Webseite.

Zellen, Zeilen & Spalten

Schon in der Schule wird einem beigebracht, dass Tabellen aus Zeilen und Spalten bestehen. Wer nicht viel mit Tabellen herumhantiert, bringt diese beiden Begriffe oftmals durcheinander.

Eine Zelle ist für einen einzigen Datensatz bestimmt und ist meistens von einem Rahmen umgeben. Demnach können mehrere Zellen entweder eine Zeile oder eine Spalte bilden.

Eine Zeile bezeichnet immer die waagerechte Reihe, die aus einer oder mehreren Zellen besteht. Schon ab einer Zelle, besteht eine Zeile, die von links nach rechts verläuft.

Ähnlich ist das bei Spalten, die eine senkrechte Reihe bilden. Auch hier kann man bereits ab der ersten Zelle von einer Spalte reden, die allerdings von oben nach unten verläuft.

Die Wörter "Zeile" und "Spalte" sind also lediglich Hilfswörter, die bei einer großen Menge an Daten Sinn ergeben, denn damit findet man sich in einer Tabelle wesentlich besser zurecht. Das folgende Bild soll die drei Begriffe ein wenig verdeutlichen:

Demonstration von Zeile und Spalte - CodingLab

Eine Tabelle wird in HTML mit dem <table></table> Element definiert. In diesem Element kann man nun jegliche Daten einfügen, die in der Tabelle vorkommen sollen. Allerdings müssen wir vorher noch Zeilen und Spalten definieren. Die Besonderheit hierbei ist, dass die Spalten <td></td> innerhalb der Zeile <tr></tr> definiert werden. Dazu ein Beispiel:

  • Html
  • Ergebnis
<table border="1"> <tr> <td>Erste Spalte der ersten Zeile</td> <td>Zweite Spalte der ersten Zeile</td> <td>Dritte Spalte der ersten Zeile</td> </tr> <tr> <td>Erste Spalte der zweiten Zeile</td> <td>Zweite Spalte der zweiten Zeile</td> <td>Dritte Spalte der zweiten Zeile</td> </tr> <tr> <td>Erste Spalte der dritten Zeile</td> <td>Zweite Spalte der dritten Zeile</td> <td>Dritte Spalte der dritten Zeile</td> </tr> </table>

Das <tr></tr> Element steht für "table row", heißt "Tabellenzeile" übersetzt und bildet genau eine Zeile. In diesem Element finden wir fast immer ein <td></td> Element, das für "table data" (Tabellendaten) steht und nicht nur die sichtbaren Daten, sondern auch gleichzeitig eine Spalte definiert.

Einteilung der Tabelle

Früher reichte es ein <table></table> Element nur mit Zeilen und Spalten zu füllen. Heutzutage teilen wir die Tabelle in einen Kopfbereich, Körperbereich und Fußbereich ein:

  • Html
  • Ergebnis
<table border="1"> <thead></thead> <tbody></tbody> <tfoot></tfoot> </table>

Der Tabellen-Header

Den Kopfbereich zeichnen wir mit dem <thead></thead> aus:

  • Html
  • Ergebnis
<table border="1"> <thead> <tr> <th>Erstes Quartal</th> <th>Zweites Quartal</th> <th>Drittes Quartal</th> <th>Viertes Quartal</th> </tr> </thead> <tbody></tbody> <tfoot></tfoot> </table>

Der Kopfbereich enthält im Gegensatz zu beiden anderen Bereichen einen wesentlichen Unterschied: Die Tabellendaten <td></td> werden durch das <td></td> Element ersetzt, welches eine Abkürzung für "table header" (Tabellen-Kopfzeile) darstellt. Neben dem Unterschied, dass der Inhalt dieser Elemente standardmäßig von Browser fettgedruckt angezeigt wird, hat diese Auszeichnung wieder einen semantischen Vorteil, da Sprachsynthesizer und Braille-Geräte sich bei größeren Daten, bewusst auf einzelne Spalten beziehen können.

Der Tabellen-Body

In dem Tabellenkörper können wir die zu der Kopfzeile zugehörigen Daten eingeben. Dabei benutzen wir das <tr></tr> Element für die Zeilen und das <td></td> Element für die Daten und Spalten:

  • Html
  • Ergebnis
<table border="1"> <thead> <tr> <th>Erstes Quartal</th> <th>Zweites Quartal</th> <th>Drittes Quartal</th> <th>Viertes Quartal</th> </tr> </thead> <tbody> <tr> <td>123.456 EURO</td> <td>789.012 EURO</td> <td>345.678 EURO</td> <td>901.234 EURO</td> </tr> </tbody> <tfoot></tfoot> </table>

Im Fußbereich der Tabelle werden in der Regel Anmerkungen zur gesamten Tabelle gemacht. Durch die Einteilung der Tabelle in drei wesentliche Bereiche, haben wir dazu die Möglichkeit das <tfoot></tfoot> Element hinter das <thead></thead> Element zu setzen. Der Parser wird die Daten immer noch am Ende der Tabelle anzeigen, allerdings noch vor dem Körperbereich bearbeiten. Mit diesem Trick können wir sicherstellen, dass bei größeren Ladezeiten von vielen Daten, die Anmerkungen dazu ( evtl. Quelle oder Kommentar) bereits zu sehen sind:

  • Html
  • Ergebnis
<table border="1"> <thead> <tr> <th>Erstes Quartal</th> <th>Zweites Quartal</th> <th>Drittes Quartal</th> <th>Viertes Quartal</th> </tr> </thead> <tfoot> <tr> <td>Erste Hälfte</td> <td>912.468 EURO</td> <td>Zweite Hälfte</td> <td>1.246.912 EURO</td> </tr> </tfoot> <tbody> <tr> <td>123.456 EURO</td> <td>789.012 EURO</td> <td>345.678 EURO</td> <td>901.234 EURO</td> </tr> </tbody> </table>

Das ROWSPAN-Attribut & COLSPAN-Attribut

Mit diesem Attribut haben wir die Möglichkeit Zellen über mehrere Zellen hinweg zu vergrößern. Für das folgende Beispiel benötigen wir einen Rahmen um die Zellen. Deswegen haben wir im <table></table> Element das Attribut border auf den Pixelwert "1" gesetzt.

  • Html
  • Ergebnis
<table border="1"> <tr> <td colspan="2">1</td> <td rowspan="2">2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table>

Im obigen Beispiel hat die Zelle mit dem Wert "1" die Breite der ersten beiden Zellen, da wir den Wert des colspan="" Attributs auf 2 gesetzt haben. "Colspan" ist eine Abkürzung für "column span" und bedeutet grob übersetzt: "...Spalten umfassend". Der Wert gibt dabei an, wie viele Spalten die Zelle umfassen soll.

Das Attribut rowspan="" bedeutet soviel wie "...Zeilen umfassend", wobei der Wert angibt, wie viele Zeilen eine Zelle umfassen soll. Aus diesem Grund nimmt die Zelle mit dem Wert "2" auch zwei Zeilen ein.