Utiliser les balises thead, tfoot, et tbody
Utiliser les balises thead, tfoot, et tbody
-
Objectifs
- ِConnaitre les balises thead, tfoot, et tbody .
-
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)
-
thead
- L’élément <thead> définit un ensemble de lignes qui définit l’en-tête des colonnes d’un tableau.
-
tfoot
- L’élément HTML <tfoot permet de définir un ensemble de lignes qui résument les colonnes d’un tableau.
-
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>.
-
Règles à respecter
-
Exemple
-
Applications
-
App01
-
Enoncé
- Créez une page HTML avec un titre approprié « exercice01.html« .
- Créez une table avec une légende (
caption) indiquant « Rapport de Vente de Produits ». - Utilisez l’élément
<thead>pour créer l’en-tête de la table. L’en-tête devrait contenir les colonnes suivantes : - Utilisez l’élément
<tbody>pour ajouter au moins cinq lignes de données de vente de produits. Chaque ligne doit contenir les informations suivantes : - Les ventes totales (calculées en multipliant le prix unitaire par la quantité vendue).
- Utilisez l’élément
<tfoot>pour afficher les totaux suivants : - Le nombre total de produits vendus (somme de la quantité vendue pour tous les produits).
- Les ventes totales globales (somme des ventes totales pour tous les produits).
- Consignes supplémentaires :
- Utilisez des attributs HTML pour améliorer la lisibilité et l’accessibilité de la table.
- Ajoutez une ligne de séparation entre l’en-tête, le corps et le pied de la table pour une meilleure organisation visuelle.
-
Solution
-
App02
-
Enoncé
- Créer une table HTML pour afficher des données de ventes trimestrielles d’une entreprise.
- Créez une table avec une légende (caption) indiquant « Rapport de Ventes Trimestrielles ».
- Utilisez l’élément
<thead>pour créer l’en-tête de la table. L’en-tête devrait contenir les colonnes suivantes :-
« Trimestre »
« Revenus »
« Coûts »
« Bénéfices » - Utilisez l’élément
<tbody>pour ajouter des données pour au moins quatre trimestres. Chaque ligne doit contenir les informations suivantes : - Le nom du trimestre (par exemple, « T1 » pour le premier trimestre).
- Les revenus générés.
- Les coûts encourus.
- Les bénéfices réalisés.
- Utilisez l’élément
<tfoot>pour afficher les totaux suivants : - Le total des revenus sur l’année.
- Le total des coûts sur l’année.
- Le total des bénéfices sur l’année.
- Consignes supplémentaires :
- Utilisez des attributs HTML pour améliorer la lisibilité et l’accessibilité de la table.
- Ajoutez une ligne de séparation entre l’en-tête, le corps et le pied de la table pour une meilleure organisation visuelle.
- Incluez une question à la fin pour réfléchir aux performances de l’entreprise en fonction des données affichées.
-
Solution
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).
<!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ô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>
-
« Nom du Produit »
« Catégorie »
« Prix unitaire »
« Quantité vendue »
« Ventes totales »
-
Le nom du produit.
La catégorie du produit.
Le prix unitaire du produit.
La quantité vendue.
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<center>
<table border="1" summary="Rapport de Vente de Produits">
<thead bgcolor="yellow" >
<tr>
<th>Nom du Produit</th>
<th>Catégorie</th>
<th>Prix unitaire</th>
<th>Quantité vendue</th>
<th>Ventes totales</th>
</tr>
</thead>
<tfoot>
<tr bgcolor="silver">
<td colspan="3">Total de produits vendus :</td>
<td>445</td>
<td>XXXX</td>
</tr>
<tr bgcolor="gray">
<td colspan="4">Ventes totales globales :</td>
<td>XXXX.XX</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Produit 1</td>
<td>Électronique</td>
<td>199.990</td>
<td>50</td>
<td>9999.500</td>
</tr>
<tr>
<td>Produit 2</td>
<td>Vêtements</td>
<td>49.99</td>
<td>75</td>
<td>3749.25</td>
</tr>
<tr>
<td>Produit 3</td>
<td>Alimentation</td>
<td>3.99</td>
<td>200</td>
<td>798.00</td>
</tr>
<tr>
<td>Produit 4</td>
<td>Meubles</td>
<td>299.99</td>
<td>20</td>
<td>5999.80</td>
</tr>
<tr>
<td>Produit 5</td>
<td>Jouets</td>
<td>14.99</td>
<td>120</td>
<td>1798.80</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<center>
<h1>Rapport de Ventes Trimestrielles</h1>
<table border="1" width="60%">
<caption>Rapport de Ventes Trimestrielles</caption>
<thead bgcolor="gray" >
<tr>
<th>Trimestre</th>
<th>Revenus</th>
<th>Coûts</th>
<th>Bénéfices</th>
</tr>
</thead>
<tbody>
<tr>
<td>T1</td>
<td>25000</td>
<td>18000</td>
<td>7000</td>
</tr>
<tr>
<td>T2</td>
<td>28000</td>
<td>20000</td>
<td>8000</td>
</tr>
<tr>
<td>T3</td>
<td>26000</td>
<td>19000</td>
<td>7000</td>
</tr>
<tr>
<td>T4</td>
<td>29000</td>
<td>21000</td>
<td>8000</td>
</tr>
</tbody>
<tfoot>
<tr bgcolor="silver">
<td colspan="1">Total annuel</td>
<td>108000</td>
<td>78000</td>
<td>32000</td>
</tr>
</tfoot>
</table>
</center>
</body>
</html>