HTML 中的標題標籤與表格一起使用。它用於表示表的標題。 標籤剛好在
標籤之後使用。一次只能使用一個標題標籤。借助 CSS，我們可以將 放入標題中。帶有響應式網頁設計格式的表格。
標籤在表體內使用。它用作
之後的第一個標籤。標籤。 是不同標籤的組合，例如 |
| 。在這些標籤中 |
有標籤在建立表格時很重要，它用於建立表頭， |
;用於建立表格行和 | 用於建立表格列。
文法：
- 讓我們來看看在 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 <caption> 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 <caption> 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 <caption> 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 <caption> 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.
|
以上是HTML 中的標題標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章！
