;用於建立表格行和 | 用於建立表格列。
文法：
- 讓我們來看看在 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.
|
