HTML <tr>-Tag
Der HTML <tr>-Tag definiert eine Zeile in einer Tabelle mit <th>- und <td>-Zellen. Attribute und CSS-Styling mit Beispielen.
Der HTML-Tag <tr> definiert eine Zeile in einer Tabelle. Er ist ein Container: Ein <tr> enthält die Zellen dieser Zeile, wobei jede Zelle mit <th> (eine Kopfzelle) oder <td> (eine normale Datenzelle) geschrieben wird. Eine Tabelle wird durch das Stapeln von <tr>-Zeilen aufgebaut, und der Browser ordnet die Zellen jeder Zeile in Spalten an.
Diese Seite behandelt, was <tr> leistet, wo es in einer Tabelle steht, seine Attribute (und warum die alten verschwunden sind) und wie Zeilen mit CSS gestaltet werden.
<tr> muss innerhalb eines <table>-Elements platziert werden — entweder direkt oder innerhalb eines der Zeilengruppen-Elemente <thead>, <tbody> oder <tfoot>. Ein <tr> darf nur <td>- und <th>-Zellen enthalten.
Jede Zeile kann eine unterschiedliche Anzahl von Zellen enthalten. Der Browser rendert genau die Zellen, die Sie schreiben; er füllt eine kurze Zeile nicht automatisch mit leeren Zellen auf. Um eine Zelle leer zu lassen, fügen Sie ein leeres <td> oder <th> hinzu.
Hinweis:
<tr>selbst überspannt niemals Spalten oder Zeilen. Die Attributecolspanundrowspan, die Zellen über Spalten oder Zeilen hinweg zusammenführen, befinden sich auf den Zellen, nicht auf der Zeile — siehe<td>und<th>.
Um das Aussehen von Zeilen und Tabellen (Farben, Rahmen, Ausrichtung) zu steuern, verwenden Sie CSS-Tabelleneigenschaften anstelle von HTML-Attributen.
Syntax
Der <tr>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<tr>) und dem schließenden (</tr>) Tag geschrieben.
Syntax des HTML-Tags <tr>
<table>
<tr>
<td>...</td>
</tr>
</table>Beispiel des HTML-Tags <tr>:
Beispiel des HTML-Tags <tr>
<!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>Das erste <tr> enthält zwei <th>-Kopfzellen; jedes folgende <tr> enthält zwei <td>-Datenzellen. Da jede Zeile die gleiche Anzahl von Zellen hat, richten sie sich ordentlich in zwei Spalten aus.
Zeilen gruppieren mit <thead>, <tbody> und <tfoot>
Für alles, was über eine triviale Tabelle hinausgeht, sollten Sie Ihre Zeilen gruppieren. Die Kopfzeilen kommen in <thead>, die Inhaltszeilen in <tbody> und eventuelle Zusammenfassungs-/Fußzeilen in <tfoot>. Die <tr>-Zeilen befinden sich innerhalb dieser Gruppen. Dies macht das Markup übersichtlicher, ermöglicht es assistiven Technologien, die Tabelle korrekt anzukündigen, und bietet saubere Anknüpfungspunkte für CSS.
<!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;
}
tfoot {
font-weight: bold;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Coffee</td>
<td>$3</td>
</tr>
<tr>
<td>Tea</td>
<td>$2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$5</td>
</tr>
</tfoot>
</table>
</body>
</html>Attribute
Der <tr>-Tag hat keine eigenen Attribute. Er unterstützt nur die standardmäßigen Global Attributes (wie class, id, style) und die Event Attributes.
Die unten aufgeführten präsentationsbezogenen Attribute waren in älterem HTML verfügbar, sind aber in HTML5 veraltet. Verwenden Sie stattdessen CSS.
| Veraltetes Attribut | Was es bewirkte | CSS-Ersatz |
|---|---|---|
align | Horizontale Ausrichtung des Zellinhalts | text-align: left / center / right; |
valign | Vertikale Ausrichtung des Zellinhalts | vertical-align: top / middle / bottom; |
bgcolor | Hintergrundfarbe der Zeile | background-color: …; |
bordercolor | Rahmenfarbe | border-color: …; |
char / charoff | Inhalt an einem Zeichen ausrichten | Kein CSS-Äquivalent (selten benötigt) |
Verwenden Sie align, valign, bgcolor, bordercolor, char oder charoff nicht auf <tr>. Browser können sie ignorieren, und sie sind ungültiges HTML5. Verwenden Sie stattdessen text-align, vertical-align und background-color in CSS.
So gestalten Sie einen HTML-<tr>-Tag
Gestalten Sie Zeilen mit CSS, indem Sie das <tr>-Element ansprechen. Ein verbreitetes Muster ist das Zebra-Striping — das Schattieren abwechselnder Zeilen, damit lange Tabellen leichter lesbar sind. Der Selektor tr:nth-child(even) trifft jede zweite Zeile:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
th,
td {
padding: 10px;
text-align: left;
border: 1px solid #ccc;
}
thead tr {
background-color: #333;
color: #fff;
}
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
tbody tr:hover {
background-color: #e0f0ff;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>Designer</td>
</tr>
<tr>
<td>Bob</td>
<td>Developer</td>
</tr>
<tr>
<td>Carol</td>
<td>Manager</td>
</tr>
<tr>
<td>Dave</td>
<td>Tester</td>
</tr>
</tbody>
</table>
</body>
</html>Hier färbt thead tr die Kopfzeile, tbody tr:nth-child(even) schattiert die 2. und 4. Inhaltszeile, und tbody tr:hover hebt die Zeile hervor, über der sich der Mauszeiger befindet.