HTML Grundlagen: Die Power von Tabellen – Entdecke die vielfältigen Möglichkeiten von table

HTML-Tabellen erstellen mit TABLE, TR und TD

In den frühen Jahren von HTML bis in die 2000er Jahre gab es noch keine konsequente Trennung zwischen Layout und Struktur der Seite. Damals wurden Tabellen und Layout-Attribute zur Gestaltung von Webseiten benutzt. Diese Technik wird heute als veraltet und unprofessionell betrachtet.

Tabellen werden heute nicht mehr für das Layout von Webseiten verwendet, da sie für mobile Endgeräte nicht geeignet sind.

Im Gegensatz zu den früher benutzten Layouttabellen können mit CSS Grid flexible Layouts auf einfache und intuitive Art und Weise mit einem zwei-dimensionalen Gestaltungsraster erstellt werden.

Grundstruktur einer HTML Tabelle

Um eine Tabelle zu erstellen, sind mindestens drei HTML-Tags erforderlich. Dies sind: TABLE, TR und TD. In der Regel ist zusätzlich TH notwendig, um Kopfzellen als Überschriften zu definieren.

• TABLE – Eine Tabelle wird 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

<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>

Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.

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 untereinander 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.

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. Dezember 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>

Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.

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. Dezember 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.

Die HTML-Tags 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.