Tag HTML <tr>

❮ Précédent Suivant ❯

Le tag HTML <tr> définit les lignes dans la table. Les cellules de la ligne sont spécifiées par les tags <th> (cellule d'en-tête) ou <td> (cellule standard).

L’élément <tr> est utilisé dans le tag <table>.

Notez que toutes les lignes de la table contiennent le même nombre de cellules, ce qui correspond au nombre de cellules de la plus longue ligne. S'il y a moins de cellules dans une ligne que dans les autres lignes, le navigateur remplit automatiquement la ligne en plaçant des cellules vides à la fin de la même ligne.

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      th, td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
   <body>
    <table style="width:80%; margin:30px auto; border-collapse:collapse;">
      <tr>
        <th>Mois</th>
        <th>Date</th>
      </tr>
      <tr>
        <td>Mars</td>
        <td>10.09.2018</td>
      </tr>
      <tr>
        <td>Juin</td>
        <td>18.07.2018</td>
      </tr>
    </table>
  </body>
</html>

Essayez-vous-même!

Résultat

Attributs

Attribut	Valeur	Description
align	right left center justify char	Indique comment aligner le contenu des cellules. Non supporté en HTML5.
bgcolor	bgcolor	Spécifie la couleur d'arrière-plan des cellules. Non supporté en HTML5.
bordercolor	bordercolor	Définit le couleur du cadre. Non supporté en HTML5.
char	character	Spécifie comment aligner le contenu des cellules avec le caractère spécifié. Utilisé uniquement si l'attribut align = "char". Non supporté en HTML5.
charoff	number	Décale le contenu des cellules par rapport au caractère spécifié. Utilisé si l'attribut align = "char". Non supporté en HTML5.
valign	top middle bottom baseline	Aligne le contenu dans l’élément verticalement. Non supporté en HTML5.

Le tag <tr> supporte également les Attributs globaux et les Attributs d'événements.

Comment styler le tag HTML <tr> ?

Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <tr>:

La propriété CSS font-style définit le style de la police: normal | italic | oblique | initial | inherit
La propriété CSS font-family spécifie une liste priorisée d’un ou plusieurs noms de famille de police et/ou noms de famille génériques pour l’élément sélectionné.
La propriété CSS font-size définit la taille de la police.
La propriété CSS font-weight définit si la police doit être en gras ou épaisse.
La propriété CSS text-transform contrôle le cas de texte et la capitalisation.
La propriété CSS text-decoration spécifie la décoration ajoutée au texte, et est une propriété raccourcie pour les propriétés CSS text-decoration-line, text-decoration-color, text-decoration-style.

Coloration du texte dans le tag HTML <tr>:

La propriété CSS color décrit la couleur du contenu et les décorations du texte.
La propriété CSS background-color définit la couleur de fond d’un élément.

Styles de mise en page du texte pour la tag HTML <tr>:

La propriété CSS text-indent spécifie l’indentation de la première ligne dans un bloc de texte.
La propriété CSS text-overflow spécifie comment le contenu qui n’est pas affiché doit être signalé à l’utilisateur.
La propriété CSS white-space spécifie comment l’espace blanc à l’intérieur d’un élément est géré.
La propriété CSS word-break spécifie où les lignes doivent être cassées.

Autres propriétés utiles pour le tag HTML <tr>:

La propriété CSS text-shadow ajoute des ombres au texte.
La propriété CSS text-align-last définit l’alignement de la dernière ligne du texte.
La propriété CSS line-height spécifie la hauteur d’une ligne.
La propriété CSS letter-spacing définit les espaces entre les lettres/caractères d’un texte.
La propriété CSS word-spacing permet de définir l’espacement entre les mots.