pied en HTML

Comme nous le savons, tfoot en HTML utilise des éléments appelés tableau pour la représentation tabulaire des données. Celui-ci est composé d'éléments tels que , , etc. Parmi eux est l'un des éléments importants du tableau pour afficher la partie récapitulative des colonnes du tableau.

la balise doit être placée après , , balise dans le tableau. On peut afficher cette balise soit avant ou après ou éléments. Chaque fois que plusieurs pages sont disponibles dans le tableau, ces éléments aident l'utilisateur à placer le pied de page du tableau en bas de la page et à faire défiler le contenu du tableau indépendamment.

Syntaxe

Syntaxe pour définir la balise est la suivante :

<table>
<thead>
<tr>….</tr>
</thead>
<tbody>
<tr>….</tr>
<tr>….</tr>
</tbody>
<tfoot>
<tr>
<td>….</td>
</tr>
</tfoot>
</table>

D'après la syntaxe ci-dessus, le texte inclus dans la balise est traité comme un pied de page de tableau. La balise peut inclure un ou plusieurs éléments.

la balise prend en charge différents attributs, voyons-les un par un :

align : Cet attribut permet d'aligner le texte en référence à son contenu.

valign : Ces attributs sont utiles pour aligner le contenu dans l'alignement vertical de son texte.

char : L'un des attributs importants par rapport à La balise est utilisée pour aligner le texte d'une cellule d'en-tête sur son caractère respecté.

Charoff : Il s'agit d'un autre attribut important utilisé pour définir les attributs char. Ces types d'attributs sont définis sous forme numérique.

Nous pouvons décider de la position du balisez en définissant des valeurs comme l'alignement à gauche, au centre de la cellule, à droite de la cellule, insérez ou justifiez un espace0020 particulier autour du contenu textuel, char pour l'alignement du contenu du texte avec un caractère spécial avec un décalage minimal, etc.

Cette balise peut être utilisée avec différentes propriétés CSS sont les suivantes :

text-align : Cette propriété permet d'aligner le texte du pied de page soit à gauche, à droite, à justifier ou à centrer directement à l'aide du contenu du texte.

bgcolor : Pour rendre la cellule du tableau plus attrayante, cette propriété nous aide à définir la couleur comme arrière-plan de la cellule de la colonne.

font-style : On peut donner un style au texte, qui est inclus dans étiqueter. On peut définir la valeur de la police comme normale, italique, initiale, hériter, etc.

font-size : Les utilisateurs peuvent afficher le texte dans différentes tailles à leur guise en utilisant cette propriété de style.

font-weight : On peut décider si son texte doit être en gras ou en italique.

text-transform : Cette propriété permet d'afficher la majuscule du texte ou de contrôler la casse du texte.

text-decoration : Si nous voulons décorer le texte inclus dans balise afin que nous puissions utiliser cette propriété pour la ligne de décoration de texte, le style de décoration de texte, la couleur de décoration de texte, etc.

text-shadow : Cette propriété vous aide à ajouter une ombre au texte.

line-height : Cela aidera à définir la hauteur de la ligne donnée.

espacement des mots : C'est l'une des propriétés importantes pour donner un espace spécifique entre les mots.

Comment fonctionne le HTML sur tfoot ?

L'élément est utilisé avec une combinaison de et qui définira tous les éléments du tableau comme l'en-tête, le pied de page et le corps. Cette balise utilisera un ou plusieurs éléments dans éléments, cela aidera donc à afficher un résumé du contenu du tableau. Il doit être placé en bas du tableau. Le fonctionnement principal du La balise consiste à conserver des données de table volumineuses. Cela permettra à l’utilisateur d’afficher le contenu du tableau de manière indépendante afin qu’il puisse ressentir une meilleure expérience d’utilisation.

Voyons un exemple de la façon dont la balise va fonctionner en HTML :

Exemple :

<table>
<thead>
<tr>
<th>Emp_ID<th>
<th>Name<th>
<th>Designation<th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>John</td>
<td>Developer</td>
</tr>
<tr>
<td>112</td>
<td>Krishna</td>
<td>Tester</td>
</tr>
<tr>
<td>113</td>
<td>Danish</td>
<td>Project Manager</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total Employee</td>
<td> 3 </td>
</tr>
</tfoot>
</table>

Donc, dans l'exemple ci-dessus, le la balise affichera le nombre total d’employés du tableau.

Exemples de tfoot en HTML

L'exemple de tfoot en HTML est présenté ci-dessous :

Exemple n°1

Ici, on montre un exemple du Budget-2020b utilisant la fonction étiquette :

Code :

<!DOCTYPE html>
<html>
<head>
<style>
thead {
background-color:cadetblue;
color: #fff;
}
tbody {
background-color: lightcyan;
}
table {
border-collapse: collapse;
border: 2px solid rgb(180, 180,180);
}
td,
th {
border: 1px solid rgb(200, 200, 200);
padding: 5px 5px;
}
td {
text-align: left;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Decreasing Prices</th>
<th >Increasing Prices</th>
</tr>
</thead>
<tbody>
<tr>
<td>SOYA PROTEIN</td>
<td>CONSUMERS HAVE TO SHELL MORE FOR CHEMICALS</td>
</tr>
<tr>
<td >SOYA FIBRE</td>
<td>AUTO PARTS</td>
</tr>
<tr>
<td >ALCOHOLIC BEVERAGES</td>
<td>FANS, TABLEWARE </td>
</tr>
<tr>
<td >SKIMMED MILK </td>
<td>KITCHENWARE PRICES TO </td>
</tr>
<tr>
<td >FUSE, CHEMICALS, PLASTICS</td>
<td>MEDICAL EQUIPMENT COSTLIER</td>
</tr>
<tr>
<td >LIGHTWEIGHT-COATED PAPER </td>
<td>FURNITURE </td>
</tr>
</tbody>
<tfoot>
<tr>
<th>CHEAPER PRODUCTS</th>
<th>EXPENSIVE PRODUCTS</th>
</tr>
</tfoot>
</table>
</body>
</html>

Sortie :

Exemple n°2

Ici, son tag dès que finitions :

Code :

<!DOCTYPE html>
<html>
<head>
<title>HTML tfoot Tag</title>
<style>
table{
border-collapse: collapse;
}
thead,tfoot{
background-color:darkgoldenrod;
color:white;
padding:5px;
}
tbody{
background-color:azure;
padding:5px;
}
</style>
</head>
<body>
<h4>tfoot in HTML</h4>
<table border="1" >
<thead>
<tr>
<th>Subject</th>
<th>Marks</th>
<th>Grades</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Total Marks</th>
<th>647</th>
<th>A+ </th>
</tr>
</tfoot>
<tbody>
<tr>
<td>English</td>
<td>90</td>
<td>A+</td>
</tr>
<tr>
<td>Math</td>
<td>85</td>
<td>A</td>
</tr>
<tr>
<td>Science</td>
<td>80</td>
<td>A</td>
</tr>
<tr>
<td>History</td>
<td>75</td>
<td>B</td>
</tr>
<tr>
<td>Social Science</td>
<td>75</td>
<td>B</td>
</tr>
<tr>
<td>History</td>
<td>72</td>
<td>B</td>
</tr>
<tr>
<td>Geography</td>
<td>95</td>
<td>A+</td>
</tr>
<tr>
<td>Biology</td>
<td>75</td>
<td>B</td>
</tr>
</tbody>
</table>
</body>
</html>

Sortie :

Example #3

General Example on tfoot tag.

Code:

<!DOCTYPE html>
<title>tfoot tag</title>
<style>
table, td, th {
border: 1px solid black;
padding: 3px;
text-align: center;
}
table {
background-color:lightgray;
}
</style>
<table>
<thead>
<tr><th>Department</th><th>Number of People</th></tr>
</thead>
<tbody>
<tr>
<td>Principle</td>
<td>1</td>
</tr>
<tr>
<td>Supervisor</td>
<td> 4 </td>
</tr>
<tr>
<td>Teaching staff</td>
<td>200</td>
</tr>
<tr>
<td>Non-Teaching staff</td>
<td>20</td>
</tr>
<tr>
<td>Peon</td>
<td>15</td>
</tr>
</tbody>
<tfoot>
<tr><th>Total People</th><th>236</th></tr>
</tfoot></table></html>

Output:

Conclusion

From all the above information, we can say that is one of the important tags in the table, which helps to display the table summary at the bottom of the table. It’s always necessary to put tag at ends, so it will help the browser to render the table footer correctly.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!