Accueil    HTML    Balise TFOOT
 



balise tfoot  Balise TFOOT : Pied de page du tableau html

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


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




La balise <tfoot> est utilisée au sein d'un tableau html pour mieux structurer ses données. Elle est utilisée conjointement aux
balises <thead> et <tbody>, 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 tfoot s'appliquera à toutes les lignes qu'il contient.
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 tfoot :




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


Exemple d'utilisation de la balise tfoot :





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;">
      <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