La balise HTML <tr>
La balise HTML <tr> définit une ligne dans un tableau. Découvrez ses attributs et le style CSS avec des exemples.
La balise HTML <tr> définit une ligne dans un tableau. C'est un conteneur : un <tr> regroupe les cellules de cette ligne, et chaque cellule est écrite avec <th> (une cellule d'en-tête) ou <td> (une cellule de données standard). Un tableau est construit en empilant des lignes <tr>, et le navigateur aligne les cellules de chaque ligne en colonnes.
Cette page explique ce que fait <tr>, où il s'insère dans un tableau, ses attributs (et pourquoi les anciens ont disparu), ainsi que la façon de styliser les lignes avec CSS.
<tr> doit être placé à l'intérieur d'un élément <table> — soit directement, soit dans l'un des éléments de regroupement de lignes <thead>, <tbody> ou <tfoot>. Un <tr> ne peut contenir que des cellules <td> et <th>.
Chaque ligne peut contenir un nombre différent de cellules. Le navigateur affiche exactement les cellules que vous écrivez ; il ne complète pas automatiquement une ligne courte avec des cellules vides. Pour laisser une cellule vide, ajoutez un <td> ou un <th> vide.
Remarque :
<tr>lui-même ne s'étend jamais sur plusieurs colonnes ou lignes. Les attributscolspanetrowspanqui fusionnent des cellules sur plusieurs colonnes ou lignes se trouvent sur les cellules, pas sur la ligne — voir<td>et<th>.
Pour contrôler l'apparence des lignes et des tableaux (couleurs, bordures, alignement), utilisez les propriétés CSS pour les tableaux plutôt que les attributs HTML.
Syntaxe
La balise <tr> fonctionne en paires. Le contenu est écrit entre les balises ouvrante (<tr>) et fermante (</tr>).
Syntaxe de la balise HTML <tr>
<table>
<tr>
<td>...</td>
</tr>
</table>Exemple de la balise HTML <tr> :
Exemple de la balise HTML <tr>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>March</td>
<td>10.09.2018</td>
</tr>
<tr>
<td>June</td>
<td>18.07.2018</td>
</tr>
</table>
</body>
</html>Le premier <tr> contient deux cellules d'en-tête <th> ; chaque <tr> suivant contient deux cellules de données <td>. Comme chaque ligne comporte le même nombre de cellules, elles s'alignent parfaitement en deux colonnes.
Regrouper des lignes avec <thead>, <tbody> et <tfoot>
Pour tout tableau plus important qu'un simple tableau, regroupez vos lignes. Les lignes d'en-tête vont dans <thead>, les lignes du corps dans <tbody>, et les éventuelles lignes de résumé ou de pied de page dans <tfoot>. Les lignes <tr> se trouvent à l'intérieur de ces groupes. Cela rend le balisage plus clair, permet aux technologies d'assistance d'annoncer correctement le tableau, et vous offre des points d'ancrage nets pour le CSS.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
tfoot {
font-weight: bold;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Coffee</td>
<td>$3</td>
</tr>
<tr>
<td>Tea</td>
<td>$2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$5</td>
</tr>
</tfoot>
</table>
</body>
</html>Attributs
La balise <tr> ne possède pas d'attributs propres. Elle ne prend en charge que les attributs globaux standard (tels que class, id, style) et les attributs d'événement.
Les attributs de présentation listés ci-dessous étaient disponibles dans les anciennes versions du HTML, mais sont obsolètes en HTML5. Utilisez CSS à la place.
| Attribut obsolète | Ce qu'il faisait | Remplacement CSS |
|---|---|---|
align | Alignement horizontal du contenu des cellules | text-align: left / center / right; |
valign | Alignement vertical du contenu des cellules | vertical-align: top / middle / bottom; |
bgcolor | Couleur d'arrière-plan de la ligne | background-color: …; |
bordercolor | Couleur de la bordure | border-color: …; |
char / charoff | Aligner le contenu sur un caractère | Pas d'équivalent CSS (rarement nécessaire) |
N'utilisez pas align, valign, bgcolor, bordercolor, char ou charoff sur <tr>. Les navigateurs peuvent les ignorer et ils constituent du HTML5 invalide. Appliquez plutôt text-align, vertical-align et background-color en CSS.
Comment styliser une balise HTML <tr>
Stylisez les lignes avec CSS en ciblant l'élément <tr>. Un motif courant est le zèbre — ombrer des lignes alternées pour faciliter la lecture des longs tableaux. Le sélecteur tr:nth-child(even) cible chaque deuxième ligne :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 80%;
margin: 30px auto;
border-collapse: collapse;
}
th,
td {
padding: 10px;
text-align: left;
border: 1px solid #ccc;
}
thead tr {
background-color: #333;
color: #fff;
}
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
tbody tr:hover {
background-color: #e0f0ff;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>Designer</td>
</tr>
<tr>
<td>Bob</td>
<td>Developer</td>
</tr>
<tr>
<td>Carol</td>
<td>Manager</td>
</tr>
<tr>
<td>Dave</td>
<td>Tester</td>
</tr>
</tbody>
</table>
</body>
</html>Ici, thead tr colore la ligne d'en-tête, tbody tr:nth-child(even) ombre les 2e et 4e lignes du corps, et tbody tr:hover met en surbrillance la ligne sur laquelle se trouve le pointeur.