La balise <tr> en HTML : créer des lignes de tableau

La balise <tr> est un élément fondamental du HTML qui permet de créer des lignes dans un tableau. Son nom vient de l'anglais "table row", qui signifie littéralement "ligne de tableau". Sans cette balise, il serait impossible de structurer correctement les données dans un tableau HTML.

Que vous souhaitiez afficher un tableau de prix, une liste de produits, un calendrier ou des statistiques, la maîtrise de la balise <tr> est indispensable. Elle travaille en étroite collaboration avec les balises <td> (cellules de données) et <th> (cellules d'en-tête) pour former une structure de tableau complète et sémantiquement correcte. Si vous souhaitez approfondir vos connaissances en HTML, notre formation complète sur HTML vous guidera pas à pas dans la création de sites web professionnels.

Syntaxe de la balise <tr>

Structure de base

La syntaxe de la balise <tr> est simple et intuitive. Elle s'ouvre avec <tr> et se ferme avec </tr>. Entre ces deux balises, vous placez les cellules de votre ligne :

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

Dans cet exemple, nous avons créé une ligne contenant trois cellules. Chaque cellule est définie par une balise <td> qui représente une donnée du tableau.

Utilisation avec les en-têtes

Lorsque vous créez la première ligne d'un tableau qui contient les titres des colonnes, vous utiliserez <th> à la place de <td> :

<table>
  <tr>
    <th>Nom</th>
    <th>Prénom</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>Dupont</td>
    <td>Marie</td>
    <td>marie@believemy.com</td>
  </tr>
</table>

Les cellules <th> sont automatiquement mises en gras et centrées par défaut, ce qui les distingue visuellement des cellules de données.

Structure complète avec sections

Pour une meilleure sémantique et accessibilité, nous vous recommandons d'utiliser les éléments de regroupement :

<table>
  <thead>
    <tr>
      <th>Formation</th>
      <th>Durée</th>
      <th>Niveau</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML & CSS</td>
      <td>20 heures</td>
      <td>Débutant</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>35 heures</td>
      <td>Intermédiaire</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total</td>
      <td>55 heures</td>
    </tr>
  </tfoot>
</table>

Cette structure utilise <thead> pour l'en-tête, <tbody> pour le corps du tableau et <tfoot> pour le pied de tableau. Chaque section contient une ou plusieurs balises <tr>.

Attributs de la balise <tr>

Attributs globaux

La balise <tr> accepte tous les attributs globaux HTML. Les plus couramment utilisés sont :

Attributs obsolètes

Certains attributs étaient auparavant utilisés directement sur la balise <tr>, mais ils sont maintenant obsolètes en HTML5. Nous vous déconseillons fortement de les utiliser :

Exemples pratiques

Tableau de données simple

Voici un exemple de tableau présentant une liste d'apprenants Believemy :

<table>
  <thead>
    <tr>
      <th>Apprenant</th>
      <th>Formation suivie</th>
      <th>Progression</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice Martin</td>
      <td>HTML & CSS</td>
      <td>75%</td>
    </tr>
    <tr>
      <td>Thomas Bernard</td>
      <td>JavaScript</td>
      <td>42%</td>
    </tr>
    <tr>
      <td>Sophie Dubois</td>
      <td>Python</td>
      <td>100%</td>
    </tr>
  </tbody>
</table>

Ce tableau présente trois colonnes et trois lignes de données, plus une ligne d'en-tête. Chaque <tr> représente un apprenant différent.

Tableau avec fusion de cellules

Vous pouvez fusionner des cellules horizontalement avec l'attribut colspan ou verticalement avec rowspan. Ces attributs se placent sur les cellules (<td> ou <th>), mais affectent la structure des lignes :

<table>
  <thead>
    <tr>
      <th rowspan="2">Catégorie</th>
      <th colspan="2">Statistiques</th>
    </tr>
    <tr>
      <th>Vues</th>
      <th>Inscriptions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Développement Web</td>
      <td>15 420</td>
      <td>892</td>
    </tr>
    <tr>
      <td>Data Science</td>
      <td>8 750</td>
      <td>456</td>
    </tr>
  </tbody>
</table>

Dans cet exemple, la cellule "Catégorie" s'étend sur deux lignes grâce à rowspan="2", tandis que "Statistiques" s'étend sur deux colonnes avec colspan="2".

Stylisation avec CSS

Pour styliser vos lignes de tableau, utilisez CSS. Voici un exemple de mise en forme avec alternance de couleurs :

<style>
  .tableau-believemy {
    width: 100%;
    border-collapse: collapse;
  }
  
  .tableau-believemy tr {
    border-bottom: 1px solid #e0e0e0;
  }
  
  .tableau-believemy tr:nth-child(even) {
    background-color: #f8f9fa;
  }
  
  .tableau-believemy tr:hover {
    background-color: #e3f2fd;
  }
  
  .tableau-believemy th,
  .tableau-believemy td {
    padding: 12px 15px;
    text-align: left;
  }
</style>

<table class="tableau-believemy">
  <thead>
    <tr>
      <th>Module</th>
      <th>Statut</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Introduction au HTML</td>
      <td>Terminé</td>
    </tr>
    <tr>
      <td>Les balises sémantiques</td>
      <td>En cours</td>
    </tr>
    <tr>
      <td>Les tableaux HTML</td>
      <td>À venir</td>
    </tr>
  </tbody>
</table>

Le sélecteur tr:nth-child(even) cible les lignes paires, tandis que tr:hover ajoute un effet au survol de la souris.

Bonnes pratiques

Structure sémantique

Utilisez toujours les éléments de regroupement pour une meilleure accessibilité :

• Placez vos lignes d'en-tête dans un élément <thead>
• Regroupez les lignes de données dans un <tbody>
• Si vous avez un résumé ou des totaux, utilisez <tfoot>

Cette structure aide les lecteurs d'écran à comprendre l'organisation de vos données et améliore l'accessibilité globale de votre site.

Accessibilité

Pour rendre vos tableaux accessibles à tous les utilisateurs, suivez ces recommandations :

<table aria-describedby="description-tableau">
  <caption>Liste des formations Believemy</caption>
  <thead>
    <tr>
      <th scope="col">Nom</th>
      <th scope="col">Durée</th>
      <th scope="col">Prix</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">HTML Fondamentaux</th>
      <td>15h</td>
      <td>Gratuit</td>
    </tr>
  </tbody>
</table>
<p id="description-tableau">Ce tableau présente les formations disponibles.</p>

L'attribut scope sur les cellules d'en-tête indique si elles s'appliquent à une colonne (col) ou une ligne (row).

Performance et maintenance

Pour des tableaux volumineux, pensez à :

• Limiter le nombre de lignes affichées et implémenter une pagination
• Utiliser des classes CSS réutilisables plutôt que des styles inline
• Éviter les tableaux imbriqués qui compliquent la maintenance
• Préférer des identifiants significatifs pour faciliter le JavaScript

Erreurs courantes à éviter

Placer <tr> en dehors d'un tableau

La balise <tr> n'a de sens qu'à l'intérieur d'un élément . Ne faites jamais ceci :

<!-- ❌ INCORRECT -->
<tr>
  <td>Donnée orpheline</td>
</tr>

<!-- ✅ CORRECT -->
<table>
  <tr>
    <td>Donnée dans un tableau</td>
  </tr>
</table>

Mélanger <th> et <td> sans logique

Les cellules d'en-tête (<th>) doivent être utilisées uniquement pour les titres, pas pour mettre du texte en gras :

<!-- ❌ INCORRECT : utiliser th pour du style -->
<tr>
  <th>Important</th>
  <td>Valeur</td>
</tr>

<!-- ✅ CORRECT : utiliser CSS pour le style -->
<tr>
  <td class="important">Important</td>
  <td>Valeur</td>
</tr>

Oublier de fermer les balises

Même si certains navigateurs tolèrent l'omission de la balise fermante </tr>, nous vous recommandons de toujours la fermer explicitement pour un code propre et maintenable.

Utiliser des tableaux pour la mise en page

Les tableaux sont faits pour présenter des données, pas pour créer des mises en page.

Vous pouvez utiliser la balise <tr> en toute confiance sans vous soucier de la compatibilité.

Questions fréquentes sur la balise <tr>

Oui, vous pouvez cibler une ligne spécifique de plusieurs façons. Utilisez une classe CSS (<tr class="ma-ligne">), un identifiant unique (<tr id="ligne-5">), ou des sélecteurs CSS comme tr:first-child, tr:last-child ou tr:nth-child(n). Par exemple, tr:nth-child(3) cible la troisième ligne du tableau.

Fonctionnellement, les balises <tr> sont identiques quel que soit leur conteneur. La différence est sémantique : les lignes dans <thead> représentent les en-têtes du tableau et sont répétées lors de l'impression sur plusieurs pages. Les lignes dans <tbody> contiennent les données principales. Cette distinction aide également les technologies d'assistance à mieux interpréter votre tableau.

Pour créer un tableau responsive, vous pouvez utiliser plusieurs techniques CSS. La plus simple est d'envelopper votre tableau dans un conteneur avec overflow-x: auto pour permettre le défilement horizontal. Pour des approches plus avancées, vous pouvez transformer les lignes en blocs empilés sur mobile avec des media queries, ou utiliser des attributs data-* pour afficher les en-têtes de colonnes devant chaque cellule.

Pour maîtriser HTML et créer des sites web professionnels, nous vous recommandons de suivre notre formation pour apprendre HTML. Vous y découvrirez toutes les balises essentielles, les bonnes pratiques d'accessibilité et les techniques modernes pour structurer vos pages web de manière optimale.