;用于创建表行和 | 用于创建表格列。
语法：
- 让我们看看在 HTML 代码中定义 Caption 标签的实际语法：
<caption>title text</caption>
- 如上代码标签包含在
中；标签。它将为您的表格提供标题。之后，整个表格的数据将显示在该标题下方。
HTML 中的标题标签列表
- <标题> ：为表格添加标题
- ：用
括起来的标签标签
-
|
|
：创建表头、列和行
- ：设置标题对齐方式。
为什么我们在 HTML 中使用标题标签？
- 每当我们要使用表格将一些数据定义为表格格式时。
- 因此，在具有独特标题的表中显示这些数据是用户的主要座右铭。这种标题是借助 来显示的。 HTML 中的标签。
- 它包含在 的开始和结束标签之间，该标签位于
标签之后。一张表格在表格主体中必须有一个标题标签。
HTML 中标题标签的工作
如前所述，我们讨论了标题标签与表格标签一起使用。它与不同的属性一起使用，如公共属性、全局属性和事件属性。
现在我们将了解这些属性如何有助于标题标签的工作：
1。 Align：此属性与一些值一起使用，用于将标题与表格对齐。其中包含的值如下：左、右、上、下。
2。全局属性：HTML 中的全局属性由
支持。标签。
-
accesskey：此元素用作激活或关注某些特定元素的快捷方式。
-
dir: 用于为元素内容中的文本提供正确的方向。
-
class： 类名用于将 CSS 定义为 HTML 中的特定元素。可以为特定元素使用一两个类名，并赋予它们 CSS 属性。
-
contenteditable: 此属性用于定义是否可以在给定内容元素中进行编辑。
-
draggable: 用于定义给定元素是否可以被用户拖动。
-
dropzone: 该属性与draggable属性相关。它用于在元素放置到特定位置时复制或移动元素。
-
id: 元素的 id 用于定义特定元素的唯一标识名称。
-
lang: 中的此属性；标签用于定义编写内容所用的语言。按语法拼写或
-
拼写检查： 此属性表明元素经过拼写和语法检查。
-
style:这是标题标签中使用的一个非常重要的属性，用于为元素提供内联 CSS 属性。
-
翻译：最重要的属性，用于提供元素的详细信息，例如是否可以翻译。
3。事件属性： HTML
标签也处理各种事件属性，它们如下：
-
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.
|
