HTML `<tr>`-Tag

Das <tr>-Tag definiert eine Zeile in einer HTML-Tabelle. Die darin enthaltenen Zellen werden mit <th>-Elementen (Kopfzelle) oder <td>-Elementen (Standardzelle) definiert. Sowohl das <td>- als auch das <th>-Tag unterstützen das Attribut colspan, um die Ausrichtung der Zellen über oder in Spalten genauer zu steuern. Mit diesem Attribut lässt sich festlegen, wie viele Spalten breit eine Zelle sein muss (Standardwert ist 1). Wenn Sie angeben möchten, dass eine Zelle sich über mehrere Zeilen erstrecken soll, können Sie das Attribut rowspan verwenden.

Einige Tabellen können zusätzlich die Elemente <col>, <colgroup>, <caption>, <tfoot>, <tbody> und <thead> enthalten.

Das <tr>-Element wird innerhalb des <table>-Tags deklariert.

Jede Zeile kann eine unterschiedliche Anzahl von Zellen enthalten. Der Browser rendert genau die Zellen, die im Markup angegeben sind; er füllt die Zeile nicht automatisch mit leeren Zellen auf. Wenn Sie eine Zelle leer lassen möchten, erstellen Sie einfach ein <td>- oder <th>-Element ohne Inhalt.

Erfolg
Um das Aussehen der Tabelle anzupassen, verwenden Sie CSS-Eigenschaften.

Syntax

Das <tr>-Tag wird immer paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<tr>) und dem schließenden (</tr>) Tag geschrieben.

Syntax des HTML <tr>-Tags

html

<table> 
  <tr> 
    <td>...</td> 
  </tr> 
</table>

Beispiel für das HTML `<tr>`-Tag:

Beispiel für das HTML <tr>-Tag

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Month</th>
        <th>Date</th>
      </tr>
      <tr>
        <td>March</td>
        <td>10.09.2018</td>
      </tr>
      <tr>
        <td>June</td>
        <td>18.07.2018</td>
      </tr>
    </table>
  </body>
</html>

Try it Yourself »

Ergebnis

tr example

Attribute

Hinweis: Die folgenden Attribute sind in HTML5 veraltet und sollten in der modernen Webentwicklung nicht verwendet werden.

Attribut	Wert	Beschreibung
align	right left center justify char	Richtet den Inhalt in einer Tabellenzeile aus. Nicht in HTML5 unterstützt.
bgcolor	bgcolor	Legt eine Hintergrundfarbe für eine Tabellenzeile fest. Nicht in HTML5 unterstützt.
bordercolor	bordercolor	Legt die Farbe des Rahmens fest. Nicht in HTML5 unterstützt.
char	character	Richtet den Inhalt in einer Tabellenzeile an einem bestimmten Zeichen aus. Wird nur verwendet, wenn das Attribut align="char" ist. Nicht in HTML5 unterstützt.
charoff	number	Legt die Anzahl der Zeichen fest, um die der Inhalt vom durch das char-Attribut angegebenen Zeichen ausgerichtet wird. Wird nur verwendet, wenn das Attribut align="char" ist. Nicht in HTML5 unterstützt.
valign	top middle bottom baseline	Legt die vertikale Ausrichtung des Inhalts innerhalb einer Tabellenzeile fest. Nicht in HTML5 unterstützt.

Das <tr>-Tag unterstützt die Globalen Attribute und die Ereignisattribute.

So stylen Sie ein HTML <tr>-Tag

Praxis

Wofür steht das <tr>-Tag in HTML und wie wird es verwendet?

Das <tr>-Tag wird zum Erstellen eines neuen Absatzes verwendet.Das <tr>-Tag wird zum Erstellen eines Textblocks verwendet.Das <tr>-Tag wird zum Erstellen einer neuen Zeile in einer Tabelle verwendet.Das <tr>-Tag kann zusammen mit <th>- und <td>-Tags verwendet werden, um Zellen in der Zeile zu definieren.Das <tr>-Tag kann sowohl innerhalb als auch außerhalb des <table>-Tags platziert werden.

HTML <tr>-Tag ​

Syntax ​

Beispiel für das HTML <tr>-Tag: ​

Ergebnis ​