<tr>

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.

Steckbrief <tr>

Kategorie: Tabellen
Art: Block
Beispiele: 3
Browser: 6 von 6
E-Mail: 7 von 7
Stand: 03.02.2026

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

index.html

Grundsyntax

<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

3 Beispiele

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.

index.html

Tabelle mit Kopf- und Datenzeilen

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

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.

index.html

Strukturierte Tabelle mit thead, tbody und tfoot

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

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.

index.html

Zebra-Striping mit CSS

<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

2 Fehler

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

02 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

6 von 6

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.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett
Internet Explorer

Komplett

Email-Kompatibilität

7 von 7

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.

Gmail (Web)

Komplett
Gmail (Mobile)

Komplett
Apple Mail

Komplett
Outlook (Desktop)

Komplett
Outlook.com

Komplett
Yahoo Mail

Komplett
Thunderbird

Komplett

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.

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

<tr>

Grundlagen

Syntax

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter