HTMLのキャプションタグ-htmlチュートリアル-php.cn

HTMLのCaptionタグはテーブルで使用されます。テーブルのタイトルを表すために使用されます。タグは

タグの直後に使用されます。一度に使用できるキャプションタグは 1 つだけです。 CSS を使用すると、

を適合させることができます。レスポンシブ Web デザイン形式のテーブルを使用します。

タグはテーブル本体内で使用されます。これは、

の後の最初のタグとして使用されます。タグ。の作成に使用される 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:

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:

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:

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.

以上がHTMLのキャプションタグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。