<tr>: Das Table Row Element

Dieses Element enthält die globalen Attribute.

Die folgenden Attribute sind veraltet und sollten nicht mehr verwendet werden. Sie sind hier nur zur Referenz beim Aktualisieren bestehenden Codes und aus historischem Interesse dokumentiert.

align Veraltet

Gibt die horizontale Ausrichtung jeder Zeilenzelle an. Die möglichen aufgezählten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char-Wert den Textinhalt an dem durch das char-Attribut definierten Zeichen und dem durch das charoff-Attribut definierten Offset aus. Verwenden Sie die text-align CSS-Eigenschaft stattdessen, 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, der mit einem # prefixiert ist, oder ein Farbname. Andere CSS <color> Werte werden nicht unterstützt. Verwenden Sie die background-color CSS-Eigenschaft stattdessen, da dieses Attribut veraltet ist.

char Veraltet

Gibt die Ausrichtung des Inhalts an einem Zeichen jeder Zeilenzelle an. Typische Werte hierfür umfassen einen Punkt (.) beim Versuch, Zahlen oder Geldwerte auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Gibt die Anzahl der Zeichen an, um die der Inhalt der Zeilenzelle vom Ausrichtungszeichen, das durch das char-Attribut festgelegt wurde, verschoben wird.

valign Veraltet

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

• Das <tr> Element ist nur als Kindelement eines <thead>, <tbody> oder <tfoot> Elements gültig.
• Wenn das <tr> als direktes Kindelement seines übergeordneten <table> Elements platziert wird, wird der <tbody>-Elternteil impliziert und Browser fügen das <tbody> dem Markup hinzu.
• Der implizierte <tbody>-Elternteil wird nur unterstützt, wenn die <table> sonst keine Kindelemente <tbody> 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 den gewünschten Satz von Zeilen und deren Daten- und Kopfzellen (<td> und <th> Elemente) auszuwählen.
• Wenn ein <tr> als direktes Kindelement des <table> enthalten ist, da der Browser ein <tbody> zum Markup hinzufügt, funktionieren CSS-Selektoren wie table > tr möglicherweise nicht wie erwartet oder gar nicht.

Sehen Sie <table> für ein vollständiges Tabellenbeispiel, das gängige Standards und Best Practices einführt.

Dieses Beispiel zeigt eine Tabelle mit vier Zeilen und drei Spalten, wobei die erste Spalte Kopfzeilen für die Zeilendatenzellen enthält.

HTML

Vier <tr>-Elemente werden verwendet, um vier Tabellenzeilen zu erstellen. Jede Zeile enthält drei Zellen - eine Kopfzelle (<th>) und zwei Datenzellen (<td>) - und schafft so drei Spalten. Das scope Attribut, das auf jeder Kopfzelle gesetzt ist, gibt an, auf welche Zellen sie sich beziehen, was in diesem Beispiel alle Datenzellen innerhalb der row sind.

<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 deren background-color auf einen etwas dunkleren Ton zu setzen, wodurch ein sogenannter "Zebra-Streifen"-Effekt entsteht. Dieser wechselnde Hintergrund macht die Datenzeilen in der Tabelle leichter zu verstehen und zu lesen - stellen Sie sich vor, Sie haben viele Zeilen und Spalten und versuchen, einige Daten in einer bestimmten Zeile zu finden. Darüber hinaus sind die Kopfzeilenzellen (<th> Elemente) mit einer background-color hervorgehoben, um sie von den Datenzellen (<td> Elemente) zu unterscheiden.

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

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

Dieses Beispiel erweitert die Basistabelle aus dem vorherigen Beispiel durch Hinzufügen einer Kopfzeile als erste Zeile der Tabelle.

HTML

Eine zusätzliche Tabellenzeile (<tr>) wird als erste Zeile der Tabelle mit Spaltenkopfzellen (<th>) hinzugefügt, die eine Kopfzeile für jede Spalte bereitstellen. Wir setzen diese Zeile in ein <thead> Gruppierungs-Element, um anzuzeigen, dass dies die Kopfzeile der Tabelle ist. Das scope Attribut wird zu jeder Kopfzelle (<th>) in dieser Kopfzeile hinzugefügt, um explizit anzugeben, dass jede Kopfzelle sich auf alle Zellen innerhalb ihrer eigenen Spalte bezieht, obwohl diese Zellen sich im <tbody> befinden.

<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 fast unverändert vom vorherigen Beispiel, mit Ausnahme einiger zusätzlicher Stile, um die "Kopfzeile" hervorzuheben, so dass die Kopfzeilen der Spalten sich von den anderen Zellen abheben.

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

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

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

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

HTML

Ein <tbody>-Element wird in dieser Basistabelle verwendet, um den Körperabschnitt der Tabelle zu markieren und um drei Zeilen (<tr>-Elemente) mit Daten (<td>-Elemente) einzufügen, die eine Spalte mit Zahlen in absteigender Reihenfolge erstellen.

<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 auf das <tbody>-Element angewendet, 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

Dieses Beispiel erweitert die Basistabelle aus dem vorherigen Beispiel, indem es das Sortieren interaktiv und unabhängig für mehrere Spalten macht.

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. Unter Verwendung des <thead>-Elements wird ein Kopfabschnitt vor dem Körperabschnitt hinzugefügt, um eine Kopfzeile mit Tabellenkopfzellen (<th>-Element) einzuführen. Diese Kopfzellen werden im folgenden JavaScript-Code verwendet, um sie anklickbar zu machen und dann das entsprechende Sortieren bei Aktivierung 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-Event-Handler wird zu jeder Tabellenkopfzeile (<th>-Element) jeder <table> im document hinzugefügt; er sortiert alle Zeilen (<tr>-Elemente) des <tbody> basierend auf den Inhalten der Datenzellen (<td>-Elemente), die in den Zeilen enthalten sind.

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: #fff;
  cursor: pointer;
}

Ergebnis

• Lernen: HTML Tabellen
• <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 der 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