Utiliser les balises thead, tfoot, et tbody

Utiliser les balises thead, tfoot, et tbody

  1. Objectifs

    • ِConnaitre les balises thead, tfoot, et tbody .




  2. Introduction

    • Les lignes de la table peuvent être regroupées dans une section en-tête de la table, une section pied de la table, et une ou plusieurs sections corps de table, en utilisant respectivement les éléments THEAD, TFOOT et TBODY.
    • Cette organisation permet aux utilisateurs de gérer le défilement des corps de la table, indépendamment de l’en-tête et du pied de la table.
    • On peut organiser les lignes du tableau en groupes. On peut ainsi définir un groupe d’entête, un groupe de bas de tableau et plusieurs groupe de corps de tableau.
    • Ce regroupement peut être utile pour l’impression d’une longue table, les informations placées dans l’en-tête et le pied de la table peuvent se répéter sur chacune des pages contenant les données de la table.
    • <thead> regroupe les informations d’en-tête (en général les titres des colonnes)
    • <tbody> contient les données à proprement parlé.
    • <tfoot> réuni les informations relatives au pied de page (des références, remarques ou légendes par exemple)
  3. thead

    • L’élément <thead> définit un ensemble de lignes qui définit l’en-tête des colonnes d’un tableau.
  4. tfoot

    • L’élément HTML <tfoot permet de définir un ensemble de lignes qui résument les colonnes d’un tableau.
  5. tbody

    • L’élément HTML <tbody permet de regrouper un ou plusieurs éléments <tr> afin de former le corps d’un tableau HTML <table>.
  6. Règles à respecter

    • Chacun des trois éléments THEAD, TFOOT et TBODY représente donc un groupe de lignes et il faut absolument retrouver au moins un élément <tr> dans chaque groupe.

      Pour utiliser ces éléments , 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).

  7. Exemple

    • <!doctype html>
      <html>
      <head>
      <mete http-equiv="content-type" content="text/html;charset=UTF-8"/>
      <title>Tableau avec en-tête et pied </title>
      <link rel="shortcut icon" type="images/x-icon" href=""/>
      </head>
      <body > 
      <h3>Statistiques des contr&ocirc;les radars sur autoroute NT</h3>
      <table border="1" cellspacing="0" width="60%"›
      <thead bgcolor="gray"› 
       <tr>
        <th> Vitesse mesurée en km/h </th>
        <th> Nombre de Véhicules </th>
        <th> Sanctions opérées</th>
       </tr> 
      </thead> 
      <tfoot bgcolor="green"›  
        <tr>
             <th> Vitesse mesurée en km/h </th> 
             <th> Nombre de Véhicules </th> 
              <th> Sanction opérée</th>
        </tr>
      </tfoot>
      <tbody bgcolor="blue"› 
        <tr>
           <td> de 90 à 110 km/h </td> <td> 325 </td><td> NON </td>
         </tr>
       <tr> 
         <td> de 110 à 130 km/h </td> <td> 564 </td> <td> NON </td> 
        </tr> 
         <tr> 
           <td> de 130 à 140 km/h </td> <td> 323 </td><td> NON </td> 
         </tr> 
      </tbody> 
      <tbody bgcolor="yellow"› 
         <tr> 
            <td> de 140 à 160 km/h </td> <td> 223 </td><td> Amende </td> 
          </tr>
          <tr> <td> de 160 à 190 km/h </td> <td> 87 </td><td> Retrait </td> 
          </tr> 
      </tbody> 
      </table> 
      </body> 
      </html> 
      


Abonnez vous à notre chaîne YouTube gratuitement