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

Si on veut qu'une cellule s'étende sur plusieurs lignes/colonnes, on pourra utiliser l'attribut colspan ou rowspan qui indiquent respectivement le nombre de colonnes / lignes sur lequel s'étendre (la valeur par défaut étant 1).

La construction de tableau peut parfois demander un peu de pratique. Au-delà des exemples présentés ci-après, vous pouvez consulter les tutoriels sur les tableaux HTML afin d'apprendre comment utiliser ces éléments et attributs HTML afin d'organiser vos données tabulaires.

À l'instar de tous les éléments HTML, cet élément inclut les attributs universels. Il existe également plusieurs attributs dépréciés à éviter désormais, mais qui peuvent être utiles pour comprendre du code ancien.

align Obsolète

Une chaîne de caractère qui définit l'alignement horizontal pour le contenu de chaque cellule. C'est un raccourci pour définir l'alignement sur l'ensemble de la ligne plutôt que pour chaque cellule. Les valeurs possibles sont :

left

Le contenu de la cellule est aligné à gauche de la cellule.

center

Le contenu de la cellule est centré horizontalement.

right

Le contenu de la cellule est aligné à droite de la cellule.

justify

Insère des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié.

char

Aligne le contenu textuel de la cellule selon un caractère spécial défini par l'attribut char (par exemple un point ou une virgule quand on souhaite aligner des nombres) et le nombre de caractères charoff à afficher derrière ce caractère d'alignement. Ce mode d'alignement n'a jamais été pris en charge de façon conséquente.

Si cet attribut n'est pas renseigné, la valeur est héritée du nœud parent.

Note : Cet attribut est devenu obsolète dans le dernier standard et ne doit donc plus être utilisé.

• Pour réaliser les mêmes effets que les valeurs left, center, right ou justify, il faut utiliser la propriété CSS text-align sur l'élément
• Pour réaliser le même effet qu'avec la valeur char. Il est possible d'utiliser la valeur de l'attribut char comme valeur de la propriété text-align.

bgcolor Obsolète

Une chaîne de caractères qui définit la couleur d'arrière-plan de toutes les cellules de la colonne. Il peut s'agit d'une notation hexadécimale #RRGGGBB ou #RGB ou bien d'un mot-clé pour une couleur. L'absence de cet attribut (ou sa déclaration à null en JavaScript) fera que la couleur des cellules de la ligne sera héritée de la couleur d'arrière-plan de l'élément parent.

Note : L'élément <tr> doit être mis en forme grâce au CSS. Pour fournir un effet semblable à celui achevé par l'attribut bgcolor, il est possible d'utiliser la propriété CSS background-color.

char Obsolète

Une chaîne de caractère qui définit le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point ou une virgule pour aligner des nombres ou des valeurs monétaires. Si l'attribut align ne vaut pas char, l'attribut est ignoré.

Note : Cet attribut est obsolète et peu implémenté : il est donc fortement déconseillé de l'utiliser. Pour réaliser le même effet qu'avec char, il faut utiliser la propriété CSS text-align.

charoff Obsolète

Une chaîne de caractères utilisée pour indiquer le nombre de caractères à afficher après le caractère défini par l'attribut char. Cela peut par exemple servir à indiquer qu'on souhaite afficher deux chiffres après la virgule pour les valeurs monétaires afin d'indiquer les centimes.

Note : Cet attribut ne doit plus être utilisé, car il est maintenant obsolète et que sa compatibilité n'était pas répandue.

valign Obsolète

Une chaîne de caractères qui définit l'alignement vertical du texte des cellules de la ligne. Les valeurs possibles de cet attribut sont :

baseline

Aligne le texte à la ligne la plus basse possible en utilisant la ligne de base des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur bottom.

bottom

Place le texte au plus bas de la cellule.

middle

Centre verticalement le texte dans la cellule.

top

Place le texte au plus haut de la cellule.

Note : Cet attribut est obsolète dans le dernier standard, la propriété CSS vertical-align doit être utilisée à la place.

Voir la page sur <table> pour d'autres exemples sur <tr>.

HTML

<table>
  <tr>
    <th>Prénom</th>
    <th>Nom</th>
  </tr>
  <tr>
    <td>Jean</td>
    <td>Biche</td>
  </tr>
  <tr>
    <td>Marcel</td>
    <td>Patulacci</td>
  </tr>
</table>

CSS

Ce fragment de CSS permet d'ajouter une bordure noire autour du tableau et des cellules, y compris pour celles définies avec <th> ou <td>. Cela marque clairement la zone de chaque cellule.

table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}

Résultat

On utilise ici les attributs rowspan et colspan pour étendre des cellules sur plusieurs lignes et colonnes. On voit ainsi que l'en-tête occupe deux lignes pour les noms, l'identifiant et le solde tandis qu'il y a deux colonnes de dates pour l'inscription et la résiliation.

Résultat

Une fois n'est pas coutume, commençons par regarder le résultat produit.

On voit que la zone d'en-tête occupe deux lignes : la première avec le nom, l'identifiant, les dates et le solde du compte ; la seconde avec les dates d'inscription et de résiliation qui forment un sous-groupe de colonnes. Pour obtenir ceci, on a:

• Utilisé l'attribut rowspan sur la ligne d'en-tête pour les éléments sur le nom, l'identifiant et le solde. Ces cellules occupent ainsi deux lignes.
• Utilisé l'attribut colspan sur la cellule d'en-tête pour les dates. Cela permet à ce que cette cellule s'étende sur deux colonnes.
• Défini une deuxième ligne d'éléments th qui contient uniquement les en-têtes pour l'inscription et la résiliation. Ces cellules viennent combler l'espace laissé par le fait que l'en-tête Dates n'occupe qu'une seule ligne.

HTML

<table>
  <tr>
    <th rowspan="2">Nom</th>
    <th rowspan="2">ID</th>
    <th colspan="2">Dates</th>
    <th rowspan="2">Solde</th>
  </tr>
  <tr>
    <th>Inscription</th>
    <th>Résiliation</th>
  </tr>
  <tr>
    <th>Margaret Nguyen</th>
    <td>427311</td>
    <td><time datetime="2010-06-03">3 juin 2010</time></td>
    <td>n/a</td>
    <td>0</td>
  </tr>
  <tr>
    <th>Edvard Galinski</th>
    <td>533175</td>
    <td><time datetime="2011-01013">13 janvier 2011</time></td>
    <td><time datetime="2017-04008">8 avril 2017</time></td>
    <td>37</td>
  </tr>
  <tr>
    <th>Hoshi Nakamura</th>
    <td>601942</td>
    <td><time datetime="2012-07-23">23 juillet 2012</time></td>
    <td>n/a</td>
    <td>15</td>
  </tr>
</table>

CSS

table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}

On utilise ici l'élément <thead> et l'élément <tbody> pour distinguer l'en-tête du tableau et le contenu de celui-ci.

HTML

<table>
  <thead>
    <tr>
      <th rowspan="2">Nom</th>
      <th rowspan="2">Identifiant</th>
      <th colspan="2">Dates</th>
      <th rowspan="2">Solde</th>
    </tr>
    <tr>
      <th>Inscription</th>
      <th>Résiliation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">3 juin 2010</time></td>
      <td>n/a</td>
      <td>0</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01013">13 janvier 2011</time></td>
      <td><time datetime="2017-04008">8 avril 2017</time></td>
      <td>37</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">23 juillet 2012</time></td>
      <td>n/a</td>
      <td>15</td>
    </tr>
  </tbody>
</table>

CSS

table {
  border: 1px solid black;
}

th,
td {
  border: 1px solid black;
}

Résultat

Le résultat n'a pas changé visuellement mais la structure comporte des informations sémantiques complémentaires.

Il est possible d'utiliser CSS afin de modifier l'apparence d'une ligne d'un tableau. Tous les styles appliqués à un élément <tr> auront un impact sur les cellules de cette ligne (sauf si celles-ci indiquent un style par-dessus).

Modifions ici la police et la couleur d'arrière-plan pour la ligne d'en-tête.

Résultat

Là encore, regardons le résultat pour commencer.

HTML

<table>
  <thead>
    <tr>
      <th rowspan="2">Nom</th>
      <th rowspan="2">ID</th>
      <th colspan="2">Dates</th>
      <th rowspan="2">Solde</th>
    </tr>
    <tr>
      <th>Inscription</th>
      <th>Résiliation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">3 juin 2010</time></td>
      <td>n/a</td>
      <td>0</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01013">13 janvier 2011</time></td>
      <td><time datetime="2017-04008">8 avril 2017</time></td>
      <td>37</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">23 juillet 2012</time></td>
      <td>n/a</td>
      <td>15</td>
    </tr>
  </tbody>
</table>

CSS

table {
  border: 1px solid black;
  font:
    16px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
}

thead > tr {
  background-color: rgb(228, 240, 245);
}

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
}

On utilise ici la propriété font sur l'élément <table> afin d'avoir une police plus agréable. Ensuite, pour tous les éléments <tr> qui sont les fils de <thead> (c'est-à-dire pour les lignes de l'en-tête), on indique une couleur d'arrière-plan bleu clair. Cela se propagera à l'ensemble des cellules de l'en-tête.

Cela ne modifie pas la mise en forme des éléments <th> de la première colonne où les noms des membres sont considérés comme des en-têtes de ligne.

Allons encore plus loin dans la mise en forme avec des styles pour l'en-tête ainsi que le corps du tableau en alternant les couleurs des lignes et en utilisant différentes couleurs pour les cellules selon leur position, etc.

Résultat

Voici le résultat qui sera obtenu :

HTML

Le HTML n'est pas modifié.

<table>
  <thead>
    <tr>
      <th rowspan="2">Nom</th>
      <th rowspan="2">ID</th>
      <th colspan="2">Dates</th>
      <th rowspan="2">Solde</th>
    </tr>
    <tr>
      <th>Inscription</th>
      <th>Résiliation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">3 juin 2010</time></td>
      <td>n/a</td>
      <td>0</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01013">13 janvier 2011</time></td>
      <td><time datetime="2017-04008">8 avril 2017</time></td>
      <td>37</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">23 juillet 2012</time></td>
      <td>n/a</td>
      <td>15</td>
    </tr>
  </tbody>
</table>

CSS

Ici, CSS est utilisé de façon plus marquée. Sans que ce soit compliqué, il y a beaucoup de choses à voir : autant les décomposer.

Règles pour le tableau et les styles de base

table {
  border: 1px solid black;
  font:
    16px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
  border-spacing: 0;
  border-collapse: collapse;
}

Ici, on ajoute les propriétés border-spacing et border-collapse afin d'éliminer l'espace entre les cellules et afin de fusionner les bordures qui se touchent afin d'obtenir une seule bordure plutôt que des bordures doubles.

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
}

th {
  vertical-align: bottom;
}

Voici le style par défaut pour l'ensemble des cellules. Ajoutons quelques personnalisations.

Ligne d'en-tête

Nous allons voir l'en-tête en deux parties. Pour commencer, mettons en forme l'en-tête de façon générale :

thead > tr {
  background-color: rgb(228, 240, 245);
}

thead > tr:nth-of-type(2) {
  border-bottom: 2px solid black;
}

On définit la couleur d'arrière-plan de tous les éléments <tr> dans la ligne d'en-tête du tableau (contenue dans <thead>). Ensuite, on définit la bordure basse pour que ce soit une ligne avec une épaisseur de deux pixels. On peut voir qu'on utilise le sélecteur :nth-of-type afin de cibler l'application de border-bottom sur la deuxième ligne de l'en-tête. Pourquoi ? Parce que l'en-tête se compose de deux lignes où on a des cellules fusionnées. Cela signifie qu'il y a effectivement deux lignes et appliquer ces règles à la première ligne ne fournirait pas le résultat attendu.

Les en-têtes d'inscription et de résiliation

Mettons en forme ces deux cellules d'en-têtes en utilisant des teintes rouge / vert pour représenter l'aspect positif d'une inscription et l'aspect négatif d'une résiliation.

thead > tr:last-of-type > th:nth-of-type(1) {
  background-color: rgb(225, 255, 225);
}

thead > tr:last-of-type > th:nth-of-type(2) {
  background-color: rgb(255, 225, 225);
}

Ici, on cible la dernière ligne de l'en-tête du tableau et on indique la couleur pour la première cellule d'en-tête (qui correspond à l'inscription) avec du vert et la seconde (qui correspond à la résiliation) avec du rouge.

Ajouter des couleurs pour les autres lignes

Pour améliorer la lisibilité d'un tableau, il est courant d'appliquer une alternance de couleur entre chaque ligne. Faisons cela en ciblant les lignes paires :

tbody > tr:nth-of-type(even) {
  background-color: rgb(237, 238, 242);
}

Mise en forme de la colonne d'en-tête gauche

On veut que la première colonne se démarque. Mettons la en forme également.

tbody > tr > th:first-of-type {
  text-align: left;
  background-color: rgb(225, 229, 244);
}

Cela applique text-align à chaque première cellule de chaque ligne afin de justifier à gauche les noms des membres avec une couleur d'arrière-plan légèrement différentes.

Justifier les soldes de compte

Enfin, lorsqu'on affiche des valeurs monétaires, on les représente alignées à droite pour faciliter une lecture comparative entre les valeurs. Appliquons ceci à l'exemple.

tbody > tr > td:last-of-type {
  text-align: right;
}

Cette règle applique la propriété CSS text-align sur le dernier élément <td> de chaque ligne du corps du tableau avec la valeur "right".

• Apprendre : les tableaux HTML : une introduction à l'utilisation des tableaux qui aborde <tr>.

• Les autres éléments HTML relatifs aux tableaux : <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>.

• HTMLTableRowElement : l'interface DOM sur laquelle <tr> est basé.

• Les propriétés et pseudo-classes CSS qui sont particulièrement utiles pour mettre en forme l'élément <tr> :

  • La pseudo-classe :nth-child qui permet de définir l'alignement des cellules dans la colonne ou sur une ligne
  • La propriété text-align qui permet d'aligner l'ensemble des cellules par rapport au même caractère (comme le point ou la virgule).