HTML Tabellen erstellen - So einfach geht es!

Früher wurden HTML Tabellen gerne dazu verwendet, um das Layout einer Website zu gestalten. Das ist mit HTML Tabellen nämlich pixelgenau möglich. Heute sollte man das nicht mehr machen. Ein Layout, das auf einer HTML Tabelle basiert, ist sehr suchmaschinenunfreundlich. Suchmaschinen haben Probleme damit, ein solches Layout als Layout auch zu erkennen. Und mit einem Tabellen Layout kann man eine Website nicht responsive gestalten.

Webseiten werden heutzutage über eine Zahl an verschiedenen Endgeräten, die jeweils unterschiedliche Bildschirmdiagonalen und Auflösungen haben, angezeigt, die kaum noch überschaubar ist.

Es ist für jeden Webmaster Pflicht, seine Webseiten so responsive wie möglich zu gestalten.

Sonst verliert man viele Besucher und vor allen Dingen erscheint man in den Suchergebnissen von Suchmaschinen gar nicht erst bei den vorderen Plätzen.

Nicht umsonst heißt es bei Google schon lange: "Mobile First".

Nichtsdestotrotz sind HTML Tabellen bei der Webseitengestaltung unverzichtbar. Auch abseits des Periodensystems der Elemente gibt es eine Vielzahl an Anwendungsmöglichkeiten, um Informationen in Kurzform, übersichtlich und gut vergleichbar anzuzeigen. Außerdem können Daten mit ihnen auch nach unterschiedlichen Kriterien sortiert dargestellt werden.

Konkret können das beispielsweise Kalender, Ranglisten, Stundenpläne, Statistiken, Vergleichszahlen von Messwerten sein.

Nicht zuletzt besteht die Möglichkeit eine Vielzahl an Unterseiten über eine Tabelle zu verlinken.

zurück zum Inhaltsverzeichnis

Eine Tabelle besteht aus Zeilen (waagerecht) und Spalten (senkrecht). Das gilt für HTML Tabellen genauso. Entsprechend ist eine Tabelle in HTML Befehlen auch aufgebaut.

Ein einfaches Grundgerüst einer HTML Tabelle sieht folgendermassen aus:

Damit haben wir eine einfache Tabelle bestehend aus 2 Zeilen (<tr>) und 2 Spalten (<td>) erstellt.

Man kann das auch folgendermassen schreiben:

Das Ergebnis sieht im Browser genauso aus. Ich bevorzuge die letzte Variante, weil ich den Code bei größeren Tabellen als einfacher zu bearbeiten finde. Trotzdem werde ich bei den nachfolgenden Beispielen die erste Darstellung wählen, weil sie üblicher ist.

Die Einrückungen verbessern die Lesbarkeit des Codes. Das Gleiche gilt für die Leerzeichen.

Beides kann man nach belieben wählen oder auch weglassen.

Die im HTML Editor sichtbaren Einrückungen und Leerzeichen werden vom Browser ignoriert.

Erläuterung der im einfachen Tabellengrundgerüst verwendeten Befehle (Tags):

<table>: Der <table> Tag steht für table. Übersetzt: Tabelle.

Mit ihm wird eine Tabelle eingeleitet.

<tr>: Der <tr> Tag steht für table row. Übersetzt: Tabellenzeile.

Analog wird hier eine Tabellezeile eingeleitet.

<td>: Der <td> Tag steht für table data. Übersetzt: Tabellendaten.

Hier wird eine Tabellenzelle und damit gleichzeitg eine Tabellenspalte erstellt.

Im Browser sieht das dann so aus:

zurück zum Inhaltsverzeichnis

Was fehlt ist ein Tabellenkopf. Also die Überschrift einer Tabelle. Die realisisert man mit dem <th> tag.

<th>...</th>: Der <th> Tag steht als Abkürzung für table header. Übersetzt: Tabellenkopf.

Als Code:

Ergebnis im Browser:

zurück zum Inhaltsverzeichnis

Optional ergänzt man Tabellen um einen Tabellenkörper und einen Tabellenfuß.

Der Tabellenkörper wird von den meisten Browsern automatisch ergänzt. Er muss also nicht angegeben werden. Man sollte ihn aber einfügen. Dann ist die HTML Syntax korrekt und die Tabelle wird auf jeden Fall richtig dargestellt.

Ein Tabellenfuß dient dazu, einer Tabelle erläuternde Informationen hinzuzufügen. Meistens ist das sinnvoll.

<tbody>: Das tbody Element heißt übersetzt Tabellenkörper. Innerhalb des tbody Elements befinden sich die Tabellenzeilen, die ausschließlich oder hauptsächlich Datenzellen enthalten

<tfoot>: Das tfoot Element steht als Abkürzung für table footer. Übersetzt: Tabellenfuß.

Als Code:

Ergebnis im Browser:

Wird eine Tabelle ausgedruckt, die größer als eine Seite ist, werden die von <thead> und <tfoot> umschlossenen Inhalte beim Drucken auf jeder Seite wiederholt.

zurück zum Inhaltsverzeichnis

Tabellenzellen gehören zu Zeilen und Spalten. Im Kontext von HTML gehören Tabellenzellen jedoch immer zu Zeilen, niemals zu Spalten. Sie sind Kinder (child Elemente) von Zeilen. Trotzdem können einige Aspekte von Zellen durch die Festlegung von Eigenschaften für Spalten beeinflusst werden.

Mit dem <colgroup> und dem <col> Element teilen Sie dem Browser vorab mit, wie viele Spalten Ihre Tabelle hat, und wie viele Zellen die Spalten enthalten.

Das ist optional, hat aber den Vorteil, dass Browser die Tabelle schneller anzeigen können.
Die Geschwindigkeit einer Webseite ist ein wichtiger Rankingfaktor für Suchmaschinen.

Der <col> Tag darf in HTML (im Gegensatz zu XHTML) nicht mit einem Abschluss-Tag versehen werden. Der Abschluss-Tag von <colgroup> kann muss aber nicht angegeben werden.

<colgroup>...</colgroup>: Der <colgroup> Tag steht als Abkürzung für column group, was übersetzt Spaltengruppe bedeutet.

<col>: Der <col> Tag steht als Abkürzung für column, was übersetzt Spalte bedeutet.

Beispielcode:

span steht als Abkürzung für spanning = überspannen.

Optisch ändert sich in diesem Fall nichts. Deshalb verzichte ich hier auf eine Darstellung im Browser.

zurück zum Inhaltsverzeichnis

Man kann Tabellenzellen miteinander verbinden. Das geht spaltenweise und/oder zeilenweise.

zurück zum Inhaltsverzeichnis

rowspan: rowspan steht als Abkürzung für row spaning, was übersetzt Zeile überspannen bedeutet.

Ein <td> Element, das mit diesem Tag ausgezeichnet ist, dehnt die Datenzelle in einer Spalte über die angegebene Anzahl von Zeilen in einer Spalte nach unten aus.

Wichtig: Die überspannte(n) Datenzelle(n) darf/dürfen im HTML Code nicht mehr vorkommen.

Beispielcode:

Ergebnis im Browser:

zurück zum Inhaltsverzeichnis

colspan: colspan steht als Abkürzung für column spaning, was übersetzt Spalte überspannen bedeutet.

Ein <td> Element, das mit diesem Tag ausgezeichnet ist, überspannt die angegebene Anzahl von Spalten in einer Zeile.

Wichtig: Die überspannte(n) Spalte(n) darf/dürfen im HTML Code nicht mehr vorkommen.

Beispielcode:

Ergebnis im Browser:

rowspan und colspan lassen sich in einer Tabelle beliebig kombinieren.

zurück zum Inhaltsverzeichnis

Es gibt eine Vielzahl von HTML-Attributen mit denen man Tabellen formatieren kann.

Die sollte man aber nicht mehr benutzen.
Voraussichtlich werden sie früher oder später aus dem HTML-Standard herausrausgenommen werden.

Zukunftssicher und viel flexibler formatiert man Tabellen mit CSS. Damit kann man Zellenfarben, Zellengrössen, Zellenabstände und vieles mehr festlegen.

zurück zum Inhaltsverzeichnis