<tr>

Zuletzt aktualisiert am 3. Februar 2026

Das <tr>-Element (Table Row) ist die Grundlage jeder Tabellenzeile in HTML. Ohne Zeilen gibt es keine Tabelle – jede Zeile enthält Zellen, die nebeneinander angeordnet werden und so die tabellarische Struktur bilden. Das Element selbst ist ein reiner Container und hat keine eigenen sichtbaren Attribute, aber es strukturiert deine Daten horizontal.

Grundlagen

Das <tr>-Element definiert eine horizontale Zeile in einer Tabelle. Jede Zeile enthält eine oder mehrere Zellen, die entweder Datenzellen (<td>) oder Kopfzellen (<th>) sein können. Die Anzahl der Zellen pro Zeile sollte konsistent sein, damit die Tabelle eine einheitliche Struktur behält.

Zeilen werden typischerweise innerhalb von <thead>, <tbody> oder <tfoot> platziert, um die Tabelle semantisch zu strukturieren. Im Kopfbereich (<thead>) verwendest du meist <th>-Zellen, im Hauptteil (<tbody>) meist <td>-Zellen.

Browser und Screenreader navigieren Zeile für Zeile durch Tabellen, weshalb eine saubere Zeilenstruktur für die Barrierefreiheit wichtig ist.

Syntax

<table>
  <tr>
    <td>Zeile 1, Zelle 1</td>
    <td>Zeile 1, Zelle 2</td>
  </tr>
  <tr>
    <td>Zeile 2, Zelle 1</td>
    <td>Zeile 2, Zelle 2</td>
  </tr>
</table>

Beispiele

Einfache Tabellenzeilen

Eine grundlegende Tabelle mit einer Kopfzeile und zwei Datenzeilen. Die erste Zeile verwendet <th>-Zellen für die Spaltenüberschriften, die folgenden Zeilen enthalten die eigentlichen Daten.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Alter</th>
      <th>Stadt</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Anna</td>
      <td>28</td>
      <td>Berlin</td>
    </tr>
    <tr>
      <td>Max</td>
      <td>34</td>
      <td>München</td>
    </tr>
  </tbody>
</table>

Zeilen in thead, tbody und tfoot

Eine vollständig strukturierte Tabelle mit Kopfbereich, Hauptteil und Fußbereich. Diese Aufteilung ist besonders hilfreich bei langen Tabellen, da Browser den Kopf und Fuß beim Scrollen oder Drucken wiederholen können.

<table>
  <thead>
    <tr>
      <th>Produkt</th>
      <th>Preis</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>899 €</td>
    </tr>
    <tr>
      <td>Maus</td>
      <td>25 €</td>
    </tr>
    <tr>
      <td>Tastatur</td>
      <td>65 €</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Gesamt</td>
      <td>989 €</td>
    </tr>
  </tfoot>
</table>

Zebra-Striping mit CSS

Alternierend eingefärbte Zeilen verbessern die Lesbarkeit, besonders bei langen Tabellen. Mit CSS kannst du jede zweite Zeile automatisch einfärben, ohne jede Zeile manuell zu stylen.

<style>
  .zebra-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
  }

  .zebra-table tbody tr:hover {
    background-color: #e8f4f8;
  }
</style>

<table class="zebra-table">
  <thead>
    <tr>
      <th>Mitarbeiter</th>
      <th>Abteilung</th>
      <th>Position</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Sarah Klein</td>
      <td>Marketing</td>
      <td>Manager</td>
    </tr>
    <tr>
      <td>Tom Müller</td>
      <td>Entwicklung</td>
      <td>Senior Developer</td>
    </tr>
    <tr>
      <td>Lisa Wagner</td>
      <td>Design</td>
      <td>UI Designer</td>
    </tr>
    <tr>
      <td>Jan Schmidt</td>
      <td>Vertrieb</td>
      <td>Sales Lead</td>
    </tr>
    <tr>
      <td>Nina Becker</td>
      <td>HR</td>
      <td>Recruiter</td>
    </tr>
  </tbody>
</table>

Barrierefreiheit

Screenreader navigieren Tabellen Zeile für Zeile, wobei sie ankündigen, in welcher Zeile sich der Nutzer befindet und wie viele Zellen die Zeile enthält. Eine konsistente Anzahl von Zellen pro Zeile ist daher wichtig für eine gute Nutzererfahrung.

Wenn du <th>-Zellen verwendest, geben Screenreader die Kopfzeilenwerte bei jeder Datenzelle an, sodass der Kontext erhalten bleibt. Dies funktioniert am besten, wenn du Zeilen in <thead>, <tbody> und optional <tfoot> strukturierst.

Bei komplexen Tabellen mit verschmolzenen Zellen (rowspan, colspan) solltest du die scope-Attribute bei <th>-Elementen setzen, um die Beziehungen zwischen Kopf- und Datenzellen klar zu machen.

Häufige Fehler

tr außerhalb von table: Das <tr>-Element darf nur innerhalb eines <table>-Elements (und idealerweise innerhalb von <thead>, <tbody> oder <tfoot>) verwendet werden. Ein <tr> direkt im Body oder in einem Div führt zu ungültigem HTML und unvorhersehbarem Rendering.

td und th gemischt in einer Zeile: Grundsätzlich ist es technisch erlaubt, <td> und <th> in derselben Zeile zu mischen. Das macht Sinn, wenn du beispielsweise Zeilenkopfzellen hast (erste Zelle ist <th scope="row">, Rest sind <td>). Vermeide es jedoch, ohne klaren Grund zu mischen – in Kopfzeilen sollten nur <th>-Zellen stehen, in Datenzeilen nur <td>-Zellen, es sei denn, du hast mehrdimensionale Tabellen mit Zeilen- und Spaltenkopfzellen. Dann ist scope="row" bzw. scope="col" bei den <th>-Elementen wichtig für die Barrierefreiheit.

Browser-Kompatibilität

Das tr-Element wird von allen modernen und älteren Browsern vollständig unterstützt, da es ein grundlegendes HTML-Element seit den Anfängen des Webs ist.

Email-Kompatibilität

Tabellen mit tr-Elementen funktionieren sehr gut in HTML-E-Mails und sind oft die bevorzugte Layout-Methode für Email-Templates. Alle großen Email-Clients unterstützen grundlegende Tabellenstrukturen vollständig, allerdings kann das Styling von CSS eingeschränkt sein.

Achte bei E-Mails darauf, dass du inline-Styles verwendest und komplexe CSS-Features wie nth-child() vermeidest, da diese nicht überall funktionieren. Tabellen sind in E-Mails der Standard für Layouts, weil sie konsistenter rendert werden als moderne CSS-Techniken wie Flexbox oder Grid.

Verwandte Elemente