<tr> : l'élément de ligne d'un tableau

Exemple interactif

<table>
  <caption>
    Budget du conseil (en livres sterling) 2018
  </caption>
  <tr>
    <th scope="col">Articles</th>
    <th scope="col">Dépenses</th>
  </tr>
  <tr>
    <th scope="row">Beignets</th>
    <td>3 000</td>
  </tr>
  <tr>
    <th scope="row">Fournitures de bureau</th>
    <td>18 000</td>
  </tr>
  <tr>
    <th scope="row">Total</th>
    <td>21 000</td>
  </tr>
</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;
}

Attributs

Cet élément inclut les attributs universels.

Attributs obsolètes

Les attributs suivants sont obsolètes et ne doivent plus être utilisés. Ils sont documentés ci-dessous uniquement pour référence lors de la mise à jour de code existant et pour leur intérêt historique.

align Obsolète

Définit l'alignement horizontal de chaque cellule de la ligne. Les valeurs énumérées possibles sont left, center, right, justify et char. Lorsque pris en charge, la valeur char aligne le contenu textuel sur le caractère défini dans l'attribut char et sur le décalage défini par l'attribut charoff. Il faut utiliser la propriété CSS text-align à la place, car cet attribut est obsolète.

bgcolor Obsolète

Définit la couleur d'arrière-plan de chaque cellule de la ligne. La valeur est une couleur HTML ; soit un code RGB hexadécimal à 6 chiffres, précédé d'un #, soit un mot-clé de couleur. Les autres valeurs CSS <color> ne sont pas prises en charge. Utilisez la propriété CSS background-color à la place, car cet attribut est obsolète.

char Obsolète

Définit l'alignement du contenu sur un caractère de chaque cellule de la ligne. Les valeurs typiques incluent un point (.) lorsqu'on souhaite aligner des nombres ou des valeurs monétaires. Si align n'est pas défini sur char, cet attribut est ignoré.

charoff Obsolète

Définit le nombre de caractères à afficher après le caractère d'alignement défini par l'attribut char.

valign Obsolète

Définit l'alignement vertical de chaque cellule de la ligne. Les valeurs énumérées possibles sont baseline, bottom, middle et top. Il faut utiliser la propriété CSS vertical-align à la place, car cet attribut est obsolète.

Notes d'utilisation

• L'élément <tr> n'est valide qu'en tant qu'enfant d'un élément <thead>, <tbody> ou <tfoot>.
• Si le <tr> est placé directement comme enfant de son parent <table>, le parent <tbody> est implicite et les navigateurs ajoutent le <tbody> au balisage.
• Le parent <tbody> implicite n'est pris en charge que si le <table> ne comporte pas déjà d'enfant <tbody>, et uniquement si le <tr> est inclus après tout élément <caption>, <colgroup> et <thead>.
• Les pseudo-classes CSS :nth-of-type, :first-of-type et :last-of-type sont souvent utiles pour sélectionner l'ensemble souhaité de lignes et leurs cellules de données et d'en-tête (éléments <td> et <th>).
• Lorsqu'un <tr> est inclus comme enfant direct du <table>, le navigateur ajoute un <tbody> au balisage, les sélecteurs CSS comme table > tr peuvent ne pas fonctionner comme prévu, voire pas du tout.

Exemples

Voir <table> pour un exemple complet de tableau présentant les standards courants et les bonnes pratiques.

Configuration de base d'une ligne

Cet exemple montre un tableau avec quatre lignes et trois colonnes, où la première colonne contient les en-têtes pour les cellules de données des lignes.

HTML

<table>
  <tbody>
    <tr>
      <th scope="row">A</th>
      <td>Anatole</td>
      <td>ANA tol</td>
    </tr>
    <tr>
      <th scope="row">B</th>
      <td>Berthe</td>
      <td>BER t</td>
    </tr>
    <tr>
      <th scope="row">C</th>
      <td>Célestine</td>
      <td>CÉ lest ine</td>
    </tr>
    <tr>
      <th scope="row">D</th>
      <td>Désiré</td>
      <td>DÉ zi ré</td>
    </tr>
  </tbody>
</table>

CSS

La pseudo-classe CSS :nth-of-type est utilisée pour sélectionner chaque ligne impair et définir la background-color de ces lignes sur une teinte légèrement plus foncée, créant un effet « zebra stripe ». Ce fond alterné rend les lignes de données du tableau plus faciles à lire et à parcourir — imaginez avoir de nombreuses lignes et colonnes et essayer de trouver une donnée dans une ligne particulière. De plus, les cellules d'en-tête de ligne (éléments <th>) sont mises en évidence avec une background-color pour les distinguer des cellules de données (éléments <td>).

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

Résultat

Ligne d'en-tête

Cet exemple étend le tableau de base du exemple précédent en ajoutant une ligne d'en-tête comme première ligne du tableau.

HTML

Une ligne supplémentaire de tableau (<tr>) est ajoutée en première position avec des cellules d'en-tête de colonne (éléments <th>) fournissant une en-tête pour chaque colonne. Cette ligne est placée dans un élément de regroupement <thead> pour indiquer qu'il s'agit de l'en-tête du tableau. L'attribut scope est ajouté à chaque cellule d'en-tête (<th>) de cette ligne d'en-tête afin d'indiquer explicitement que chaque cellule d'en-tête concerne toutes les cellules de sa propre colonne, même si ces cellules se trouvent dans le <tbody>.

<table>
  <thead>
    <tr>
      <th scope="col">Symbole</th>
      <th scope="col">Mot code</th>
      <th scope="col">Prononciation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">A</th>
      <td>Anatole</td>
      <td>ANA tol</td>
    </tr>
    <tr>
      <th scope="row">B</th>
      <td>Berthe</td>
      <td>BER t</td>
    </tr>
    <tr>
      <th scope="row">C</th>
      <td>Célestine</td>
      <td>CÉ lest ine</td>
    </tr>
    <tr>
      <th scope="row">D</th>
      <td>Désiré</td>
      <td>DÉ zi ré</td>
    </tr>
  </tbody>
</table>

CSS

Le CSS est presque inchangé par rapport à l'exemple précédent, à l'exception de quelques mises en forme supplémentaires pour mettre en évidence la « ligne d'en-tête » afin que les en-têtes des colonnes se distinguent des autres cellules.

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

Résultat

Trier les lignes

Il n'existe aucune méthode native pour trier les lignes (<tr>) d'un élément <table>. Cependant, en utilisant Array.prototype.sort(), Node.removeChild et Node.appendChild, il est possible d'implémenter une fonction personnalisée sort() en JavaScript pour trier une HTMLCollection de lignes <tr>.

HTML

Un élément <tbody> est utilisé dans ce tableau de base pour marquer la section du corps du tableau et inclure trois lignes (<tr>) contenant des données (éléments <td>), créant une colonne avec des nombres en ordre décroissant.

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

JavaScript

Dans le code JavaScript ci-dessous, la fonction sort() créée est attachée à l'élément <tbody> afin de trier les cellules du tableau par ordre croissant et de mettre à jour l'affichage en conséquence.

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

Résultat

Trier les lignes par clic sur les cellules d'en-tête

Cet exemple étend le tableau de base du exemple précédent en rendant le tri interactif et indépendant pour plusieurs colonnes.

HTML

Une cellule de données supplémentaire (élément <td>) est ajoutée à chaque ligne (<tr>) du corps du tableau (élément <tbody>) afin de créer une seconde colonne avec des lettres en ordre croissant. Grâce à l'élément <thead>, une section d'en-tête est ajoutée avant la section du corps pour introduire une ligne d'en-tête avec des cellules d'en-tête de tableau (éléments <th>). Ces cellules d'en-tête sont utilisées dans le code JavaScript ci-dessous pour les rendre cliquables et effectuer le tri correspondant lors de l'activation au clic.

<table>
  <thead>
    <tr>
      <th>Nombres</th>
      <th>Lettres</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

Un gestionnaire d'évènement de clic est ajouté à chaque cellule d'en-tête de tableau (élément <th>) de chaque <table> dans le document ; il trie toutes les lignes (<tr>) du <tbody> en fonction du contenu des cellules de données (éléments <td>) contenues dans les lignes.

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

Result

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• Apprendre : les tableaux HTML
• Les autres éléments HTML relatifs aux tableaux : <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>
• La propriété CSS background-color pour définir la couleur d'arrière-plan de chaque cellule de ligne
• La propriété CSS border pour contrôler les bordures des cellules de ligne
• La propriété CSS text-align pour aligner horizontalement le contenu de chaque cellule de ligne
• La propriété CSS vertical-align pour aligner verticalement le contenu de chaque cellule de ligne
• Les pseudo-classes CSS :nth-of-type, :first-of-type, :last-of-type pour sélectionner les cellules de ligne souhaitées