Balise de légende en HTML

La balise de légende en HTML est utilisée avec le tableau. Il est utilisé pour représenter le titre du tableau. La balise est utilisée exactement après la balise

. On ne peut utiliser qu’une seule balise de légende à la fois. Avec l'aide de CSS, on peut adapter

avec un tableau au format responsive web design.

la balise est utilisée dans le corps du tableau. Il est utilisé comme première balise après

étiqueter. est une combinaison de différentes balises telles que pour créer des lignes de tableau et

la balise incluse dans étiqueter. Cela donnera le titre à votre table. Après cela, les données entières du tableau seront affichées sous cette légende.

Liste des balises de légende en HTML

• : Donnez une légende au tableau

 : balise entourée de étiquette

 : pour créer un en-tête, une colonne et une ligne de tableau

 : pour définir l'alignement de la légende.

Pourquoi utilisons-nous la balise de légende en HTML ?

• Chaque fois que nous allons définir certaines données au format tabulaire en utilisant un tableau.
• Ainsi, afficher ces données dans un tableau avec un titre unique est la devise principale de l'utilisateur. Ce type de titre est affiché à l'aide du symbole balise en HTML.
• Ceci est placé entre la balise de début et de fin de

, qui est placée après la balise . Un tableau doit avoir une balise de légende dans le corps du tableau.

Fonctionnement de la balise de légende en HTML

Comme précédemment, nous avons expliqué que la balise caption est utilisée avec la balise Table. Il est utilisé avec différents attributs comme les attributs communs, les attributs globaux et les attributs d'événement.

Nous allons maintenant voir comment ces attributs sont utiles pour le fonctionnement de la balise de légende :

1. Align : Cet attribut est utilisé avec certaines valeurs pour aligner votre légende par rapport au tableau. Les valeurs incluses comme : gauche, droite, haut et bas.

2. Attributs globaux : les attributs globaux en HTML sont pris en charge par

étiquette.

• accesskey : Cet élément fonctionne comme un raccourci pour activer ou se concentrer sur certains éléments spécifiques.
• dir : Il est utilisé pour donner la direction appropriée au texte dans le contenu de l'élément.
• classe : les noms de classe sont utilisés pour définir le CSS pour un élément spécifique en HTML. On peut utiliser un ou deux noms de classe pour un élément particulier et leur attribuer des propriétés CSS.
• contenteditable : Cet attribut permet de définir si l'on peut modifier ou non dans un élément de contenu donné.
• draggable : Il est utilisé pour définir si l'élément donné est déplaçable ou non par l'utilisateur.
• dropzone : Cet attribut est lié à l'attribut draggable. Il est utilisé pour copier ou déplacer des éléments lorsqu'ils sont déposés à un emplacement particulier.
• id : l'identifiant de l'élément est utilisé pour définir un nom d'identification unique pour l'élément particulier.
• lang : Cet attribut dans

balise utilisée pour définir la langue dans laquelle le contenu est écrit. orthographe grammaticalement ou

Vérification orthographique : Cet attribut indique que l'élément est vérifié tant au niveau orthographique que grammatical.

style : Il s'agit d'un attribut très important utilisé dans la balise de légende pour fournir une propriété CSS en ligne à l'élément.

translate : attribut le plus important pour donner des détails sur un élément, comme s'il peut être traduit ou non.

3. Attributs de l'événement : HTML

la balise gère également divers attributs d'événement, ils sont les suivants :

• onafterprint: This event triggered successfully once the document gets printed.
• onbeforeprint: This kind of script gets executed before the actual printing of the document.
• onbeforeunload: This script get executed when our document is getting to be unloaded.
• onerror: this event attribute is executed when an error occurs in the document.
• onload: this script generated when the actual loading of the page gets completed.
• onmessage: whenever a message is triggered, this event occurs.

Examples of Caption Tag in HTML

Below given are some examples:

Example #1

Here is an example showing how exactly

tag is going to be used in HTML:

Code:

<head>
<style>
table,
th,
td {
border: 1px solid blue;
}
#emp_details {
font-size:20px;
color:crimson;
font-style:italic;
}
</style>
</head>
<body>
<table>
<caption id="emp_details">Employee Details</caption>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>EmpId</th>
<th>Age</th>
<th>Designation</th>
</tr>
<tr>
<td>Roota</td>
<td>Mittal</td>
<td>9110</td>
<td>32</td>
<td>Marketing Head</td>
</tr>
<tr>
<td>John</td>
<td>Roy</td>
<td>9111</td>
<td>28</td>
<td>Sales Head</td>
</tr>
<tr>
<td>Dinesh</td>
<td>Shetty</td>
<td>9112</td>
<td>43</td>
<td>Developer</td>
</tr>
<tr>
<td>Rucha</td>
<td>Dev</td>
<td>9113</td>
<td>24</td>
<td>Web Developer</td>
</tr>
<tr>
<td>Niks</td>
<td>Raw</td>
<td>9114</td>
<td>45</td>
<td>Tester</td>
</tr>
</table>
</body>

Output:

Example #2

Here is another example showing how exactly

tag is going to be used with align attribute with inline CSS, aligning caption to the left :

Code:

<head>
<style>
table, th, td {
border: 2px solid red;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<caption style="text-align: left; color:dodgerblue;" >
Maharashtra Elections Results</caption>
<tr>
<th>Sr No.</th>
<th>Parties</th>
<th>No of seats</th>
</tr>
<tr>
<td>1</td>
<td>BJP</td>
<td>104</td>
</tr>
<tr>
<td>2</td>
<td>Shiv Sena</td>
<td>56</td>
</tr>
<tr>
<td>3</td>
<td>Nationalist Congress Party</td>
<td>54</td>
</tr>
<tr>
<td>4</td>
<td>Congress</td>
<td>44</td>
</tr>
<tr>
<td>5</td>
<td>Bahujan Vikas Aaghadi</td>
<td>3</td>
</tr>
<tr>
<td>6</td>
<td>Muslimeen Prahar Janshkti party</td>
<td>2</td>
</tr>
</table>
</body>

Output:

Example #3

This is using an example

tag to align the title at the right of the table with internal CSS code:

Code:

<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
.india{
text-align: right;
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<table>
<caption class="india" >State & Capitals</caption>
<tr>
<th>State</th>
<th>Capital</th>
</tr>
<tr>
<td>Maharashtra</td>
<td>Mumbai</td>
</tr>
<tr>
<td>Goa</td>
<td>Panaji</td>
</tr>
<tr>
<td>Assam</td>
<td>Dispur</td>
</tr>
<tr>
<td>Haryana</td>
<td>Chandigarh</td>
</tr>
<tr>
<td>Kerala</td>
<td>Thriuvanthaouram</td>
</tr>
</table>
</body>

Output:

Conclusion- Caption Tag in HTML

From all the above details regarding the caption, the tag explains terms; this is used to give title for the table. The caption is enclosed in between

tag into the table body. It works on different attributes like align attributes, global attributes, as well as some event, attributes to trigger the event on the caption tag.

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!

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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Afficher plus

Article chaud

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour

4 Il y a quelques semaines By DDD

Comment réparer KB5055523 ne parvient pas à s'installer dans Windows 11?

3 Il y a quelques semaines By DDD

Inzoi: Comment postuler à l'école et à l'université

1 Il y a quelques mois By DDD

Comment réparer KB5055518 ne parvient pas à s'installer dans Windows 10?

3 Il y a quelques semaines By DDD

Où trouver la clé du bureau du site dans Atomfall

1 Il y a quelques mois By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7911

15

Tutoriel Java

1652

14

Tutoriel CakePHP

1411

52

Tutoriel Laravel

1303

25

Tutoriel PHP

1248

29

Afficher plus

Related knowledge

Bordure de tableau en HTML Sep 04, 2024 pm 04:49 PM

Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.

Tableau imbriqué en HTML Sep 04, 2024 pm 04:49 PM

Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.

Marge gauche HTML Sep 04, 2024 pm 04:48 PM

Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.

Disposition du tableau HTML Sep 04, 2024 pm 04:54 PM

Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.

Espace réservé d'entrée HTML Sep 04, 2024 pm 04:54 PM

Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.

Liste ordonnée HTML Sep 04, 2024 pm 04:43 PM

Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.

Bouton HTML onclick Sep 04, 2024 pm 04:49 PM

Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.

Déplacer du texte en HTML Sep 04, 2024 pm 04:45 PM

Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.

See all articles

Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！

À propos de nous Clause de non-responsabilité Sitemap

© php.cn All rights reserved

. Parmi ces balises	La balise est importante lors de la création d'un tableau, qui est utilisé pour créer un en-tête de tableau,
sert à créer une colonne de tableau. Syntaxe : Voyons la syntaxe réelle pour définir la balise Caption dans le code HTML : <caption>title text</caption> Comme indiqué ci-dessus, le code