Verwendung von Tabellen in HTML

Mit Tabellen kannst du Daten strukturiert in Zeilen und Spalten darstellen. HTML-Tabellen eignen sich z. B. für Preislisten, Zeitpläne oder Statistiken.

Tabellenstruktur

Tabellen beginnen mit dem <table>-Tag. Zeilen werden mit <tr> erstellt, Überschriften mit <th>, Zellen mit <td>.

<table>
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>0.2$</td>
  </tr>
</table>

Beispiel: gerenderte Tabelle

Hier ist ein Beispiel, wie eine einfache HTML-Tabelle im Browser dargestellt wird. So kannst du sehen, wie der Code aussieht.

Besondere Zellenattribute

Mit colspan und rowspan kannst du Zellen über mehrere Spalten oder Zeilen hinweg ausdehnen.

<td colspan="2">Occupies two columns</td>

<td rowspan="2">Occupies two rows</td>

Semantische Tabellenelemente

Mit den Tags <thead>, <tbody> und <tfoot> kannst du den Aufbau deiner Tabelle klarer und verständlicher gestalten.

Wann sollten Tabellen verwendet werden?

Verwende Tabellen zur Darstellung strukturierter Daten. Nutze sie nicht für Layouts oder Designs – dafür sind moderne CSS-Lösungen besser geeignet.