<tr>: Das Table-Row-Element

Probieren Sie es aus

<table>
  <caption>
    Alien football stars
  </caption>
  <thead>
    <tr>
      <th scope="col">Player</th>
      <th scope="col">Gloobles</th>
      <th scope="col">Za'taak</th>
    </tr>
  </thead>
  <tbody>
    <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>
  </tbody>
</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 enthält die globalen Attribute.

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie werden hier 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 aufgezählten 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 durch das 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, eingeleitet durch #, 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 an einem 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, um die Zellinhalte der Zeile von dem durch das char-Attribut angegebenen Ausrichtungszeichen zu versetzen.

valign Veraltet

Gibt die vertikale Ausrichtung jeder Zeilenzelle an. Die möglichen aufgezählten 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 untergeordnetes Element eines <thead>, <tbody> oder <tfoot>-Elements gültig.
• Wenn das <tr> als direktes Kind seines übergeordneten <table>-Elements platziert wird, wird das <tbody> als übergeordnetes Element impliziert und Browser fügen das <tbody> dem Markup hinzu.
• Das implizite <tbody>-Element wird nur unterstützt, wenn die <table> anderweitig keine untergeordneten <tbody>-Elemente hat und nur, wenn das <tr> nach allen <caption>, <colgroup> und <thead>-Elementen eingefügt wird.
• Die CSS-Pseudo-Klassen :nth-of-type, :first-of-type und :last-of-type sind oft nützlich, um die gewünschte Reihe von Zeilen und deren Daten- und Headerzellen (<td> und <th> Elemente) auszuwählen.
• Wenn ein <tr> als direktes Kind der <table> enthalten ist, da der Browser ein <tbody> dem Markup hinzufügt, funktionieren CSS-Selektoren wie table > tr möglicherweise nicht wie erwartet oder überhaupt nicht.

Beispiele

Siehe <table>, um ein vollständiges Tabellenbeispiel mit allgemeinen Standards und Best Practices zu erhalten.

Grundlegende Zeileneinrichtung

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>), womit drei Spalten erstellt werden. Das scope-Attribut, das auf jeder Headerzelle festgelegt ist, gibt an, auf welche Zellen sie sich beziehen, in diesem Beispiel 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-Pseudo-Klasse 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 wechselnde Hintergrund macht die Datenzeilen in der Tabelle einfacher zu analysieren und zu lesen - man stelle sich vor, es gäbe viele Zeilen und Spalten und man versuche, einige Daten in einer bestimmten Zeile zu finden. Zusätzlich werden die Zeilenkopfzellen (<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

Kopfzeile

Dieses Beispiel erweitert die Basistabelle 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, um jeder Spalte einen Header zu geben. Wir platzieren diese Zeile in einem <thead>-Gruppierungselement, um anzuzeigen, dass dies der Kopf der Tabelle ist. Das scope-Attribut wird jeder Headerzelle (<th>) innerhalb dieser Kopfzeile hinzugefügt, um explizit anzugeben, dass sich jede Headerzelle 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 zum vorherigen Beispiel, abgesehen von einigen zusätzlichen Stilen, um die "Kopfzeile" hervorzuheben, sodass die Header der Spalten von den anderen Zellen auffallen.

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) 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 Basistabelle verwendet, um den Tabellenkörperschnitt zu markieren und drei Zeilen (<tr>-Elemente) mit Daten (<td>-Elemente) einzuschließen, 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 dem <tbody>-Element zugeordnet, sodass sie die Tabellenzellen in aufsteigender Reihenfolge nach Wert 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 sortieren mit einem Klick auf Headerzellen

Dieses Beispiel erweitert die Basistabelle 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 Kopfbereich vor dem Körperbereich eingeführt, um eine Kopfzeile mit Tabellenkopfzellen (<th>-Element) einzuführen. Diese Kopfzellen werden im folgenden JavaScript-Code verwendet, um sie klickbar zu machen und die entsprechende Sortierung bei jedem 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 Klickereignishandler wird jedem Tabellenkopf (<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: white;
  cursor: pointer;
}

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• 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 Zeilenzelle festzulegen
• border: CSS-Eigenschaft zur Steuerung der Grenzen von Zeilenzellen
• 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-Pseudo-Klassen, um die gewünschten Zeilenzellen auszuwählen