HTML <tr> Tag

Definition und Verwendung

<tr> Tags definieren Zeilen in HTML-Tabellen.

<tr> Elemente enthalten eine oder mehrere <th> oder <td> Elemente.

Weitere Informationen:

HTML-Tutorial:HTML Tabelle

HTML DOM-Referenzhandbuch:TableRow-Objekt

CSS-Tutorial:Tabellenstil einrichten

Beispiel

Beispiel 1

Eine einfache HTML-Tabelle mit drei Zeilen; eine Überschriftenzeile und zwei Datenzeilen:

<table>
  <tr>
    <th>Monat</th>
    <th>Ersparnisse</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>3400 RMB</td>
  </tr>
  <tr>
    <td>Februar</td>
    <td>4500 RMB</td>
  </tr>
</table>

Probieren Sie es selbst aus

Beispiel 2

Wie ausrichten: <tr> Inhalte (verwenden Sie CSS):

<table style="width:100%">
  <tr>
    <th>Monat</th>
    <th>Ersparnisse</th>
  </tr>
  <tr style="text-align:right">
    <td>Januar</td>
    <td>3400 RMB</td>
  </tr>
</table>

Probieren Sie es selbst aus

Beispiel 3

Wie fügt man eine Hintergrundfarbe zu einer Tabellenzeile hinzu (verwenden Sie CSS):

<table>
  <tr style="background-color:#FF0000">
    <th>Monat</th>
    <th>Ersparnisse</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>3400 RMB</td>
  </tr>
 </table>

Probieren Sie es selbst aus

Beispiel 4

Wie vertikale Ausrichtung: <tr> Inhalte (verwenden Sie CSS):

<table style="height:200px">
  <tr  style="vertical-align:top">
    <th>Monat</th>
    <th>Ersparnisse</th>
  </tr>
  <tr style="vertical-align:bottom">
    <td>Januar</td>
    <td>3400 RMB</td>
  </tr>
</table>

Probieren Sie es selbst aus

Beispiel 5

Wie erstellt man einen Tabellenkopf:

<table>
  <tr>
    <th>Name</th>
    <th>E-Mail</th>
    <th>Telefon</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Probieren Sie es selbst aus

Beispiel 6

Wie erstellt man eine Tabelle mit Überschriften:

<table>
  <caption>Monatliche Ersparnisse</caption>
  <tr>
    <th>Monat</th>
    <th>Ersparnisse</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>3400 RMB</td>
  </tr>
  <tr>
    <td>Februar</td>
    <td>4500 RMB</td>
  </tr>
</table>

Probieren Sie es selbst aus

Beispiel 7

Wie definiert man Zellen von Tabellen, die über mehrere Zeilen oder Spalten reichen:

<table>
  <tr>
    <th>Name</th>
    <th>E-Mail</th>
    <th colspan="2">Telefon</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

Probieren Sie es selbst aus

Globale Attribute

<tr> Der Tag unterstützt auch Globale Attribute in HTML.

Ereignisattribute

<tr> Der Tag unterstützt auch Ereignisattribute in HTML.

Standardmäßige CSS-Einstellungen

Die meisten Browser verwenden folgende Standardwerte zur Anzeige <tr> Element:

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
{}

Browserkompatibilität

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung