の作成に使用される table の作成時に重要です。テーブルの行を作成するための テーブルの列を作成するためのものです。
構文:
HTML コードで Caption タグを定義するための実際の構文を見てみましょう:
<caption>title text</caption>
上記のコードのように、タグをで囲みます。タグ。テーブルにタイトルが付けられます。その後、テーブル全体のデータがこのキャプションの下に表示されます。
HTML のキャプションタグのリスト
: テーブルにキャプションを付けます
: で囲まれたタグタグ
: 表の見出し、列、行を作成するには
: キャプションの配置を設定します。 HTML でキャプション タグを使用する理由
テーブルを使用してデータを表形式に定義する場合。
したがって、このデータを独自のタイトルを付けて表に表示することがユーザーの主なモットーです。この種のタイトルは、 の助けを借りて表示されます。 HTML のタグ。
タグの後ろにあるの開始タグと終了タグで囲まれています。 1 つの表には、表本体に 1 つのキャプション タグが必要です。
HTML におけるキャプションタグの仕組み
前述のように、キャプション タグが Table タグとともに使用されることについて説明しました。これは、共通属性、グローバル属性、イベント属性などのさまざまな属性とともに使用されます。
ここで、これらの属性がキャプション タグの動作にどのように役立つかを見ていきます。
1. Align : この属性は、表を参照してキャプションを位置合わせするために、いくつかの値とともに使用されます。これに含まれる値は、左、右、上、下などです。
2.グローバル属性 : HTML のグローバル属性は
でサポートされています。タグ。
accesskey: この要素は、特定の要素をアクティブにしたり、それに焦点を当てたりするためのショートカットとして機能します。
dir: 要素のコンテンツ内のテキストに適切な方向を与えるために使用されます。
class: クラス名は、HTML 内の特定の要素に CSS を定義するために使用されます。特定の要素に 1 つまたは 2 つのクラス名を使用し、それらに CSS プロパティを与えることができます。
contenteditable: この属性は、特定のコンテンツ要素を編集できるかどうかを定義するために使用されます。
draggable: これは、指定された要素がユーザーによってドラッグ可能かどうかを定義するために使用されます。
dropzone: この属性は、draggable 属性に関連しています。要素を特定の場所にドロップしたときに、要素をコピーまたは移動するために使用されます。
id: 要素の ID は、特定の要素に一意の識別名を定義するために使用されます。
lang: この属性は にあります。コンテンツが記述される言語を定義するために使用されるタグ。文法上のスペルまたは
Spellcheck: この属性は、要素がスペルと文法的にチェックされることを示します。
style: これは、要素にインライン CSS プロパティを提供するためにキャプション タグで使用される非常に重要な属性です。
translate: 翻訳可能かどうかなど、要素の詳細を指定する最も重要な属性。
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.
以上がHTMLのキャプションタグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明： この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
