Balise THhead en HTML-tutoriel HTML-php.cn

Le L'élément ou la balise est utilisé conjointement avec tag et balise, définissant respectivement l’en-tête, le pied de page et le corps du tableau. Le Les éléments définissent l'en-tête d'un tableau HTML. Pour définir une ligne ou un ensemble de lignes qui créent les en-têtes de colonnes d'un tableau, nous utilisons l'attribut élément. Autrement dit, cet élément regroupe le contenu de l'en-tête dans un tableau HTML. Il entoure une ou plusieurs lignes entières et les classe comme en-tête de tableau. Dans cette rubrique, nous découvrirons la balise THead en HTML.

Un en-tête de tableau se compose d'une ou plusieurs lignes contenant des informations sur les colonnes ou les données du corps du tableau.

Comment utiliser Élément en HTML ?

Le L'élément spécifie la partie en-tête du tableau HTML. Cette assure ainsi une position en tant qu'enfant immédiat d'un élément de table,

. Avant d'utiliser un appareil, ou élément. Le peut apparaître après tout élément élément le cas échéant, et élément. Le L'élément contiendra au moins une ligne de données entourée de élément.

Syntaxe

<thead>
<tr>
</tr>
</thead>

Copier après la connexion

Bien sûr, comme indiqué ci-dessus, comme tout autre élément HTML,

L'élément fonctionne également par paires, la balise d'ouverture, a un partenaire, une balise de fermeture, .

Exemples de balise THhead en HTML

Considérons l'exemple suivant :

Exemple n°1

Code :

<html>
<head>
<title>HTML thead Tag</title>
</head>
<table style = "width:100%" border = "1">
<thead>
<tr>
<td colspan = "4" align="center">This is the <b>header</b> section of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4" align="center">This is the <b>footer</b> section of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td colspan="4">...more rows of data here...</td>
</tr>
<tbody>
<tbody>
<tr>
<td colspan="4">...</td>
</tr>
<tr>
<td colspan="4">...more rows of data here...</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
</table>
<html>

Copier après la connexion

Sortie :

Balise THhead en HTML

Notez que si deux lignes sont nécessaires pour l'en-tête de votre tableau, les deux

les données d'éléments peuvent être ajoutées à un seul élément. Essayez de ne pas ajouter deux sections d’éléments pour une table. Observez un exemple ci-dessous, avec deux lignes sous la section d'en-tête :

Exemple n°2

Code :

<table style = "width:100%" border = "1">
<thead>
<tr>
<th colspan="2">Header 1 Row 1</th>
<th colspan="2">Header 2 Row 1</th>
</tr>
</thead>
<thead>
<tr>
<th>Header 1 Row 2</th>
<th>Header 2 Row 2</th>
<th>Header 3 Row 2</th>
<th>Header 4 Row 2</th>
</tr>
</thead>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>

Copier après la connexion

Sortie :

Balise THhead en HTML

Exemple #3

Code :

<table  style = "width:100%" border = "1">
<thead>
<tr>
<th colspan="2">Header 1 Row 1</th>
<th colspan="2">Header 2 Row 1</th>
</tr>
<tr>
<th>Header 1 Row 2</th>
<th>Header 2 Row 2</th>
<th>Header 3 Row 2</th>
<th>Header 4 Row 2</th>
</tr>
</thead>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>

Copier après la connexion

Sortie :

Balise THhead en HTML

Observez que, bien que les deux codes ci-dessus génèrent le même résultat et utilisent des codes

les éléments de deux en-têtes sont gérés par certains navigateurs. Cependant, il s'agit toujours d'une erreur sémantique qui ne doit pas être utilisée dans une programmation appropriée, et elle sera également déclenchée comme un signal d'alarme par les services de validation HTML.

Exemple n°4

Voyons un autre exemple ci-dessous. Dans l'exemple suivant, nous avons créé une table avec un corps de table composé de quatre lignes de données. Un en-tête se compose d'une ligne de données définie sur une couleur d'arrière-plan à l'aide de CSS. Le , ou

n'affecte pas l'apparence par défaut d'un tableau HTML ; ainsi, un peu d'aide avec CSS suffirait.

Code :

<body>
<table border="3">
<caption>Time Table</caption>
<thead>
<tr>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
</tr>
</thead>
<tbody>
<tr>
<td>Science</td>
<td>Maths</td>
<td>Hindi</td>
<td>Hindi</td>
<td>English</td>
</tr>
<tr>
<td>English</td>
<td>Hindi</td>
<td>Maths</td>
<td>Social</td>
<td>Science</td>
</tr>
<tr>
<td colspan="10" align="center">Lunch</td>
</tr>
<tr>
<td>Science</td>
<td>English</td>
<td>Maths</td>
<td>Hindi</td>
<td>Social</td>
</tr>
</tbody>
</table>
</body>

Copier après la connexion

Sortie :

Balise THhead en HTML

Attributs de la balise THhead en HTML

Le L'élément HTML prend en charge certains attributs supplémentaires suivants.

align : Cet attribut aligne le contenu d'un fichier

élément et tout ce qu'il contient. Il utilise gauche, droite, centre, justifier et char comme valeur.

char : Cet attribut spécifie l'alignement sur le

contenu de l'élément lorsque l'attribut align est défini sur char.

valign : Il spécifie l'alignement vertical du contenu à l'intérieur du

élément. Il utilise le haut, le milieu, le bas ou la ligne de base comme valeurs.

charoff : Cet attribut spécifie un décalage par rapport au 1^st caractère tel que spécifié avec un attribut char ; c'est-à-dire que le moment où aligner est défini sur char.

bgcolor : Il permet de définir la couleur d'arrière-plan de chaque cellule à l'intérieur de

élément.

Conclusion

Nous avons vu comment un

L'élément identifie les étiquettes de colonnes et non les données du tableau, contenant les informations sur les en-têtes et les transmettant aux navigateurs, aidant ainsi la technologie avec le contenu et sa signification.

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!

Étiquettes associées：

html html5 HTML Tutorial HTML Properties HTML tags

source：php

Article précédent：Balise de temps HTML Article suivant：Balise de jeu de cadres HTML

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur