HTML Grundlagen: Tabellen erstellen mit <table>, <tr>, <td>

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

<table border="1">
<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>
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

Mit den Attributen »colspan« und »rowspan« können Tabellenzellen verbunden werden. Mit colspan werden nebeneinander liegende Zellen verbunden. Mit rowspan werden übereinander liegende Zellen verbunden. Diese beiden Attribute können nur für Tabellenzellen angegeben werden, d.h. td und th.

Die folgenden drei Tabellen demonstrieren die Anwendung von 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 kann (colspan für Englisch »column span« = Spalten überspannen) kann man eine Tabellenzelle nach rechts über mehrere Tabellenzellen ausdehnen. Die überspannten Zellen dürfen nicht mehr angegeben werden. Vgl. die Tabellenzelle mit dem Inhalt 11, 12 in der zweiten Tabelle.

Mit dem Attribut rowspan kann (rowspan für Englisch »row span« = Zeilen überspannen) kann man eine Tabellenzelle nach unten über mehrere Tabellenzeilen ausdehnen. Die überspannten Tabellenzellen 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 können auch gemeinsam angegeben werden. 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. März 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,01 &euro;</td>
    <td bgcolor="#dddd60" align="right">10,00 &euro;</td>
</tr><tr>
    <td bgcolor="#ffff90">Heftklammern (Packung)</td>
    <td bgcolor="#ffff90">100</td>
    <td bgcolor="#ffff90" align="right">1,00 &euro;</td>
    <td bgcolor="#dddd60" align="right">100,00 &euro;</td>
</tr><tr>
    <th colspan="3" bgcolor="#cccccc">Zwischensumme</th>
    <td bgcolor="#dddd60" align="right">110,00 &euro;</td>
</tr><tr>
    <th colspan="2" bgcolor="#cccccc">Umsatzsteuer</th>
    <td>19%</td>
    <td bgcolor="#dddd60" align="right">20,90 &euro;</td>
</tr><tr>
    <th colspan="3" bgcolor="#cccccc">Gesamtbetrag</th>
<td bgcolor="#00dd00" align="right">130,90 &euro;</td>
</tr>
</table>
Ausgabe des HTML Codes
Rechnung #12345678921. März 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,01 €10,00 €
Heftklammern (Packung)1001,00 €100,00 €
Zwischensumme110,00 €
Umsatzsteuer19%20,90 €
Gesamtbetrag130,90 €

Diese HTML Tabelle kann man auch semantisch in mehrere logische Abschnitte gliedern. Dazu gibt es die HTML Elemente TBODY (tbody für Englisch »table body« = Tabellenkörper), THEAD (thead für Englisch »table header« = Tabellenkopf) und TFOOT (tfoot für Englisch »table footer« = Tabellenfuß).

<table border="1">
<thead>
<tr>
    <th colspan="3" bgcolor="#cccccc">Rechnung #123456789</th>
    <th>21. März 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,01 &euro;</td>
    <td bgcolor="#dddd60" align="right">10,00 &euro;</td>
</tr><tr>
    <td bgcolor="#ffff90">Heftklammern (Packung)</td>
    <td bgcolor="#ffff90">100</td>
    <td bgcolor="#ffff90" align="right">1,00 &euro;</td>
    <td bgcolor="#dddd60" align="right">100,00 &euro;</td>
</tr>
</tbody>
<tfoot>
<tr>
    <th colspan="3" bgcolor="#cccccc">Zwischensumme</th>
    <td bgcolor="#dddd60" align="right">110,00 &euro;</td>
</tr><tr>
    <th colspan="2" bgcolor="#cccccc">Umsatzsteuer</th>
    <td>19%</td>
    <td bgcolor="#dddd60" align="right">20,90 &euro;</td>
</tr><tr>
    <th colspan="3" bgcolor="#cccccc">Gesamtbetrag</th>
<td bgcolor="#00dd00" align="right">130,90 &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 jedoch geändert werden.

Beachte, dass THEAD und TFOOT in einer Tabelle nur maximal einmal vorkommen dürfen und TBODY mindestens einmal vorkommen muss. Wenn THEAD, TBODY und TFOOT im HTML nicht angegeben werden, fügen die Browser das fehlende TBODY automatisch ein.