<tr>: Das Table Row-Element

Dieses Element enthält die globalen Attribute.

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

align Veraltet

Gibt die horizontale Ausrichtung jeder Zellreihe an. Die möglichen enumerierten Werte sind left, center, right, justify und char. Wenn es unterstützt wird, richtet der Wert char den textuellen Inhalt am Zeichen aus, das im char-Attribut definiert ist, und am Offset, das durch das charoff-Attribut definiert ist. 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 durch ein # vorangestellt ist, oder ein Farb-Keyword. 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 zu einem Zeichen jeder Zellreihe an. Typische Werte dafür sind ein Punkt (.), wenn Sie versuchen, Zahlen oder Geldbeträge auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Gibt die Anzahl der Zeichen an, die der Zellreiheninhalt vom Ausrichtungszeichen aus, das durch das char-Attribut spezifiziert wird, versetzt werden soll.

valign Veraltet

Gibt die vertikale Ausrichtung jeder Zellreihe 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.

• Das <tr>-Element ist nur als Kindelement eines <thead>, <tbody> oder <tfoot>-Elements gültig.
• Wenn das <tr>-Element als direktes Kindelement seines übergeordneten <table>-Elements platziert ist, wird das <tbody>-Elternteil implizit angenommen, und Browser fügen das <tbody> dem Markup hinzu.
• Das implizierte <tbody>-Elternteil wird nur unterstützt, wenn die <table>-Element sonst keine Kindelemente <tbody> aufweist und nur, wenn <tr> nach allen <caption>, <colgroup> und <thead>-Elementen aufgenommen wird.
• Die CSS-Pseudoklassen :nth-of-type, :first-of-type und :last-of-type sind oft nützlich, um die gewünschten Sätze von Zeilen sowie deren Daten- und Headerzellen (<td> und <th>-Elemente) auszuwählen.
• Wenn ein <tr> direkt als Kindelement der <table> aufgenommen wird, wie es der Browser dem Markup ein <tbody> hinzufügt, funktionieren CSS-Selektoren wie table > tr möglicherweise nicht wie erwartet oder überhaupt nicht.

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

Dieses Beispiel demonstriert eine Tabelle mit vier Zeilen und drei Spalten, wobei die erste Spalte Header für die Zeilen-Datenzellen 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 erstellt so drei Spalten. Das scope-Attribut, das in jeder Headerzelle 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 odd-Zeile auszuwählen und den background-color dieser Zeilen auf einen leicht dunkleren Ton zu setzen, wodurch ein sogenannter "Zebra"-Streifeneffekt entsteht. Diese abwechselnden Hintergründe erleichtern das Parsen und Lesen der Datenreihen der Tabelle — stellen Sie sich vor, Sie hätten viele Zeilen und Spalten und versuchen, bestimmte Daten in einer bestimmten Zeile zu finden. Darüber hinaus sind die Zeilen-Headerzellen (<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 einfache Tabelle 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 hinzugefügt, mit Spalten-Header-Zellen (<th>), die einen Header für jede Spalte bereitstellen. Wir platzieren diese Zeile in einem <thead>-Gruppierungselement, um anzuzeigen, dass dies der Header der Tabelle ist. Das scope-Attribut wird jeder Headerzelle (<th>) innerhalb dieser Kopfzeile hinzugefügt, um ausdrücklich anzugeben, dass jede Headerzelle sich auf alle Zellen innerhalb ihrer eigenen Spalte bezieht, auch wenn sich diese Zellen 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 gegenüber dem vorherigen Beispiel, mit Ausnahme einiger zusätzlicher Stile, um die "Header-Zeile" hervorzuheben, sodass 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 mithilfe 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 Basistabelle verwendet, um den Hauptbereich der Tabelle zu markieren und 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 ist die erstellte sort()-Funktion an das <tbody>-Element gekoppelt, damit die Tabellenspalten in der Reihenfolge steigender Werte sortiert und die Anzeige dementsprechend aktualisiert wird.

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 einfache 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. Mithilfe des <thead>-Elements wird ein Kopfbereich vor dem Hauptbereich hinzugefügt, um eine Kopfzeile mit Tabellenheaderzellen (<th>-Element) vorzustellen. Diese Headerzellen werden im unten stehenden JavaScript-Code verwendet, um sie anklickbar zu machen und dann das entsprechende Sortieren beim Aktivieren pro Klick auszufü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 an jeden Tabellenheader (<th>-Element) jeder <table> im document hinzugefügt; es 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: #fff;
  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 Umrandungen der Zellreihen zu steuern
• text-align: CSS-Eigenschaft, um den Inhalt jeder Zellreihe horizontal zu alignieren
• vertical-align: CSS-Eigenschaft, um den Inhalt jeder Zellreihe vertikal zu alignieren
• :nth-of-type, :first-of-type, :last-of-type: CSS-Pseudoklassen, um die gewünschten Zellreihen auszuwählen