HTML Grundlagen: Daten verständlich darstellen – Erfahre alles, was du über table wissen musst

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 zur früher benutzten Layout-Tabelle 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

Dieser Artikel führt in die Grundlagen von HTML-Tabellen ein. Eine HTML-Tabelle ist ein strukturiertes HTML-Element, mit dem Daten und Texte in Zeilen und Spalten dargestellt werden können. Eine Tabelle ermöglicht es, tabellarische Daten übersichtlich zu strukturieren. Eine Tabelle ermöglicht es, tabellarische Daten übersichtlich zu strukturieren.

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

Allgemeiner Aufbau einer HTML-Tabelle

<table>
<tr>
  <td>Zeile 1<br>Spalte 1</td>
  <td>Zeile 1<br>Spalte 2</td>
  <td>Zeile 1<br>Spalte 3</td>
</tr><tr>
  <td>Zeile 2<br>Spalte 1</td>
  <td>Zeile 2<br>Spalte 2</td>
  <td>Zeile 2<br>Spalte 3</td>
</tr><tr>
  <td>Zeile 3<br>Spalte 1</td>
  <td>Zeile 3<br>Spalte 2</td>
  <td>Zeile 3<br>Spalte 3</td>
</tr>
</table>

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

In HTML 4.x war es möglich, die Hintergrundfarbe für die gesamte Tabelle oder für einzelne Zellen der Tabelle mit dem Attribut bgcolor zu definieren. Die Textausrichtung der Tabellenzellen wurde durch das Attribut align bestimmt. In HTML 5 sind diese Attribute jedoch nicht mehr gültig. Stattdessen verwenden wir nun CSS, um Tabellen zu formatieren.

Die Anwendung von CSS-Klassen bietet sich für die individuelle Gestaltung von Tabellen an.

Eine etwas anspruchsvollere HTML-Tabelle erstellen

<table>
<tr>
  <th class="bgHead" colspan="3">Rechnung #123456789</th>
  <th class="bgDate">18. Juni 2025</th>
</tr><tr>
  <td class="bgSender" colspan="2">
    <strong>zahlbar an:</strong><br>
    Beispiel GmbH<br>
    Musterstraße 13<br>
    12345 Musterstadt
  </td>
  <td class="bgCustomer" colspan="2">
    <strong>Kunde:</strong><br>
    Max Mustermann<br>
    Musterweg 123<br>
    98765 Musterhausen
  </td>
</tr><tr>
  <th class="bgHead">Name / Beschreibung</th>
  <th class="bgHead">Menge</th>
  <th class="bgHead">Preis pro Stück</th>
  <th class="bgHead">Preis</th>
</tr><tr>
  <td class="bgItem">Büroklammern</td>
  <td class="bgItem">1000</td>
  <td class="bgItem right">0,015 &euro;</td>
  <td class="bgItem right">15,00 &euro;</td>
</tr><tr>
  <td class="bgItem">Heftklammern (Packung)</td>
  <td class="bgItem">100</td>
  <td class="bgItem right">1,24 &euro;</td>
  <td class="bgPrice right">124,00 &euro;</td>
</tr><tr>
  <th class="bgHead" colspan="3">Zwischensumme</th>
  <td class="bgPrice right">139,00 &euro;</td>
</tr><tr>
  <th class="bgHead" colspan="2">Umsatzsteuer</th>
  <td>class="bgVAT center">19%</td>
  <td class="bgPrice right">26,41 &euro;</td>
</tr><tr>
  <th class="bgTotal"colspan="3">Gesamtbetrag</th>
  <td class="bgTotal right">165,41 &euro;</td>
</tr>
</table>

Diese HTML Tabelle kann man semantisch in mehrere logische Abschnitte aufteilen. 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ß).

Eine etwas anspruchsvollere HTML-Tabelle erstellen

<table>
<thead>
<tr>
  <th class="bgHead" colspan="3">Rechnung #123456789</th>
  <th class="bgDate">18. Juni 2025</th>
</tr><tr>
  <td class="bgSender" colspan="2">
    <strong>zahlbar an:</strong><br>
    Beispiel GmbH<br>
    Musterstraße 13<br>
    12345 Musterstadt
  </td>
  <td class="bgCustomer" colspan="2">
    <strong>Kunde:</strong><br>
    Max Mustermann<br>
    Musterweg 123<br>
    98765 Musterhausen
  </td>
</tr>
</thead>
<tbody>
<tr>
  <th class="bgHead">Name / Beschreibung</th>
  <th class="bgHead">Menge</th>
  <th class="bgHead">Preis pro Stück</th>
  <th class="bgHead">Preis</th>
</tr><tr>
  <td class="bgItem">Büroklammern</td>
  <td class="bgItem">1000</td>
  <td class="bgItem right">0,015 &euro;</td>
  <td class="bgItem right">15,00 &euro;</td>
</tr><tr>
  <td class="bgItem">Heftklammern (Packung)</td>
  <td class="bgItem">100</td>
  <td class="bgItem right">1,24 &euro;</td>
  <td class="bgPrice right">124,00 &euro;</td>
</tr>
</tbody>
<tfoot>
<tr>
  <th class="bgHead" colspan="3">Zwischensumme</th>
  <td class="bgPrice right">139,00 &euro;</td>
</tr><tr>
  <th class="bgHead" colspan="2">Umsatzsteuer</th>
  <td>class="bgVAT center">19%</td>
  <td class="bgPrice right">26,41 &euro;</td>
</tr><tr>
  <th class="bgTotal"colspan="3">Gesamtbetrag</th>
  <td class="bgTotal 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.