<tr>: Das Table Row-Element

Probieren Sie es aus

<table>
  <caption>
    Alien football stars
  </caption>
  <tr>
    <th scope="col">Player</th>
    <th scope="col">Gloobles</th>
    <th scope="col">Za'taak</th>
  </tr>
  <tr>
    <th scope="row">TR-7</th>
    <td>7</td>
    <td>4,569</td>
  </tr>
  <tr>
    <th scope="row">Khiresh Odo</th>
    <td>7</td>
    <td>7,223</td>
  </tr>
  <tr>
    <th scope="row">Mia Oolong</th>
    <td>9</td>
    <td>6,219</td>
  </tr>
</table>

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

th[scope="col"] {
  background-color: #505050;
  color: white;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

td {
  text-align: center;
}

tr:nth-of-type(even) {
  background-color: #eeeeee;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

Attribute

Dieses Element beinhaltet die globalen Attribute.

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht mehr verwendet werden. Sie sind nur zu Referenzzwecken dokumentiert, um bestehende Codes zu aktualisieren und aus historischem Interesse.

align Veraltet

Gibt die horizontale Ausrichtung jeder Zeilenzelle an. Die möglichen enumerierten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der Wert char den Textinhalt auf dem Zeichen aus, das im char-Attribut definiert ist, und auf dem im charoff-Attribut definierten Versatz. Verwenden Sie stattdessen die text-align CSS-Eigenschaft, da dieses Attribut veraltet ist.

bgcolor Veraltet

Definiert die Hintergrundfarbe jeder Zeilenzelle. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger hexadezimaler RGB-Code, mit einem # versehen, oder ein Farb-Schlüsselwort. Andere CSS <color> Werte werden nicht unterstützt. Verwenden Sie stattdessen die background-color CSS-Eigenschaft, da dieses Attribut veraltet ist.

char Veraltet

Gibt die Ausrichtung des Inhalts auf ein Zeichen jeder Zeilenzelle an. Typische Werte hierfür sind ein Punkt (.), wenn versucht wird, Zahlen oder Geldwerte auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Gibt die Anzahl der Zeichen an, mit denen der Zeilenzelleninhalt vom im char-Attribut angegebenen Ausrichtungszeichen versetzt werden soll.

valign Veraltet

Gibt die vertikale Ausrichtung jeder Zeilenzelle an. Die möglichen enumerierten Werte sind baseline, bottom, middle und top. Verwenden Sie stattdessen die vertical-align CSS-Eigenschaft, da dieses Attribut veraltet ist.

Verwendungshinweise

• Das <tr>-Element ist nur als Kind eines <thead>, <tbody> oder <tfoot>-Elements gültig.
• Wenn das <tr> als direktes Kind seines übergeordneten <table>-Elements platziert wird, wird das <tbody> impliziert und Browser fügen das <tbody> dem Markup hinzu.
• Das implizierte <tbody>-Element wird nur unterstützt, wenn die <table> ansonsten keine untergeordneten <tbody>-Elemente hat und nur, wenn das <tr> nach allen <caption>, <colgroup> und <thead>-Elementen enthalten ist.
• Die CSS-Pseudoklassen :nth-of-type, :first-of-type und :last-of-type sind oft nützlich, um die gewünschte Menge von Zeilen und deren Daten- und Headerzellen (<td> und <th>-Elemente) auszuwählen.
• Wenn ein <tr> als direktes Kind der <table> eingefügt wird, funktioniert der CSS-Selektor table > tr möglicherweise nicht wie erwartet oder überhaupt nicht, da der Browser ein <tbody> zum Markup hinzufügt.

Beispiele

Siehe <table> für ein vollständiges Tabellenbeispiel, das gängige Standards und bewährte Verfahren einführt.

Grundlegende Zeilenkonfiguration

Dieses Beispiel zeigt eine Tabelle mit vier Zeilen und drei Spalten, wobei die erste Spalte Header für die Datenzeilen-Zellen enthält.

HTML

Vier <tr>-Elemente werden verwendet, um vier Tabellenzeilen zu erstellen. Jede Zeile enthält drei Zellen - eine Headerzelle (<th>) und zwei Datenzellen (<td>) - und bildet damit drei Spalten. Das scope-Attribut, das auf jeder Headerzelle gesetzt ist, gibt an, zu welchen Zellen sie gehören. In diesem Beispiel sind das alle Datenzellen innerhalb der row.

<table>
  <tbody>
    <tr>
      <th scope="row">A</th>
      <td>Alfa</td>
      <td>AL fah</td>
    </tr>
    <tr>
      <th scope="row">B</th>
      <td>Bravo</td>
      <td>BRAH voh</td>
    </tr>
    <tr>
      <th scope="row">C</th>
      <td>Charlie</td>
      <td>CHAR lee</td>
    </tr>
    <tr>
      <th scope="row">D</th>
      <td>Delta</td>
      <td>DELL tah</td>
    </tr>
  </tbody>
</table>

CSS

Die CSS-:nth-of-type-Pseudoklasse wird verwendet, um jede ungerade Zeile auszuwählen und die background-color dieser Zeilen auf einen etwas dunkleren Ton zu setzen, um einen sogenannten "Zebra-Streifen"-Effekt zu erzeugen. Diese abwechselnde Hintergrundfarbe erleichtert das Durchsuchen und Lesen der Datenreihen in der Tabelle – stellen Sie sich vor, Sie hätten viele Zeilen und Spalten und müssten Daten in einer bestimmten Zeile finden. Darüber hinaus sind die Zeilen-Headerzellen (<th>-Elemente) mit einer background-color hervorgehoben, um sie von den Datenzellen (<td>-Elemente) zu unterscheiden.

tr:nth-of-type(odd) {
  background-color: #eeeeee;
}

tr th[scope="row"] {
  background-color: #d6ecd4;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

Ergebnis

Headerzeile

Dieses Beispiel erweitert die Grundtabelle aus dem vorherigen Beispiel, indem eine Headerzeile als erste Zeile der Tabelle hinzugefügt wird.

HTML

Eine zusätzliche Tabellenzeile (<tr>) wird als erste Zeile der Tabelle mit Spalten-Headerzellen (<th>) hinzugefügt, die einen Header für jede Spalte bieten. Wir setzen diese Zeile in ein <thead>-Gruppierungselement, um anzuzeigen, dass dies der Header der Tabelle ist. Das scope-Attribut wird zu jeder Headerzelle (<th>) innerhalb dieser Kopfzeile hinzugefügt, um explizit anzugeben, dass jede Headerzelle sich auf alle Zellen innerhalb ihrer eigenen Spalte bezieht, auch wenn diese Zellen im <tbody> sind.

<table>
  <thead>
    <tr>
      <th scope="col">Symbol</th>
      <th scope="col">Code word</th>
      <th scope="col">Pronunciation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">A</th>
      <td>Alfa</td>
      <td>AL fah</td>
    </tr>
    <tr>
      <th scope="row">B</th>
      <td>Bravo</td>
      <td>BRAH voh</td>
    </tr>
    <tr>
      <th scope="row">C</th>
      <td>Charlie</td>
      <td>CHAR lee</td>
    </tr>
    <tr>
      <th scope="row">D</th>
      <td>Delta</td>
      <td>DELL tah</td>
    </tr>
  </tbody>
</table>

CSS

Das CSS ist nahezu unverändert gegenüber dem vorherigen Beispiel, außer für einige zusätzliche Stiländerungen, um die "Headerzeile" hervorzuheben, sodass die Header der Spalten sich von den anderen Zellen abheben.

tr:nth-of-type(odd) {
  background-color: #eeeeee;
}

tr th[scope="col"] {
  background-color: #505050;
  color: white;
}

tr th[scope="row"] {
  background-color: #d6ecd4;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

Ergebnis

Zeilen sortieren

Es gibt keine nativen Methoden zum Sortieren der Zeilen (<tr>-Elemente) einer <table>. Aber durch die Verwendung von Array.prototype.sort(), Node.removeChild und Node.appendChild kann eine benutzerdefinierte sort()-Funktion in JavaScript implementiert werden, um eine HTMLCollection von <tr>-Elementen zu sortieren.

HTML

Ein <tbody>-Element wird in dieser Grundtabelle verwendet, um den Tabellenkörperabschnitt zu kennzeichnen und um drei Zeilen (<tr>-Elemente) mit Daten (<td>-Elemente) einzuschließen, wodurch eine Spalte mit absteigenden Zahlen entsteht.

<table>
  <tbody>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
    </tr>
  </tbody>
</table>

JavaScript

Im folgenden JavaScript-Code wird die erstellte sort()-Funktion an das <tbody>-Element angehängt, sodass es die Tabellenzellen in aufsteigender Reihenfolge sortiert und die Anzeige entsprechend aktualisiert.

HTMLTableSectionElement.prototype.sort = function (cb) {
  Array.from(this.rows)
    .sort(cb)
    .forEach((e) => this.appendChild(this.removeChild(e)));
};

document
  .querySelector("table")
  .tBodies[0].sort((a, b) => a.textContent.localeCompare(b.textContent));

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

td {
  border: 1px solid rgb(160 160 160);
  padding: 4px 8px;
}

Ergebnis

Zeilen mit einem Klick auf Headerzellen sortieren

Dieses Beispiel erweitert die Grundtabelle aus dem vorherigen Beispiel, indem das Sortieren interaktiv und unabhängig für mehrere Spalten gestaltet wird.

HTML

Eine zusätzliche Datenzelle (<td>-Element) wird zu jeder Zeile (<tr>-Element) im Tabellenkörper (<tbody>-Element) hinzugefügt, um eine zweite Spalte mit Buchstaben in aufsteigender Reihenfolge zu erstellen. Mithilfe des <thead>-Elements wird ein Kopfabschnitt vor dem Körperabschnitt hinzugefügt, um eine Kopfzeile mit Tabellen-Headerzellen (<th>-Element) einzuführen. Diese Headerzellen werden im folgenden JavaScript-Code verwendet, um sie klickbar zu machen und dann die entsprechende Sortierung beim Aktivieren per Klick durchzuführen.

<table>
  <thead>
    <tr>
      <th>Numbers</th>
      <th>Letters</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3</td>
      <td>A</td>
    </tr>
    <tr>
      <td>2</td>
      <td>B</td>
    </tr>
    <tr>
      <td>1</td>
      <td>C</td>
    </tr>
  </tbody>
</table>

JavaScript

Ein Klick-Ereignishandler wird zu jeder Tabellenkopfzeile (<th>-Element) jeder <table> im document hinzugefügt; er sortiert alle Zeilen (<tr>-Elemente) der <tbody> basierend auf dem Inhalt der in den Zeilen enthaltenen Datenzellen (<td>-Elemente).

const allTables = document.querySelectorAll("table");

for (const table of allTables) {
  const tBody = table.tBodies[0];
  const rows = Array.from(tBody.rows);
  const headerCells = table.tHead.rows[0].cells;

  for (const th of headerCells) {
    const cellIndex = th.cellIndex;

    th.addEventListener("click", () => {
      rows.sort((tr1, tr2) => {
        const tr1Text = tr1.cells[cellIndex].textContent;
        const tr2Text = tr2.cells[cellIndex].textContent;
        return tr1Text.localeCompare(tr2Text);
      });

      tBody.append(...rows);
    });
  }
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 4px 8px;
}

th {
  background-color: #505050;
  color: white;
  cursor: pointer;
}

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Lernen: HTML-Tabellen-Grundlagen
• <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft, um die Hintergrundfarbe jeder Zeilenzelle festzulegen
• border: CSS-Eigenschaft, um die Ränder von Zeilenzellen zu steuern
• text-align: CSS-Eigenschaft, um den Inhalt jeder Zeilenzelle horizontal auszurichten
• vertical-align: CSS-Eigenschaft, um den Inhalt jeder Zeilenzelle vertikal auszurichten
• :nth-of-type, :first-of-type, :last-of-type: CSS-Pseudoklassen, um die gewünschten Zeilenzellen auszuwählen