HTMLのキャプションタグ

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

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

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

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

の後の最初のタグとして使用されます。タグ。 の作成に使用される table の作成時に重要です。テーブルの行を作成するための

タグをで囲みます。タグ。テーブルにタイトルが付けられます。その後、テーブル全体のデータがこのキャプションの下に表示されます。

HTML のキャプションタグのリスト

• : テーブルにキャプションを付けます
• :

で囲まれたタグタグ

: 表の見出し、列、行を作成するには

HTML でキャプション タグを使用する理由

• テーブルを使用してデータを表形式に定義する場合。
• したがって、このデータを独自のタイトルを付けて表に表示することがユーザーの主なモットーです。この種のタイトルは、

: キャプションの配置を設定します。

の助けを借りて表示されます。 HTML のタグ。

タグの後ろにある

Spellcheck: この属性は、要素がスペルと文法的にチェックされることを示します。

style: これは、要素にインライン CSS プロパティを提供するためにキャプション タグで使用される非常に重要な属性です。

translate: 翻訳可能かどうかなど、要素の詳細を指定する最も重要な属性。

3.イベント属性: HTML

の開始タグと終了タグで囲まれています。 1 つの表には、表本体に 1 つのキャプション タグが必要です。

HTML におけるキャプションタグの仕組み

前述のように、キャプション タグが Table タグとともに使用されることについて説明しました。これは、共通属性、グローバル属性、イベント属性などのさまざまな属性とともに使用されます。

ここで、これらの属性がキャプション タグの動作にどのように役立つかを見ていきます。

1. Align: この属性は、表を参照してキャプションを位置合わせするために、いくつかの値とともに使用されます。これに含まれる値は、左、右、上、下などです。

2.グローバル属性: HTML のグローバル属性は

でサポートされています。タグ。

• accesskey: この要素は、特定の要素をアクティブにしたり、それに焦点を当てたりするためのショートカットとして機能します。
• dir: 要素のコンテンツ内のテキストに適切な方向を与えるために使用されます。
• class: クラス名は、HTML 内の特定の要素に CSS を定義するために使用されます。特定の要素に 1 つまたは 2 つのクラス名を使用し、それらに CSS プロパティを与えることができます。
• contenteditable: この属性は、特定のコンテンツ要素を編集できるかどうかを定義するために使用されます。
• draggable: これは、指定された要素がユーザーによってドラッグ可能かどうかを定義するために使用されます。
• dropzone: この属性は、draggable 属性に関連しています。要素を特定の場所にドロップしたときに、要素をコピーまたは移動するために使用されます。
• id: 要素の ID は、特定の要素に一意の識別名を定義するために使用されます。
• lang: この属性は

にあります。コンテンツが記述される言語を定義するために使用されるタグ。文法上のスペルまたは

タグはさまざまなイベント属性も処理します。それらは次のとおりです:

• 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:

<style>
table,
th,
td {
border: 1px solid blue;
}
#emp_details {
font-size:20px;
color:crimson;
font-style:italic;
}
</style>

Employee Details

Firstname	Lastname	EmpId	Age	Designation
Roota	Mittal	9110	32	Marketing Head
John	Roy	9111	28	Sales Head
Dinesh	Shetty	9112	43	Developer
Rucha	Dev	9113	24	Web Developer
Niks	Raw	9114	45	Tester

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:

<style>
table, th, td {
border: 2px solid red;
border-collapse: collapse;
}
</style>

Maharashtra Elections Results

Sr No.	Parties	No of seats
1	BJP	104
2	Shiv Sena	56
3	Nationalist Congress Party	54
4	Congress	44
5	Bahujan Vikas Aaghadi	3
6	Muslimeen Prahar Janshkti party	2

Output:

Example #3

This is using an example

tag to align the title at the right of the table with internal CSS code:

Code:

<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
.india{
text-align: right;
color: blue;
font-weight: bold;
}
</style>

State & Capitals

State	Capital
Maharashtra	Mumbai
Goa	Panaji
Assam	Dispur
Haryana	Chandigarh
Kerala	Thriuvanthaouram

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 コードで Caption タグを定義するための実際の構文を見てみましょう: <caption>title text</caption> 上記のコードのように、

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