HTML Grundlagen: TABLE • HTML Tabellen erstellen

HTML-Tabellen erstellen mit TABLE, TR und TD

Zu Zeiten als HTML gerade das Laufen lernte, stand CSS noch nicht bzw. nur sehr eingeschränkt zur Verfügung. Damals, das heißt Anfang der 2000er Jahre, wurden Tabellen ohne Rahmen zur Gestaltung von Webseiten benutzt. Tabellen werden heute aber nicht mehr für das Layout einer Webseite verwendet, da sie nicht so flexibel sind wie z.B. div-Container.

Tabellen sollten nur zur Darstellung tabellarischer Daten oder Texte verwendet werden.

Grundstruktur einer HTML Tabelle

Es werden mindestens drei HTML Elemente benötigt, um eine Tabelle zu erstellen. Dies sind: TABLE, TR und TD. In der Regel werden mit TH zusätzlich Kopfzellen als Überschriften definiert.

TABLE – Eine Tabelle wird immer mit <table> eingeleitet und muss mit </table> abgeschlossen. Wenn nichts anderes angegeben ist, gehört alles zwischen <table> und </table> zum TBODY-Element (Deutsch: Tabellenkörper).
TR (für Englisch: Table Row) – Jede Zeile der Tabelle wird mit <tr> eingeleitet und muss mit </tr> abgeschlossen werden.
TD (für Englisch: Table Data) – Jede Daten-Zelle der Tabelle wird mit <td> eingeleitet und muss mit </td> abgeschlossen werden.
TH (für Englisch: Table Header) – Jede Kopfzelle der Tabelle wird mit <th> eingeleitet und muss mit </th> abgeschlossen werden.

Eine einfache HTML Tabelle

Beispiel

<table border="1" width="320">
<tr>
    <td align="center">Zeile 1<br>Spalte 1</td>
    <td align="center">Zeile 1<br>Spalte 2</td>
    <td align="center">Zeile 1<br>Spalte 3</td>
</tr><tr>
    <td align="center">Zeile 2<br>Spalte 1</td>
    <td align="center">Zeile 2<br>Spalte 2</td>
    <td align="center">Zeile 2<br>Spalte 3</td>
</tr><tr>
    <td align="center">Zeile 3<br>Spalte 1</td>
    <td align="center">Zeile 3<br>Spalte 2</td>
    <td align="center">Zeile 3<br>Spalte 3</td>
</tr>
</table>

Ausgabe des HTML Codes

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

Tabellenzellen verbinden

Durch die Attribute colspan und rowspan können mehrere Zellen der Tabelle zu einer Zelle verbunden werden. Mit colspan werden nebeneinander liegende Zellen verbunden. Mit rowspan werden übereinander liegende Zellen verbunden. Diese zwei Attribute können nur für Tabellenzellen angegeben werden, d.h. nur für die zwei HTML-Elemente TD und TH.

Mit dem Attribut colspan kann man eine Tabellezelle nach rechts mit mehreren benachbarten Zellen in der gleichen Zeile verbinden.
Mit dem Attribut rowspan kann man eine Tabellenzelle nach unten mit mehreren benachbarten Zellen derselben Spalte verbinden.
Die gleichzeitige Anwendung von colspan und rowspan erlaubt es, eine Tabellenzelle nach rechts und nach unten mit mehreren benachbarten Zellen der Tabelle zu verbinden.

Die folgenden drei Tabellen demonstrieren die Anwendung der Attribute colspan und rowspan.

11	12	13	14
21	22	23	24
31	32	33	34
41	42	43	44

11, 12		13 23 33 43	14
21	22		24
31	32		34
41	42		44

11	12	13	14 24
21	22	23	14 24
31, 32 41, 42		33	34
31, 32 41, 42		43	44

Mit dem Attribut colspan (für Englisch: Column Span) kann man Spalten überspannen, d.h. man kann eine Tabellenzelle nach rechts über mehrere Zellen ausdehnen. Die überspannten Zellen darf man nicht mehr angeben. Vgl. die Tabellenzelle mit dem Inhalt 11, 12 in der zweiten Tabelle.

Mit dem Attribut rowspan (für Englisch: Row Span) kann man Zeilen überspannen, d.h. man kann eine Tabellenzelle nach unten über mehrere Tabellenzeilen ausdehnen. Die überspannten Zellen der Tabelle dürfen nicht mehr angegeben werden. Vgl. die Tabellenzelle mit dem Inhalt 13, 23, 33, 43 in der zweiten Tabelle.

Die Attribute colspan und rowspan kann man auch kombinieren und gemeinsam angeben. Vgl. die Tabellenzelle mit dem Inhalt 31, 32, 41, 42 in der dritten Tabelle.

Beispiel für eine etwas komplexere HTML Tabelle

<table border="1">
<tr>
    <th colspan="3" bgcolor="#cccccc">Rechnung #123456789</th>
    <th>21. November 2024</th>
</tr><tr>
    <td colspan="2">
        <strong>zahlbar an:</strong><br>
        Beispiel GmbH<br>
        Musterstraße 13<br>
        12345 Muster City
    </td>
    <td colspan="2">
        <strong>Kunde:</strong><br>
        Max Mustermann<br>
        Musterweg 123<br>
        98765 Musterhausen
    </td>
</tr><tr>
    <th bgcolor="#cccccc">Name / Beschreibung</th>
    <th bgolor="#cccccc">Menge</th>
    <th bgcolor="#cccccc">Preis pro Stück</th>
    <th bgcolor="#cccccc">Preis</th>
</tr><tr>
    <td bgcolor="#ffff90">Büroklammern</td>
    <td bgcolor="#ffff90">1000</td>
    <td bgcolor="#ffff90" align="right">0,015 &euro;</td>
    <td bgcolor="#dddd60" align="right">15,00 &euro;</td>
</tr><tr>
    <td bgcolor="#ffff90">Heftklammern (Packung)</td>
    <td bgcolor="#ffff90">100</td>
    <td bgcolor="#ffff90" align="right">1,24 &euro;</td>
    <td bgcolor="#dddd60" align="right">124,00 &euro;</td>
</tr><tr>
    <th colspan="3" bgcolor="#cccccc">Zwischensumme</th>
    <td bgcolor="#dddd60" align="right">139,00 &euro;</td>
</tr><tr>
    <th colspan="2" bgcolor="#cccccc">Umsatzsteuer</th>
    <td>19%</td>
    <td bgcolor="#dddd60" align="right">26,41 &euro;</td>
</tr><tr>
    <th colspan="3" bgcolor="#cccccc">Gesamtbetrag</th>
<td bgcolor="#00dd00" align="right">165,41 &euro;</td>
</tr>
</table>

Ausgabe des HTML Codes

Rechnung #123456789			21. November 2024
zahlbar an: Beispiel GmbH Musterstraße 13 12345 Muster City		Kunde: Max Mustermann Musterweg 123 98765 Musterhausen
Name / Beschreibung	Menge	Preis pro Stück	Preis
Büroklammern	1000	0,015 €	15,00 €
Heftklammern (Packung)	100	1,24 €	124,00 €
Zwischensumme			139,00 €
Umsatzsteuer		19%	26,41 €
Gesamtbetrag			165,41 €

Diese HTML Tabelle kann man auch semantisch in mehrere logische Abschnitte teilen. Dazu gibt es die HTML Elemente:

TBODY (für Englisch: Table Body) (Deutsch Tabellenkörper),
THEAD für Englisch: Table Header (Deutsch: Tabellenkopf) und
TFOOT für Englisch: Table Footer (Deutsch: Tabellenfuß).

<table border="1">
<thead>
<tr>
    <th colspan="3" bgcolor="#cccccc">Rechnung #123456789</th>
    <th>21. November 2024</th>
</tr><tr>
    <td colspan="2">
        <strong>zahlbar an:</strong><br>
        Beispiel GmbH<br>
        Musterstraße 13<br>
        12345 Muster City
    </td>
    <td colspan="2">
        <strong>Kunde:</strong><br>
        Max Mustermann<br>
        Musterweg 123<br>
        98765 Musterhausen
    </td>
</tr>
</thead>
<tbody>
<tr>
    <th bgcolor="#cccccc">Name / Beschreibung</th>
    <th bgolor="#cccccc">Menge</th>
    <th bgcolor="#cccccc">Preis pro Stück</th>
    <th bgcolor="#cccccc">Preis</th>
</tr><tr>
    <td bgcolor="#ffff90">Büroklammern</td>
    <td bgcolor="#ffff90">1000</td>
    <td bgcolor="#ffff90" align="right">0,015 &euro;</td>
    <td bgcolor="#dddd60" align="right">15,00 &euro;</td>
</tr><tr>
    <td bgcolor="#ffff90">Heftklammern (Packung)</td>
    <td bgcolor="#ffff90">100</td>
    <td bgcolor="#ffff90" align="right">1,24 &euro;</td>
    <td bgcolor="#dddd60" align="right">124,00 &euro;</td>
</tr>
</tbody>
<tfoot>
<tr>
    <th colspan="3" bgcolor="#cccccc">Zwischensumme</th>
    <td bgcolor="#dddd60" align="right">139,00 &euro;</td>
</tr><tr>
    <th colspan="2" bgcolor="#cccccc">Umsatzsteuer</th>
    <td>19%</td>
    <td bgcolor="#dddd60" align="right">26,41 &euro;</td>
</tr><tr>
    <th colspan="3" bgcolor="#cccccc">Gesamtbetrag</th>
<td bgcolor="#00dd00" align="right">165,41 &euro;</td>
</tr>
</tfoot>
</table>

Standardmäßig haben die HTML Elemente THEAD, TBODY und TFOOT keinen Einfluss auf die Darstellung der Tabelle. Mit CSS können die Eigenschaften dieser HTML Elemente aber geändert werden.

Beachte:

THEAD und TFOOT dürfen in einer Tabelle maximal einmal vorkommen. TBODY muss mindestens einmal vorkommen.

Wenn THEAD, TBODY und TFOOT im HTML-Code nicht angegeben werden, fügen die Browser das fehlende TBODY automatisch ein.