In diesem Beitrag wollen wir dir Schritt für Schritt zeigen, wie du HTML Tabellen erstellen und organisieren kannst.
Aufbau einer HTML Tabelle
Damit schreiben wir die kleinstmögliche Tabelle so:
<table>
<tr>
<td>Das ist die kleinstmögliche Tabelle</td>
</tr>
</table>
und sie sieht dann so aus:
| Das ist die kleinstmögliche Tabelle |
HTML Tabelle mit zwei Zellen
Wollen wir eine einfache Tabelle mit zwei Zellen schreiben, geht das so:
<table>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
</tr>
</table>
Das Ergebnis sieht aus wie folgt:
| Zelle 1 | Zelle 2 |
Besonders wichtig beim Erstellen von HTML-Tabellen ist es, sich die Tabelle zeilenbasiert vorzustellen. So ist es besonders leicht, den Überblick über die Zellen und ihre Inhalte zu behalten.
HTML Tabellen mit leeren Zeilen und Zellen
Sowohl Zellen als auch Zeilen dürften leer sein, hierzu ein Beispiel:
<table>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Zelle 4</td>
<td>Zelle 5</td>
<td>Zelle 6</td>
</tr>
</table>
Im obigen Code ist die dritte Zelle leer und auch die Zellen in der zweiten Zeile. Das sieht dann so aus:
| Zelle 1 | Zelle 2 | |
| Zelle 4 | Zelle 5 | Zelle 6 |
Schon mit diesem Grundwissen kannst du einfache Tabellen in HTML erstellen.
Wenn du mehr darüber wissen willst, wie man HTML Tabellen formatieren kann, dann lies einfach weiter.
Organisation von HTML Tabellen
Zu den oben genannten grundlegenden HTML-Tags für Tabellen kommen noch die folgenden Tags hinzu, mit denen man die Tabelle noch besser organisieren kann.
Zu den Vorteilen der Gruppierung von Elementen mithilfe von weiteren HTML-Tags ist, dass du die einzeln angelegten Gruppen unterschiedlich ausrichten kannst. So kannst du beispielsweise die Inhalte im Tabellenkopf zentrieren, währenddessen die Inhalte im Tabellenkörper rechtsbündig ausgerichtet sein können.
Ein weiterer Vorteil ist, dass die Organisation von Tabellen die Lesbarkeit für Maschinen erhöht und die Tabelle so sowohl in Sachen SEO als auch in Sachen Barrierefreiheit punktet.
Kopf-, Rumpf- und Fußbereich
<thead></thead>Kopfteil der Tabelle, speziell für Überschriften gedacht<tbody></tbody>Rumpf der Tabelle, enthält die eigentlichen Daten<tfoot></tfoot>Fußteil der Tabelle, für Erläuterungen zu den Angaben innerhalb der Tabellen
Schauen wir uns dazu ein Beispiel an:
<table>
<thead>
<tr>
<td>Kopfteil der Tabelle</td>
</tr>
</thead>
<tbody>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 4</td>
<td>Zelle 5</td>
<td>Zelle 6</td>
</tr>
<tr>
<td>Zelle 7</td>
<td>Zelle 8</td>
<td>Zelle 9</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Fußteil der Tabelle</td>
</tr>
</tfoot>
</table>
| Kopfteil der Tabelle | ||
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Zelle 8 | Zelle 9 |
| Fußteil der Tabelle |
Die Tabelle ist zwar jetzt schon gut organisiert, schaut aber noch nicht so gut aus. Wie man das Styling der Tabelle anpasst, zeigen wir weiter unten.
Zellenüberschrift und weiteres
<th></th>Definiert eine Zellenüberschrift<caption></caption>Definiert die Beschriftung der Tabelle<colgroup></colgroup>Gibt eine Gruppe von einer oder mehreren Spalten in einer Tabelle zur Formatierung an<col></col>Gibt Spalteneigenschaften für jede Spalte innerhalb eines<colgroup>-Elements an
Definition der Zellenüberschrift
Oft will man Überschriften für die einzelnen Zellen einer Spalte, beispielsweise so:
| Kopfteil der Tabelle | ||
| Zellenüberschrift 1 | Zellenüberschrift 2 | Zellenüberschrift 3 |
|---|---|---|
| Zelle 1 | Zelle 2 | Zelle 3 |
| Zelle 4 | Zelle 5 | Zelle 6 |
| Fußteil der Tabelle |
Das HTML-Tag für die Zellenüberschrift ist <th></th>. Damit sieht der Code für obige Tabelle so aus:
<table>
<thead>
<tr>
<td>Kopfteil der Tabelle</td>
</tr>
</thead>
<tbody>
<tr>
<th>Zellenüberschrift 1</th>
<th>Zellenüberschrift 2</th>
<th>Zellenüberschrift 3</th>
</tr>
<tr>
<td>Zelle 4</td>
<td>Zelle 5</td>
<td>Zelle 6</td>
</tr>
<tr>
<td>Zelle 7</td>
<td>Zelle 8</td>
<td>Zelle 9</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Fußteil der Tabelle</td>
</tr>
</tfoot>
</table>
Beschriftung einer HTML Tabelle
Es ist möglich, HTML Tabellen zu beschriften. Das ist besonders auf Webseiten mit mehreren Tabellen hilfreich, um sich zu orientieren. Das HTML-Tag für die Beschriftung von Tabellen ist <caption></caption>. Das <caption>-Tag muss unmittelbar nach dem <table>-Tag eingefügt werden.
Wollen wir zur obigen Tabelle eine Beschriftung hinzufügen, tragen wir das so in den Code ein:
<table>
<caption>Beschriftung der Tabelle</caption>
<thead>
<tr>
<td>Kopfteil der Tabelle</td>
</tr>
</thead>
<tbody>
<tr>
<th>Zellenüberschrift 1</th>
<th>Zellenüberschrift 2</th>
<th>Zellenüberschrift 3</th>
</tr>
<tr>
<td>Zelle 4</td>
<td>Zelle 5</td>
<td>Zelle 6</td>
</tr>
<tr>
<td>Zelle 7</td>
<td>Zelle 8</td>
<td>Zelle 9</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Fußteil der Tabelle</td>
</tr>
</tfoot>
</table>
Und so sieht die Tabelle dann aus:
| Kopfteil der Tabelle | ||
| Zellenüberschrift 1 | Zellenüberschrift 2 | Zellenüberschrift 3 |
|---|---|---|
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Zelle 8 | Zelle 9 |
| Fußteil der Tabelle |
Verwendung von <colgroup> und <col>
Weiter oben in diesem Beitrag haben wir schon bemerkt, dass die Erstellung von HTML Tabellen zeilenbasiert ist. Was passiert aber, wenn du einzelne Spalten formatieren möchtest? Musst du dann jede Zelle jeder Zeile entsprechend formatieren?
Hier kommen die HTML-Tags <colgroup> und <col> ins Spiel.
Das <colgroup>-Tag fasst eine oder mehrere Spalten einer Tabelle für die Formatierung zusammen. Das macht es perfekt, um Formatierungen und Stile übersichtlich und effizient auf ganze Spalten anzuwenden.
Wichtig dabei ist, dass das <colgroup>-Tag im Code richtig postioniert wird. Es muss nach <table> und (falls vorhanden) nach <caption> eingefügt werden, aber vor <thead>, <tr>, <tbody> und <tfoot>.
Mit <col> spricht man dann die einzelnen Spalten der HTML Tabelle an.
Im folgenden Beispiel färben wir die drei Spalten unserer Beispieltabelle mit drei unterschiedlichen Farben ein:
<table>
<caption>Beschriftung der Tabelle</caption>
<colgroup>
<col style="background-color:red;">
<col style="background-color:yellow;">
<col style="background-color:blue;">
</colgroup>
<tbody>
<tr>
<th>Zellenüberschrift 1</th>
<th>Zellenüberschrift 2</th>
<th>Zellenüberschrift 3</th>
</tr>
<tr>
<td>Zelle 4</td>
<td>Zelle 5</td>
<td>Zelle 6</td>
</tr>
<tr>
<td>Zelle 7</td>
<td>Zelle 8</td>
<td>Zelle 9</td>
</tr>
</tbody>
</table>
Im ersten <col>-Tag wird der Stil für die erste Spalte definiert, im zweiten <col>-Tag der Stil für die zweite Spalte und im dritten <col>-Tag der Stil für die dritte Spalte.
| Zellenüberschrift 1 | Zellenüberschrift 2 | Zellenüberschrift 3 |
|---|---|---|
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Zelle 8 | Zelle 9 |
Möchte man allerdings lieber zwei Spalten gleich formatieren, zum Beispiel die ersten beiden, dann macht man das so:
<table>
<caption>Beschriftung der Tabelle</caption>
<colgroup>
<col span="2" style="background-color:red;">
<col style="background-color:blue;">
</colgroup>
<tbody>
<tr>
<th>Zellenüberschrift 1</th>
<th>Zellenüberschrift 2</th>
<th>Zellenüberschrift 3</th>
</tr>
<tr>
<td>Zelle 4</td>
<td>Zelle 5</td>
<td>Zelle 6</td>
</tr>
<tr>
<td>Zelle 7</td>
<td>Zelle 8</td>
<td>Zelle 9</td>
</tr>
</tbody>
</table>
| Zellenüberschrift 1 | Zellenüberschrift 2 | Zellenüberschrift 3 |
|---|---|---|
| Zelle 4 | Zelle 5 | Zelle 6 |
| Zelle 7 | Zelle 8 | Zelle 9 |
Du weißt jetzt, wie man eine HTML-Tabelle erstellt und organisiert. Im nächsten Beitrag: HTML Tabellen 2: HTML Tabellen stylen mithilfe von CSS zeigen wir dir, wie man eine HTML Tabelle stylt. Dabei decken wir folgende Themen ab:
