<tr>: Das Table Row-Element

Dieses Element umfasst die globalen Attribute.

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

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 in (char) definierten Zeichen und dem durch charoff definierten Offset aus. 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, mit # vorangestellt, oder ein Farb-Schlüsselwort. Andere CSS <color> Werte werden nicht unterstützt. Verwenden Sie die background-color CSS-Eigenschaft anstelle dieses veralteten Attributs.

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 Geldbeträge auszurichten. Wird align nicht auf char gesetzt, wird dieses Attribut ignoriert.

charoff Veraltet

Gibt die Anzahl an Zeichen an, um die der Zeilenzelleninhalt vom durch char Attribut angegebenen Ausrichtungszeichen versetzt 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 anstelle dieses veralteten Attributs.

• Das <tr> Element ist nur als Kind eines <thead>, <tbody> oder <tfoot> Elements gültig.
• Wenn das <tr> Element als direktes Kind des übergeordneten <table> Elements platziert wird, wird das <tbody> Element impliziert und Browser fügen das <tbody> dem Markup hinzu.
• Das implizierte <tbody> Element wird nur unterstützt, wenn das <table> Element ansonsten keine Kinder <tbody> Elemente hat und nur, wenn das <tr> Element 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 die gewünschte Menge von Zeilen und deren Daten- und Kopfzellen (<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 gar nicht.

Siehe <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 Datenzellenzeilen 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 bildet 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 in der Zeile 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 in einen etwas dunkleren Ton zu ändern, was einen sogenannten "Zebra-Streifen"-Effekt erzeugt. Dieser abwechselnde Hintergrund erleichtert das Durchforsten und Lesen der Zeilen von Daten in der Tabelle – stellen Sie sich vor, es gäbe viele Zeilen und Spalten und Sie müssten bestimmte Daten in einer bestimmten Zeile finden. Zudem werden die Reihen-Kopfzellen (<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 das 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 einen Header für jede Spalte bereitstellen. Wir fügen diese Zeile in ein <thead> Gruppierungselement ein, um anzuzeigen, dass dies der Header der Tabelle ist. Das scope Attribut wird jeder Kopfzelle (<th>) innerhalb dieser Kopfzeile hinzugefügt, um ausdrücklich anzugeben, dass sich jede Kopfzelle 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 vom vorherigen Beispiel, mit Ausnahme einiger zusätzlicher Stile, um die "Kopfzeile" hervorzuheben, so dass die Header 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 mit 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 Basis-Tabelle verwendet, um den Hauptbereich 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 an das <tbody> Element gebunden, 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 durch die Interaktivität und Unabhängigkeit der Sortierung für mehrere Spalten.

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 Hauptbereich eingefügt, um eine Kopfzeile mit Tabellenkopfzellen (<th> Element) einzuführen. Diese Kopfzellen werden im untenstehenden JavaScript-Code verwendet, um sie anklickbar zu machen und dann die entsprechende Sortierung beim Klicken 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-Event-Handler wird jeder Tabellenkopfzelle (<th> Element) von jedem <table> im document hinzugefügt; er sortiert alle Zeilen (<tr> Elemente) des <tbody> basierend auf dem Inhalt der Datenzellen (<td> Elemente) in den Zeilen.

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 Zeilenzelle festzulegen
• border: CSS-Eigenschaft, um die Rahmen von Zeilenzellen zu kontrollieren
• 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