Accueil    HTML    Balise TBODY
 



balise tbody  Balise TBODY : Corps du tableau html

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


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



La balise <tbody> est utilisée au sein d'un tableau html pour mieux structurer ses données. Elle est utilisée conjointement aux balises <thead> et <tfoot>, chacun de ces éléments regroupant spécifiquement des types de données de la table :

   - Le tag <thead> regroupe les informations d'en-tête (en général les titres des colonnes)
   - Le tag <tbody> contient les données à proprement parlé.
   - Le tag <tfoot> réuni les informations relatives au pied de page (des références, remarques ou légendes par exemple)

Ces éléments sont structurels et ne modifient donc pas l'apparence et le rendu de la table. Pour modifier son rendu, il faut utiliser les styles CSS. Le style appliqué à l'élément tbody s'appliquera à toutes les lignes.
D'autre part lorsque ces éléments sont utilisés, il faut respecter un ordre de déclaration spécifique : la partie thead en premier lieu suivi de la partie tfoot et enfin le bloc tbody (Le navigateur doit pouvoir afficher la partie basse tfoot avant d'avoir reçu l'ensemble des lignes du bloc principal tbody).
Des exemples sont disponibles sur les pages de présentation des balises <table> et <td>.



Remarque : on peut imaginer que ces balises permettent de créer par exemple un tableau fixe avec un scroll dans le bloc tbody, mais cela reste très difficile et dépendant du navigateur à moins d'utiliser d'autres balises et certaines propriétés CSS. Dans l'exemple qui suit, une possibilité de réaliser cet effet est décrite.




Propriétés pour la balise tbody :




Propriétés Définition Valeurs
align Alignement horizontal du contenu des cellules inclues sous le tag tbody
déprécié, appliquer le style css text-align pour un rendu similaire
center
char
justify
left
right
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 tbody
déprécié, appliquer le style css vertical-align pour un rendu similaire
baseline
bottom
middle
top


Exemple d'utilisation de la balise tbody :





Utilisation d'une div avec le style "overflow: auto" pour afficher la barre de défilement :
(On crée une colonne pour la prise en compte de la barre de défilement verticale)


<table cellspacing="0" cellpadding="0" style="border:solid 1px black; font-family:verdana; font-size:12px;">
  <thead>
    <tr style="background-color:lightgrey; height:20px;">
      <th style="width:120px;">Titre 1</th>
      <th style="width:120px;">Titre 2</th>
      <th style="width:18px;"></th>
    </tr>
  </head>
  <tfoot>
    <tr style="background-color:lightgrey; text-align:center;">
      <td colspan="2">Informations complémentaires...<br/>Remarques...</td>
      <td></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td colspan="3">
        <div style="height:100px; overflow:auto; border-top:solid 1px black; border-bottom:solid 1px black;">
          <table cellspacing="0" cellpadding="0" style="color:midnightblue; font-family:verdana; font-size:12px; text-align:center;">
            <tr><td style="width:120px;">donnée 1</td><td style="width:120px;">donnée 2</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td></tr>
            <tr><td>donnée 1</td><td>donnée 2</td></tr>
          </table>
        </div>
      </td>
    </tr>
  </tbody>
</table>



Utilisation d'une div avec le style "overflow: auto" pour afficher la barre de défilement :

Titre 1 Titre 2
Informations complémentaires...
Remarques...
donnée 1donnée 2
donnée 1donnée 2
donnée 1donnée 2
donnée 1donnée 2
donnée 1donnée 2
donnée 1donnée 2
donnée 1donnée 2
donnée 1donnée 2
donnée 1donnée 2
donnée 1donnée 2
donnée 1donnée 2
donnée 1donnée 2
donnée 1donnée 2