HTML Grundlagen: Tabellen erzeugen mit <TABLE> und </TABLE> • Wie sind HTML-Tabellen aufgebaut? • responsive 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:

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.

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

11121314
21222324
31323334
41424344
11, 1213
23
33
43
14
212224
313234
414244
11121314
24
212223
31, 32
41, 42
3334
4344

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>23. September 2023</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 #12345678923. September 2023
zahlbar an:
Beispiel GmbH
Musterstraße 13
12345 Muster City
Kunde:
Max Mustermann
Musterweg 123
98765 Musterhausen
Name / BeschreibungMengePreis pro StückPreis
Büroklammern10000,015 €15,00 €
Heftklammern (Packung)1001,24 €124,00 €
Zwischensumme139,00 €
Umsatzsteuer19%26,41 €
Gesamtbetrag165,41 €

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


<table border="1">
<thead>
<tr>
    <th colspan="3" bgcolor="#cccccc">Rechnung #123456789</th>
    <th>23. September 2023</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.