Maison > Article > interface Web > Balise de légende en HTML

Balise de légende en HTML

WBOYoriginal: 2024-09-04 16:21:02868parcourir

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

. 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

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:

Balise de légende en HTML

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:

Balise de légende en HTML

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:

Balise de légende en HTML

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!

css html define for while format Error using class internal Attribute Property Event copy this location column table td tr th kind

Déclaration：

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

Article précédent：Balise méta en HTMLArticle suivant：Balise méta en HTML

Articles Liés

Voir plus