mitmario.dev

<td>

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.

Steckbrief <td>
Kategorie
Tabellen
Art
Block
Attribute
3
Beispiele
3
Browser
4 von 4
E-Mail
5 von 5
Stand
03.02.2026

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

index.html
Grundsyntax
<table>
  <tr>
    <td>Name</td>
    <td>Berlin</td>
  </tr>
  <tr>
    <td>Einwohner</td>
    <td>3,7 Millionen</td>
  </tr>
</table>

Attribute

3 Attribute
Attribut und Beispiel Beschreibung
colspan Number
colspan="2"
Gibt an, über wie viele Spalten sich die Zelle erstrecken soll. Standard ist 1.
rowspan Number
rowspan="3"
Gibt an, über wie viele Zeilen sich die Zelle erstrecken soll. Standard ist 1.
headers String
headers="name alter"
Verweist auf die IDs von th-Elementen, die als Überschriften für diese Zelle dienen. Wichtig für Barrierefreiheit bei komplexen Tabellen.

Beispiele

3 Beispiele
index.html
Produkttabelle
<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>

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

4 Fehler
01 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.
02 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.
03 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.
04 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

4 von 4

  • Chrome

    Komplett

  • Firefox

    Komplett

  • Safari

    Komplett

  • Edge

    Komplett

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

5 von 5

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.

  • Apple Mail

    Komplett

  • Gmail

    Komplett

    colspan und rowspan werden unterstützt. Inline-Styles empfohlen.

  • Outlook

    Komplett

    Tabellen sind die bevorzugte Layout-Methode für Outlook. Bei verschachtelten Tabellen gründlich testen.

  • Thunderbird

    Komplett

  • Yahoo Mail

    Komplett

Newsletter

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

Danach kommt eine Mail mit Bestätigungslink, erst dann bist du eingetragen. Abmelden geht unten in jeder Ausgabe. Mehr dazu in der Datenschutzerklärung.