<td>

Zuletzt aktualisiert am 3. Februar 2026

Das <td> Element (table data) definiert eine einzelne Datenzelle innerhalb einer Tabellenzeile. Es enthält die eigentlichen Inhalte der Tabelle – ob Text, Zahlen, Bilder oder andere HTML-Elemente. Zusammen mit <tr> und <th> bildet es das Grundgerüst jeder HTML-Tabelle.

Grundlagen

Das <td> Element wird immer innerhalb eines <tr> Elements (Tabellenzeile) verwendet und repräsentiert eine normale Datenzelle – im Gegensatz zu <th>, das für Überschriftenzellen gedacht ist. Browser stellen <td> Zellen standardmäßig linksbündig und mit normaler Schriftart dar.

Du kannst mehrere <td> Elemente in einer Zeile platzieren, um Spalten zu erstellen. Die Anzahl der Zellen pro Zeile sollte in der gesamten Tabelle konsistent sein, es sei denn, du nutzt die Attribute colspan oder rowspan, um Zellen über mehrere Spalten oder Zeilen zu spannen.

Das Element eignet sich perfekt für strukturierte Daten wie Produktlisten, Preistabellen, Kalender oder Vergleichstabellen. Achte darauf, Tabellen nur für tabulare Daten zu verwenden – nicht für Layouts.

Syntax

<table>
  <tr>
    <td>Name</td>
    <td>Berlin</td>
  </tr>
  <tr>
    <td>Einwohner</td>
    <td>3,7 Millionen</td>
  </tr>
</table>

Attribute

Beispiele

Einfache Datenzellen

<table>
  <thead>
    <tr>
      <th>Produkt</th>
      <th>Preis</th>
      <th>Verfügbar</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>899€</td>
      <td>Ja</td>
    </tr>
    <tr>
      <td>Maus</td>
      <td>29€</td>
      <td>Ja</td>
    </tr>
    <tr>
      <td>Tastatur</td>
      <td>79€</td>
      <td>Nein</td>
    </tr>
  </tbody>
</table>

Zelle über mehrere Spalten (colspan)

<table>
  <tr>
    <th>Name</th>
    <th>Montag</th>
    <th>Dienstag</th>
    <th>Mittwoch</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>9-17 Uhr</td>
    <td>9-17 Uhr</td>
    <td>9-17 Uhr</td>
  </tr>
  <tr>
    <td>Max</td>
    <td colspan="3">Urlaub</td>
  </tr>
</table>

Zelle über mehrere Zeilen (rowspan)

<table>
  <tr>
    <th>Team</th>
    <th>Mitglied</th>
    <th>Rolle</th>
  </tr>
  <tr>
    <td rowspan="2">Frontend</td>
    <td>Sarah</td>
    <td>Lead</td>
  </tr>
  <tr>
    <td>Tom</td>
    <td>Developer</td>
  </tr>
  <tr>
    <td rowspan="2">Backend</td>
    <td>Lisa</td>
    <td>Lead</td>
  </tr>
  <tr>
    <td>Jan</td>
    <td>Developer</td>
  </tr>
</table>

Barrierefreiheit

Für einfache Tabellen reicht die Verwendung von <th> Elementen in der ersten Zeile oder Spalte aus. Bei komplexeren Tabellen mit mehreren Überschriftenebenen oder verschachtelten Strukturen solltest du das headers Attribut verwenden.

Das headers Attribut verknüpft eine Datenzelle mit einer oder mehreren Überschriftenzellen, indem es auf deren IDs verweist. Das hilft Screenreader-Nutzern, die Beziehung zwischen Daten und Überschriften auch bei komplexen Tabellen zu verstehen.

<table>
  <tr>
    <th id="name">Name</th>
    <th id="alter">Alter</th>
  </tr>
  <tr>
    <td headers="name">Anna</td>
    <td headers="alter">28</td>
  </tr>
</table>

Bei einfachen Tabellen ist das headers Attribut nicht zwingend notwendig – moderne Screenreader können die Beziehungen automatisch ableiten. Verwende es nur, wenn die Tabellenstruktur wirklich komplex ist.

Häufige Fehler

td statt th für Überschriften verwenden: Ein häufiger Fehler ist es, normale <td> Elemente für Tabellenüberschriften zu nutzen und sie dann mit CSS fett zu machen. Das ist semantisch falsch und schadet der Barrierefreiheit. Verwende immer <th> für Überschriften – Browser und Screenreader behandeln sie anders als normale Datenzellen.

colspan-Zählung falsch berechnen: Wenn du colspan verwendest, musst du die Gesamtzahl der Spalten im Blick behalten. Eine Zeile mit drei Spalten kann beispielsweise aus einer Zelle mit colspan="2" und einer normalen Zelle bestehen. Wenn du eine zusätzliche Zelle ohne Anpassung des colspan-Werts hinzufügst, verschiebt sich das Tabellenlayout oder eine Zelle rutscht in die nächste Zeile.

rowspan über Zeilen hinweg vergessen: Wenn eine Zelle mit rowspan="2" zwei Zeilen überspannt, musst du in der zweiten Zeile eine Zelle weniger einfügen. Viele Entwickler vergessen das und wundern sich, warum die Tabelle nicht richtig ausgerichtet ist.

Tabellen für Layouts missbrauchen: Tabellen sind für tabulare Daten gedacht, nicht für Seitenlayouts. Auch wenn Tabellen in alten HTML-Versionen oft für Layouts verwendet wurden, ist das heute ein Antipattern. Verwende CSS Grid oder Flexbox für Layouts und Tabellen nur für echte Datenstrukturen.

Browser-Kompatibilität

Das <td> Element wird seit den frühesten HTML-Versionen von allen Browsern vollständig unterstützt. Auch die Attribute colspan, rowspan und headers funktionieren überall ohne Probleme.

Email-Kompatibilität

Tabellen sind eines der wenigen HTML-Elemente, die in HTML-Emails zuverlässig funktionieren. Das td-Element wird von allen gängigen E-Mail-Clients unterstützt. Für maximale Kompatibilität solltest du Inline-Styles direkt auf td-Elemente anwenden.

Verwandte Elemente