Balise HTML `<tr>`

La balise <tr> spécifie une ligne dans un tableau HTML. Les cellules qu'elle contient sont définies à l'aide des éléments <th> (cellule d'en-tête) ou <td> (cellule standard). Les balises <td> et <th> prennent toutes deux en charge l'attribut colspan pour un contrôle supplémentaire sur la façon dont les cellules s'étendent sur plusieurs colonnes ou s'y insèrent. Cet attribut permet de définir la largeur en nombre de colonnes de la cellule (la valeur par défaut est 1). Vous pouvez utiliser l'attribut rowspan sur les cellules si vous souhaitez qu'elles s'étendent sur plusieurs lignes.

Certains tableaux peuvent également inclure les éléments <col>, <colgroup>, <caption>, <tfoot>, <tbody> et <thead>.

L'élément <tr> est déclaré à l'intérieur de la balise <table>.

Chaque ligne peut contenir un nombre différent de cellules. Le navigateur affiche exactement les cellules spécifiées dans le balisage ; il ne remplit pas automatiquement la ligne avec des cellules vides. Si vous devez laisser une cellule vide, créez simplement un élément <td> ou <th> sans contenu.

TIP

Pour personnaliser l'apparence du tableau, utilisez les propriétés CSS.

Syntaxe

La balise <tr> s'utilise par paire. Le contenu est écrit entre les balises d'ouverture (<tr>) et de fermeture (</tr>).

Syntaxe de la balise HTML <tr>

html

<table> 
  <tr> 
    <td>...</td> 
  </tr> 
</table>

Exemple de la balise HTML `<tr>` :

Exemple de la balise HTML <tr>

html

<!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>

Try it Yourself »

Résultat

exemple de tr

Attributs

Remarque : Les attributs suivants sont dépréciés en HTML5 et ne doivent pas être utilisés dans le développement web moderne.

Attribut	Valeur	Description
align	right left center justify char	Aligne le contenu d'une ligne de tableau. Non pris en charge dans HTML 5.
bgcolor	bgcolor	Spécifie une couleur d'arrière-plan pour une ligne de tableau. Non pris en charge dans HTML 5.
bordercolor	bordercolor	Définit la couleur de la bordure. Non pris en charge dans HTML 5.
char	character	Aligne le contenu d'une ligne de tableau sur un caractère. Il est utilisé uniquement si l'attribut est align="char". Non pris en charge dans HTML 5.
charoff	number	Définit le nombre de caractères dont le contenu sera aligné par rapport au caractère spécifié par l'attribut char. Il est utilisé uniquement si l'attribut est align="char". Non pris en charge dans HTML 5.
valign	top middle bottom baseline	Spécifie l'alignement vertical du contenu à l'intérieur d'une ligne de tableau. Non pris en charge dans HTML 5.

La balise <tr> prend en charge les Attributs globaux et les Attributs d'événement.

Comment styliser une balise HTML <tr>

Pratique

Quelle est l'utilité et l'utilisation de la balise <tr> en HTML ?

La balise <tr> est utilisée pour créer un nouveau paragraphe.La balise <tr> est utilisée pour créer un bloc de texte.La balise <tr> est utilisée pour créer une nouvelle ligne dans un tableau.La balise <tr> peut être utilisée avec les balises <th> et <td> pour définir des cellules dans la ligne.La balise <tr> peut être placée à la fois à l'intérieur et à l'extérieur de la balise <table>.

Balise HTML <tr> ​

Syntaxe ​

Exemple de la balise HTML <tr> : ​

Résultat ​