Accueil    HTML    Balise TR
 



balise tr  Balise TR : Table row

«  Partie précédente  |  Index  |  Partie suivante  »


  • Tag de fermeture obligatoire | Support :
  • Google Chrome
  • Firefox
  • Internet Explorer
  • Opera
  • Safari



La balise <tr> est exclusivement utilisée au sein d'une <table> html et permet de déclarer une nouvelle ligne dans celle-ci. Elle encadre les éléments <td> et <th> (équivalent de la balise <td> pour les en têtes) qui permettent de créer des cellules au sein de la ligne courante.

Il est possible d'utiliser les éléments structurels de la table pour encadrer les différentes données :
    - La balise <thead> pour contenir la partie relative aux titres
    - La balise <tbody> pour contenir les données
    - La balise <tfoot> pour d'éventuelles annotations ou remarques complémentaires


Remarque : Lorsque des styles sont appliqués au sein d'un tableau, la priorité d'affichage se fait sur l'élément le plus précis. Dans le cas d'une couleur de fond par exemple, il est possible d'appliquer une couleur de fond pour la table ses ligne et ses cellules. La couleur de fond de la cellule sera alors devant la couleur de de fond de la ligne et elle-même devant la couleur de fond de la table.



Propriétés pour la balise tr :




Propriétés Définition Valeurs
align Alignement horizontal du contenu des cellules inclues sous le tag tr center
char
justify
left
right
bgcolor Couleur d'arrière plan de la ligne.
Déprécié, il faut employer le style CSS "background-color"
#hexa
Couleur
rgb(v,v,v)
char Spécifie un caractère sur lequel s'effectuera l'alignement du contenu des cellules.
Propriété non supportée par la plupart des navigateurs
caractère
charoff Indique le nombre de caractères à partir duquel se fera l'alignement par rapport au caractère spécifié dans l'attribut "char"
Propriété non supportée par la plupart des navigateurs
valeur
valign Alignement vertical du contenu des cellules inclues sous le tag tr baseline
bottom
middle
top


Exemple d'utilisation de la balise tr :





Déclaration d'une table avec quelques lignes :

<table rules="all" frame="box" style="text-align:center; line-height:20px;">
   <tr style="height:20px;">
      <td style="width:20px;">1</td>
      <td style="width:20px;">2</td>
      <td style="width:20px;">3</td>
   </tr>
   <tr style="height:20px;">
      <td>4</td><td>5</td><td>6</td>
   </tr>
   <tr style="height:20px;">
      <td>7</td><td>8</td><td>9</td>
   </tr>
</table>


Exemple d'utilisation de rowspan et colspan (et priorité des styles) :

<table cellpadding="5px" cellspacing="0px" style="border:solid 1px black;background-color:lightgrey; text-align:center;">
   <tr style="background-color:midnightblue; color:white;">
      <th style="width:140px;">Titre</th>
      <th style="width:140px;">Titre</th>
   </tr>
   <tr>
      <td>Valeur</td>
      <td>Valeur</td>
   </tr>
   <tr>
      <td colspan="2" style="background-color:lightsteelblue;">Cellule avec colspan</td>
   </tr>
   <tr style="background-color:darkkhaki;">
      <td rowspan="2" style="background-color:lightsteelblue;">Cellule avec rowspan</td>
      <td>Valeur</td>
   </tr>
   <tr style="background-color:darkkhaki;">
      <td>Valeur</td>
   </tr>
   <tr>
      <td style="background-color:black; color:white;">Valeur</td>
      <td style="background-color:black; color:white;">Valeur</td>
   </tr>
</table>



Déclaration d'une table avec quelques lignes :

123
456
789




Exemple d'utilisation de rowspan et colspan (et priorité des styles) :

Titre Titre
Valeur Valeur
Cellule avec colspan
Cellule avec rowspan Valeur
Valeur
Valeur Valeur