<tr>: Das Tabellenergebnis-Element

Dieses Element umfasst die globalen Attribute.

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie werden hier dokumentiert, um beim Aktualisieren vorhandenen Codes als Referenz und aus historischem Interesse zu dienen.

align Veraltet

Gibt die horizontale Ausrichtung jeder Zellreihe an. Die möglichen aufgezählten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char-Wert den Textinhalt am Zeichen aus, das im char-Attribut definiert ist, und an 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 Zellreihe. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger hexadezimaler RGB-Code, der mit einem # versehen ist, oder ein Farbkeyword. Andere <color> CSS-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 an ein Zeichen jeder Zellreihe an. Typische Werte hierfür sind ein Punkt (.) bei dem Versuch, Zahlen oder Geldbeträge auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Gibt die Anzahl der Zeichen an, um die der Zellinhalt vom Ausrichtungszeichen versetzt wird, das im char-Attribut angegeben ist.

valign Veraltet

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

• 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> Element impliziert und Browser fügen das <tbody> in das Markup ein.
• Das implizierte <tbody> Element wird nur unterstützt, wenn die <table> ansonsten keine untergeordneten <tbody> Elemente hat und nur, wenn das <tr> nach etwaigen <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 an Reihen und ihren Daten- und Kopfzellen (<td> und <th>-Elemente) auszuwählen.
• Wenn ein <tr> als direktes Kind der <table> enthalten ist, da der Browser ein <tbody> zum Markup hinzufügt, funktionieren CSS-Selektoren wie table > tr möglicherweise nicht wie erwartet oder überhaupt nicht.

Siehe <table> für ein vollständiges Tabellenbeispiel mit gängigen Standards und Best Practices.

Dieses Beispiel zeigt eine Tabelle mit vier Zeilen und drei Spalten, wobei die erste Spalte Kopfzeilen für die Datenzellen der Zeilen 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>) - wodurch drei Spalten entstehen. Das scope-Attribut, das auf jeder Kopfzelle gesetzt ist, gibt an, auf welche Zellen sie sich beziehen. In diesem Beispiel sind es 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 Reihen auszuwählen und die background-color dieser Reihen auf einen leicht dunkleren Ton festzulegen, was einen sogenannten "Zebra-Streifen"-Effekt erzeugt. Dieser abwechselnde Hintergrund erleichtert das Parsen und Lesen der Datenreihen in der Tabelle - stellen Sie sich vor, Sie haben viele Zeilen und Spalten und versuchen, einige Daten in einer bestimmten Reihe zu finden. Zusätzlich werden die Zeilenkopfzellen (<th>-Elemente) mit einer background-color hervorgehoben, um sie von den Datenzellen (<td>-Elementen) 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 grundlegende Tabelle aus dem vorherigen Beispiel durch Hinzufügen einer Kopfzeile als erste Zeile der Tabelle.

HTML

Es wird eine zusätzliche Tabellenzeile (<tr>) als erste Zeile der Tabelle hinzugefügt, wobei Spaltenkopfzellen (<th>) für jede Spalte eine Überschrift bereitstellen. Wir platzieren diese Zeile in einem <thead>-Gruppenelement, um anzuzeigen, dass dies die Kopfzeile der Tabelle ist. Das scope-Attribut wird jeder Kopfzelle (<th>) innerhalb dieser Kopfzeile hinzugefügt, um explizit anzugeben, dass sich jede Kopfzelle auf alle Zellen in 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, abgesehen von einigen zusätzlichen Stilen zur Hervorhebung der "Kopfzeile", damit 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, um die Zeilen (<tr> Elemente) einer <table> zu sortieren. Aber mit Array.prototype.sort(), Node.removeChild und Node.appendChild kann in JavaScript eine benutzerdefinierte sort() Funktion implementiert werden, um eine HTMLCollection von <tr> Elementen zu sortieren.

HTML

Ein <tbody>-Element wird in dieser Grundtabelle verwendet, um den Hauptteil der Tabelle zu kennzeichnen und um drei Zeilen (<tr>-Elemente) mit Daten (<td>-Elemente) einzuschließen, wodurch eine Spalte mit Zahlen in absteigender Reihenfolge erstellt wird.

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

JavaScript

Im unten stehenden JavaScript-Code wird die erstellte sort()-Funktion dem <tbody>-Element zugeordnet, damit sie die Tabellenzellen in aufsteigender Reihenfolge der Werte 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 Grundtabelle aus dem vorherigen Beispiel durch die Möglichkeit, die Sortierung interaktiv und unabhängig für mehrere Spalten vorzunehmen.

HTML

Eine zusätzliche Datenzelle (<td> Element) wird jeder Zeile (<tr> Element) im Tabellenkörper (<tbody> Element) hinzugefügt, um eine zweite Spalte mit Buchstaben in aufsteigender Reihenfolge zu erstellen. Mit dem <thead>-Element wird ein Kopfteil vor dem Hauptteil hinzugefügt, um eine Kopfzeile mit Tabellenkopfzellen (<th> Element) einzuführen. Diese Kopfzellen werden im unten stehenden JavaScript-Code verwendet, um sie anklickbar zu machen und dann die entsprechende Sortierung bei Aktivierung durch 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 Klickereignishandler wird jedem Tabellenkopf (<th> Element) jeder <table> im Dokument 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: Grundlagen von HTML-Tabellen
• <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>: Andere mit Tabellen zusammenhängende Elemente
• background-color: CSS-Eigenschaft, um die Hintergrundfarbe jeder Zellreihe festzulegen
• border: CSS-Eigenschaft, um die Rahmen der Zellreihen zu steuern
• text-align: CSS-Eigenschaft, um den Inhalt jeder Zellreihe horizontal auszurichten
• vertical-align: CSS-Eigenschaft, um den Inhalt jeder Zellreihe vertikal auszurichten
• :nth-of-type, :first-of-type, :last-of-type: CSS-Pseudoklassen, um die gewünschten Zellreihen auszuwählen