Het element <tr>

Attributen

Dit element bevat de globale attributen.

Verouderde attributen

De volgende attributen zijn verouderd en mogen niet meer worden gebruikt. Ze worden hieronder gedocumenteerd ter referentie bij het bijwerken van bestaande code en uit historisch belang.

Gebruiksnotities

• Het <tr>-element is alleen geldig als kind van een <thead>-, <tbody>- of <tfoot>-element.
• Als de <tr> als direct kind van het bovenliggende <table>-element wordt geplaatst, wordt de <tbody>-ouder impliciet verondersteld en voegen browsers de <tbody> toe aan de markup.
• De impliciete <tbody>-ouder wordt alleen ondersteund als de <table> verder geen kind-<tbody>-elementen heeft, en alleen als de <tr> is opgenomen na eventuele <caption>-, <colgroup>- en <thead>-elementen.
• De CSS-pseudoklassen :nth-of-type, :first-of-type en :last-of-type zijn vaak handig om de gewenste reeks rijen en hun gegevens- en headercellen (<td>- en <th>-elementen) te selecteren.
• Wanneer een <tr> als direct kind van de <table> wordt opgenomen, doordat de browser een <tbody> aan de markup toevoegt, werken CSS-selectors zoals table > tr mogelijk niet zoals verwacht of helemaal niet.

Voorbeelden

Zie <table> voor een compleet tabelvoorbeeld waarin gangbare standaarden en best practices worden geïntroduceerd.

Basisopzet van een rij

Dit voorbeeld demonstreert een tabel met vier rijen en drie kolommen, waarbij de eerste kolom headers bevat voor de gegevenscellen van de rij.

HTML

Er worden vier <tr>-elementen gebruikt om vier tabelrijen te maken. Elke rij bevat drie cellen - één headercel (<th>) en twee gegevenscellen (<td>) - waardoor drie kolommen ontstaan. Het scope-attribuut dat op elke headercel is ingesteld, specificeert op welke cellen ze betrekking hebben, wat in dit voorbeeld alle gegevenscellen binnen de row betreft.

<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

De CSS-pseudoklasse :nth-of-type wordt gebruikt om elke oneven rij te selecteren en de background-color van die rijen in te stellen op een iets donkerdere tint, waardoor een zogenaamd "zebrastreep"-effect ontstaat. Deze afwisselende achtergrond maakt de rijen met gegevens in de tabel gemakkelijker te doorgronden en te lezen - stel je voor dat je veel rijen en kolommen hebt en probeert bepaalde gegevens in een specifieke rij te vinden. Daarnaast worden de headercellen van de rij (<th>-elementen) gemarkeerd met een background-color om ze te onderscheiden van de gegevenscellen (<td>-elementen).

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;
}

Resultaat

Header-rij

Dit voorbeeld breidt de basistabel uit het vorige voorbeeld uit door een header-rij als eerste rij van de tabel toe te voegen.

HTML

Er wordt een extra tabelrij (<tr>) toegevoegd als de eerste rij van de tabel met kolomheadercellen (<th>) die een header voor elke kolom bieden. We plaatsen deze rij in een <thead>-groeperingselement om aan te geven dat dit de header van de tabel is. Het scope-attribuut wordt toegevoegd aan elke headercel (<th>) binnen deze head-rij om expliciet aan te geven dat elke headercel betrekking heeft op alle cellen binnen zijn eigen kolom, ook al bevinden die cellen zich in de <tbody>.

<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

De CSS is nagenoeg ongewijzigd ten opzichte van het vorige voorbeeld, afgezien van wat extra styling om de "header-rij" te markeren, zodat de headers van de kolommen opvallen ten opzichte van de andere cellen.

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;
}

Resultaat

Rijen sorteren

Er zijn geen native methoden om de rijen (<tr>-elementen) van een <table> te sorteren. Maar met behulp van Array.prototype.sort(), Node.removeChild en Node.appendChild kan een aangepaste sort()-functie in JavaScript worden geïmplementeerd om een HTMLCollection van <tr>-elementen te sorteren.

HTML

In deze basistabel wordt een <tbody>-element gebruikt om het body-gedeelte van de tabel aan te duiden en om drie rijen (<tr>-elementen) met gegevens (<td>-elementen) op te nemen, waardoor één kolom ontstaat met getallen in aflopende volgorde.

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

JavaScript

In de onderstaande JavaScript-code wordt de gemaakte sort()-functie toegevoegd aan het <tbody>-element, zodat de tabelcellen in oplopende volgorde worden gesorteerd en de weergave dienovereenkomstig wordt bijgewerkt.

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;
}

Resultaat

Rijen sorteren door op headercellen te klikken

Dit voorbeeld breidt de basistabel uit het vorige voorbeeld uit door het sorteren interactief en onafhankelijk te maken voor meerdere kolommen.

HTML

Er wordt een extra gegevenscel (<td>-element) toegevoegd aan elke rij (<tr>-element) binnen de tabelbody (<tbody>-element) om een tweede kolom te maken met letters in oplopende volgorde. Met behulp van het <thead>-element wordt een head-sectie toegevoegd vóór de body-sectie om een head-rij te introduceren met tabelheadercellen (<th>-element). Deze headercellen worden in de onderstaande JavaScript-code gebruikt om ze klikbaar te maken en vervolgens het bijbehorende sorteren uit te voeren wanneer ze door een klik worden geactiveerd.

<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

Er wordt een click-eventhandler toegevoegd aan elke tabelheader (<th>-element) van elke <table> in het document; deze sorteert alle rijen (<tr>-elementen) van de <tbody> op basis van de inhoud van de gegevenscellen (<td>-elementen) die in de rijen zijn opgenomen.

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;
}

Resultaat

Technische samenvatting

Zie ook

• <caption>
• <col>
• <colgroup>
• <table>
• <tbody>
• <td>
• <tfoot>
• <th>
• <thead>