<tr>: Das Table Row Element

Dieses Element schließt die globalen Attribute ein.

Die folgenden Attribute sind veraltet und sollten nicht mehr verwendet werden. Sie sind unten für die Aktualisierung bestehenden Codes und aus historischem Interesse dokumentiert.

align Veraltet

Spezifiziert die horizontale Ausrichtung jeder Zellreihe. Die möglichen aufzählbaren Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der Wert char den Textinhalt am Zeichen aus, das im char-Attribut definiert ist, und am Offset, das durch das charoff-Attribut definiert ist. Verwenden Sie die CSS-Eigenschaft text-align, da dieses Attribut veraltet ist.

bgcolor Veraltet

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

char Veraltet

Gibt die Ausrichtung des Inhalts an einem Zeichen jeder Zellreihe 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, um die der Zellreiheninhalt vom Ausrichtungszeichen verschoben wird, das durch das char-Attribut angegeben ist.

valign Veraltet

Gibt die vertikale Ausrichtung jeder Zellreihe an. Die möglichen aufzählbaren Werte sind baseline, bottom, middle und top. Verwenden Sie die CSS-Eigenschaft vertical-align, 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 Eltern-<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> ansonsten keine Kind-<tbody>-Elemente hat und nur, wenn das <tr> nach allen <caption>, <colgroup> und <thead>-Elementen eingefügt wird.
• Die CSS-Pseudoklassen :nth-of-type, :first-of-type und :last-of-type sind oft nützlich, um die gewünschte Menge an Zeilen und deren Daten- und Headerzellen (<td> und <th> Elemente) auszuwählen.
• Wenn ein <tr> als direktes Kind des <table> eingefügt wird, da der Browser ein <tbody> dem Markup hinzufügt, funktionieren CSS-Selektoren wie table > tr möglicherweise nicht wie erwartet oder überhaupt nicht.

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

Dieses Beispiel demonstriert eine Tabelle mit vier Zeilen und drei Spalten, wobei die erste Spalte Header 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 Headerzelle (<th>) und zwei Datenzellen (<td>) - und bildet so drei Spalten. Das scope-Attribut, das auf jede Headerzelle gesetzt ist, gibt an, zu welchen Zellen sie gehören, 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 die background-color dieser Zeilen auf einen etwas dunkleren Ton zu setzen, was einen sogenannten "Zebrastreifen-Effekt" erzeugt. Dieser abwechselnde Hintergrund macht die Zeilen von Daten in der Tabelle einfacher zu analysieren und zu lesen - stellen Sie sich vor, es gibt viele Zeilen und Spalten und Sie versuchen, einige Daten in einer bestimmten Zeile zu finden. Zusätzlich werden die Kopfzellen der Zeilen (<th>-Elemente) mit einem 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, indem eine Kopfzeile als erste Zeile der Tabelle hinzugefügt wird.

HTML

Eine zusätzliche Tabellenzeile (<tr>) wird als erste Zeile der Tabelle mit Spaltenkopfzellen (<th>) hinzugefügt, die einen Kopf für jede Spalte bieten. Wir legen diese Zeile in einem <thead>-Gruppierungselement ab, um anzuzeigen, dass dies der Kopf der Tabelle ist. Das scope-Attribut wird jeder Kopfzelle (<th>) innerhalb dieser Kopfzeile hinzugefügt, um explizit anzugeben, dass jede Kopfzelle 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 fast unverändert gegenüber dem vorherigen Beispiel, mit Ausnahme einiger zusätzlicher Stile, um die "Kopfzeile" hervorzuheben, sodass die Köpfe der Spalten sich von den anderen Zellen abheben.

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

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

Es gibt keine nativen Methoden zum Sortieren der Zeilen (<tr>-Elemente) eines <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 grundlegenden Tabelle verwendet, um den Körperabschnitt der Tabelle zu markieren 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 folgenden JavaScript-Code wird die erstellte sort()-Funktion an das <tbody>-Element angehängt, sodass sie 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 grundlegende Tabelle aus dem vorherigen Beispiel, indem das Sortieren interaktiv und unabhängig für mehrere Spalten gemacht wird.

HTML

Eine zusätzliche Datenzelle (<td>-Element) wird jeder Zeile (<tr>-Element) innerhalb des Tabellenkörpers (<tbody>-Element) hinzugefügt, um eine zweite Spalte mit Buchstaben in aufsteigender Reihenfolge zu erstellen. Mit dem <thead>-Element wird ein Kopfabschnitt vor dem Hauptabschnitt eingefügt, um eine Kopfzeile mit Tabellenkopfzeilen (<th>-Element) einzuführen. Diese Kopfzellen werden im unteren JavaScript-Code verwendet, um sie anklickbar zu machen und die entsprechende Sortierung durchzuführen, wenn sie per Klick aktiviert werden.

<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 jedem Tabellenkopf (<th>-Element) jeder <table> im Dokument hinzugefügt; er sortiert alle Zeilen (<tr>-Elemente) des <tbody> basierend auf dem Inhalt 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: white;
  cursor: pointer;
}

Ergebnis

• Lernen: Grundlagen von HTML-Tabellen
• <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft, um die Hintergrundfarbe jeder Zellreihe festzulegen
• border: CSS-Eigenschaft, um die Ränder 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