Tabellen erstellen mit HTML

Für die Darstellung tabellarischer Inhalte können auf Webseiten Tabellen erstellt werden. Aufgrund der Einfachheit bei der Erstellung sowie der Möglichkeit, die Höhe und Breite auf 100% auszudehnen, wurden sie früher auch für das Festlegen des Designs "missbraucht". Irgendwann setzte sich jedoch die Erkenntnis durch, dass Tabellen nur für die tabellarische Darstellung gedacht sind und die Verwendung für Layoutzwecke mit vielen Nachteilen verbunden ist. So begannen viele Entwickler, ihre Webseiten auf tabellenloses Webdesign umzustellen, was zu begrüßen ist.

HTML-Code für Tabellen

Der HTML-Code für Tabellen ist am Anfang häufig nicht sofort leicht zu verstehen, da es sich aus mehreren Codeblöcken zusammensetzt. Sie sind notwendig, weil eine Tabelle aus mehreren Teilen besteht. Die wichtigsten Bestandteile sind:

Die Tabelle selbst
Mindestens eine oder mehrere Zeilen
Mindestens eine oder mehrere Spalten

Für jeden Bestandteil sind in HTML Tags vorhanden und die Tabelle muss aus mindestens 3 Tags zusammengesetzt werden. Für die drei genannten Bestandteile sind die Tags wie folgt:

TABLE: Mit dem TABLE-Tag wird eine Tabelle erstellt. Man kann damit zwar eine Tabelle erzeugen, jedoch müssen die Zeilen und Spalten separat eingefügt werden.
TR: Mit dem TR-Tag werden Zeilen eingefügt.
TD: Mit dem TD-Tag werden Spalten eingefügt.

Tabellen besteht aus mindestens diesen drei Bestandteilen. Gedanklich geht man beim Einfügen von HTML-Code wie folgt vor.

Tabelle öffnen
Zeile öffnen
Spalte öffnen
Spalte schließen
Zeile schließen
Tabelle schließen

Ein Beispielcode für eine Tabelle mit einer Zeile und einer Spalte ist wie folgt.

<table>
  <tr>
    <td>Text in einer Zelle</td>
  </tr>
</table>

In diesem Beispiel wurde die Tabelle mit <table> eingeleitet. Danach wird mit <tr> die Zeile geöffnet. Als letzter Schritt wird mit <td> die Spalte geöffnet. Innerhalb des TD-Tags ist der Text platziert. Danach wird alles wieder rückwärts in der Reihenfolge </td>, </tr> und </table> geschlossen. Als Ergebnis hat man eine Tabelle mit einer Zeile und einer Spalte erzeugt.

Auf einer Webseite ist nicht immer sichtbar, dass es sich um eine Tabelle handelt. Für Übungszwecke kann die Tabelle mit einem Rahmen versehen werden. Hierfür fügt man dem TABLE-Tag ein Attribut und erweitert es wie folgt:

<table border="1">

Tabelle mit mehreren Zeilen und Spalten

Wenn man mehrere Spalten einfügen möchte, dann werden diese nacheinander in eine Zeile eingegeben. Um eine neue Zeile einzufügen, muss die vorherige Zeile vorher geschlossen werden. Ein Beispielcode für eine Tabelle mit 2 Zeilen und 3 Spalten.

<table border="1">
  <tr>
    <td>Zeile 1, Spalte 1</td>
    <td>Zeile 1, Spalte 2</td>
    <td>Zeile 1, Spalte 3</td>
  </tr>
  <tr>
    <td>Zeile 2, Spalte 1</td>
    <td>Zeile 2, Spalte 2</td>
    <td>Zeile 2, Spalte 3</td>
  </tr>
</table>

Bei diesem Beispiel wird mit <table> die Tabelle und mit <tr> die Zeile geöffnet. Danach werden mit dem <td>...</td> drei Spalten mit Text eingefügt. Die erste Zeile wird mit </tr> wieder geschlossen und die nächste mit <tr> geöffnet. Erneut werden mit <td>...</td> drei Spalten inkl. den Texten eingefügt. Zum Schluss wird mit </tr> die Zeile und mit </table> die Tabelle geschlossen. Als Ergebnis des Beispielcodes hätte man eine Tabelle, die wie folgt aussehen würde.

Zeile 1, Spalte 1	Zeile 1, Spalte 2	Zeile 1, Spalte 3
Zeile 2, Spalte 1	Zeile 2, Spalte 2	Zeile 2, Spalte 3

Bei der Erstellung von Tabellen spielt vor allem die Reihenfolge beim Öffnen und Schließen der Tags eine Rolle. Wenn das verstanden wurde, ist die Erstellung sehr einfach. Im Grunde sind das folgende Schritte.:

Tabelle öffnen
Zeile öffnen
Spalte öffnen
Spalte schließen
Evtl. weitere Spalten öffnen und schließen
Zeile schließen
Evtl. Schritte 2 bis 6 wiederholen
Tabelle schließen

Wenn man sich an das Schema hält, kann eigentlich nichts schiefgehen. Zu beachten ist hierbei, dass die Anzahl der Spalten bei allen Zeilen identisch sein sollte. Wenn z.B. die erste Zeile 3 Spalten hat und die zweite Zeile nur 2 Spalten, dann ist die Tabelle technisch gesehen nicht komplett, auch wenn die meisten Browser keine Fehler anzeigen werden. In solchen Fällen sollten in den Zeilen, in denen Spalten fehlen, Befehle zum Verbinden von Tabellenzellen angewendet werden.

Auch wenn in den Beispielen der Rahmen direkt über die Attribute der Tabelle erzeugt wurde, sollte in der Praxis nach Möglichkeit der Weg über CSS gewählt werden, um dass das Aussehen der Tabellen anzupassen. So kann der Content vom Layout getrennt und bei Bedarf einfach über CSS geändert werden. Sonst müsste man bei einer Änderung die Tabellen wieder bearbeiten.