简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel HTML > le corps du texte

Balise THhead en HTML

WBOY
Libérer： 2024-09-04 16:30:21
original
1190 Les gens l'ont consulté

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 1st 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
    Derniers numéros
    Conversion automatique PX en erreur REM  <style>html {   taille de police : calc(100vw / 3,75);      }body {    taille de la...
    Depuis 2024-04-16 09:34:16
    0
    0
    4687
    La page ne peut soudainement plus extraire le CSS ou le bootstrap Je suis donc en train de développer une page, j'en ai fait une partie hier et ça a très bi...
    Depuis 2024-04-06 21:58:04
    0
    1
    800
    Comment résoudre le mystérieux espace vide en bas de page en CSS J'essaie de créer une page Web simple en utilisant Bootstrap et D3, mais je ne sais pas co...
    Depuis 2024-04-06 20:22:15
    0
    1
    454
    Comment utiliser les composants Laravel avec des espaces réservés paresseux Livewire Je souhaite ajouter le squelette de mon composant Laravel dans un espace réservé livewire3...
    Depuis 2024-04-06 20:02:10
    0
    2
    543
    Méthode de niveau supérieur pour remplacer une chaîne par du code HTML (généré à partir d'un tableau) Étant donné une chaîne comme celle-ci...$htmlPattern="Usernameis:#name#andusercompany...
    Depuis 2024-04-06 17:40:41
    0
    2
    410
    Rubriques connexes
    Plus>
    Recommandations populaires
    Tutoriels populaires
    Plus>
    Tutoriels associés
    Recommandations populaires
    Derniers cours
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！
    éléments, utilisez l'attribut