HTML Tabellen erstellen - So einfach geht es!

HTML und CSS - Jürgen Wolf*

1. Wozu sind HTML Tabellen gut?

Periodensystems der Elemente

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

2. Ein einfaches Grundgerüst einer HTML Tabelle

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:

<table>

    <tr>  <td>Tabellenzelleninhalt</td>  <td>Tabellenzelleninhalt</td>  </tr>
    <tr>  <td>Tabellenzelleninhalt</td>  <td>Tabellenzelleninhalt</td>  </tr>

</table>

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

Man kann das auch folgendermassen schreiben:

<table>

    <tr>
        <td>Tabellenzelleninhalt</td>  <td>Tabellenzelleninhalt</td>
    </tr>

    <tr>
        <td>Tabellenzelleninhalt</td>  <td>Tabellenzelleninhalt</td>
    </tr>

</table>

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:

TabellenzelleninhaltTabellenzelleninhalt
TabellenzelleninhaltTabellenzelleninhalt

zurück zum Inhaltsverzeichnis

3. Tabellenkopf

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:

<table>

    <tr>  <th>Tabellenkopf 1</th>  <th>Tabellenkopf 2</th>  </tr>
    <tr>  <td>Tabellenzelleninhalt</td>  <td>Tabellenzelleninhalt</td>  </tr>
    <tr>  <td>Tabellenzelleninhalt</td>  <td>Tabellenzelleninhalt</td>  </tr>

</table>

Ergebnis im Browser:

Tabellenkopf 1Tabellenkopf 2
TabellenzelleninhaltTabellenzelleninhalt
TabellenzelleninhaltTabellenzelleninhalt

zurück zum Inhaltsverzeichnis

4. Tabellenkörper und Tabellenfuß

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:

<table>

    <tr>  <th>Tabellenkopf 1</th>  <th>Tabellenkopf 2</th>  </tr>
    <tbody>
    <tr>  <td>Tabellenzelleninhalt</td>  <td>Tabellenzelleninhalt</td>  </tr>
    <tr>  <td>Tabellenzelleninhalt</td>  <td>Tabellenzelleninhalt</td>  </tr>
    </tbody>
    <tfoot>
    <tr>  <td>Tabellenfuß</td>  </tr>
    </tfoot>

</table>

Ergebnis im Browser:

Tabellenkopf 1Tabellenkopf 2
TabellenzelleninhaltTabellenzelleninhalt
TabellenzelleninhaltTabellenzelleninhalt
Tabellenfuß

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

5. Spalten gestalten

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:

<table>

    <colgroup>
    <col span="1">
    </colgroup>
    <tr>  <th>Tabellenkopf 1</th>  <th>Tabellenkopf 2</th>  </tr>
    <tbody>
    <tr>  <td>Tabellenzelleninhalt</td>  <td>Tabellenzelleninhalt</td>  </tr>
    <tr>  <td>Tabellenzelleninhalt</td>  <td>Tabellenzelleninhalt</td>  </tr>
    </tbody>
    <tfoot>
    <tr>  <td>Tabellenfuß</td>  </tr>
    </tfoot>

</table>

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

6. Tabellenzellen verbinden

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

zurück zum Inhaltsverzeichnis

6.1 Tabellenzellen in einer Spalte verbinden

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:

<table>

    <tr>  <th>Tabellenkopf 1</th>  <th>Tabellenkopf 2</th>  </tr>
    <tbody>
    <tr>  <td rowspan="2">Tabellenzelleninhalt</td>  <td>Tabellenzelleninhalt</td>  </tr>
    <tr>  <td>Tabellenzelleninhalt</td>  </tr>
    </tbody>
    <tfoot>
    <tr>  <td>Tabellenfuß</td>  </tr>
    </tfoot>

</table>

Ergebnis im Browser:

Tabellenkopf 1Tabellenkopf 2
TabellenzelleninhaltTabellenzelleninhalt
Tabellenzelleninhalt
Tabellenfuß

zurück zum Inhaltsverzeichnis

6.2 Tabellenzellen in einer Zeile verbinden

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:

<table>

    <tr>  <th>Tabellenkopf 1</th>  <th>Tabellenkopf 2</th>  </tr>
    <tbody>
    <tr>  <td colspan="2">Tabellenzelleninhalt</td>
    <tr>  <td>Tabellenzelleninhalt</td>  <td>Tabellenzelleninhalt</td>  </tr>
    </tbody>
    <tfoot>
    <tr>  <td>Tabellenfuß</td>  </tr>
    </tfoot>

</table>

Ergebnis im Browser:

Tabellenkopf 1Tabellenkopf 2
Tabellenzelleninhalt
TabellenzelleninhaltTabellenzelleninhalt
Tabellenfuß

rowspan und colspan lassen sich in einer Tabelle beliebig kombinieren.

zurück zum Inhaltsverzeichnis

7. Tabellenformatierung

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

Das könnte Sie auch interessieren:

CSS TUTORIAL

Mit HTML strukturieren Sie Ihren Inhalt.
Mit Cascading Style Sheets sorgen Sie dafür, das Ihre Seite gut aussieht.
Wie Sie das bewerkstelligen, erfahren Sie hier!

JAVASCRIPT TUTORIAL

Wenn Ihre Website interaktiv sein soll, ist JavaScript erforderlich.
Dieses JavaScript Tutorial ein sehr guter Einstieg!

LITERATUR

Auf dieser Seite finden Sie Literatur rund um alle Themen, die sich mit der Erstellung eines Websiteprojekts beschäftigen!


Die Datei wurde zuletzt aktualisiert am: 10.04.2022