Rumah > Artikel > hujung hadapan web > Teg Kapsyen dalam HTML

Teg Kapsyen dalam HTML

WBOYasal: 2024-09-04 16:21:02902semak imbas

Teg kapsyen dalam HTML digunakan dengan jadual. Ia digunakan untuk mewakili tajuk jadual. teg digunakan tepat selepas teg

. Seseorang hanya boleh menggunakan satu tag kapsyen pada satu masa. Dengan bantuan CSS, seseorang boleh memuatkan untuk membuat baris jadual dan

dengan jadual dalam format reka bentuk web responsif.

tag digunakan dalam badan jadual. Ia digunakan sebagai teg pertama selepas tag. ialah gabungan teg yang berbeza seperti

. Antara tag ini

teg adalah penting semasa membuat jadual , yang digunakan untuk membuat kepala jadual,

adalah untuk membuat lajur jadual.

Sintaks:

Mari lihat sintaks sebenar untuk mentakrifkan teg Kapsyen dalam kod HTML:

<caption>title text</caption>

Seperti yang ditunjukkan di atas kod

tag yang disertakan dalam tag. Ia akan memberikan tajuk kepada jadual anda. Selepas itu, keseluruhan data jadual akan dipaparkan di bawah kapsyen ini.

Senarai Teg Kapsyen dalam HTML

: Berikan kapsyen pada meja
: tag disertakan dengan

tag

: Untuk membuat kepala jadual, lajur & baris

: Untuk menetapkan penjajaran kapsyen.

Mengapa kami menggunakan Tag Kapsyen dalam HTML?

Setiap kali kita akan mentakrifkan beberapa data ke dalam format jadual dengan menggunakan jadual.
Jadi, menunjukkan data ini dalam jadual dengan beberapa tajuk unik adalah moto utama pengguna. Tajuk jenis ini dipaparkan dengan bantuan teg dalam HTML.
Ini disertakan di antara teg permulaan dan penamat

, yang diletakkan selepas teg . Satu jadual mesti mempunyai satu tag kapsyen dalam badan jadual.

Menggunakan Teg Kapsyen dalam HTML

Seperti sebelum ini, kami membincangkan bahawa teg kapsyen digunakan dengan teg Jadual. Ia digunakan dengan atribut yang berbeza seperti atribut biasa, atribut Global dan atribut acara.

Sekarang kita akan melihat cara atribut ini membantu dengan kerja tag kapsyen:

1. Jajar: Atribut ini digunakan dengan beberapa nilai untuk menjajarkan kapsyen anda dengan merujuk kepada jadual. Nilai yang disertakan di dalamnya seperti: kiri, kanan, atas dan bawah.

2. Atribut global: Atribut global dalam HTML disokong oleh

tag.

kunci akses: Elemen ini berfungsi sebagai pintasan untuk mengaktifkan atau memfokus pada beberapa elemen tertentu.
dir: Ia digunakan untuk memberi arah yang betul kepada teks dalam kandungan elemen.
kelas: nama kelas digunakan untuk mentakrifkan CSS kepada elemen tertentu dalam HTML. Seseorang boleh menggunakan satu atau dua nama kelas untuk elemen tertentu dan memberi mereka sifat CSS.
boleh diedit kandungan: Atribut ini digunakan untuk menentukan sama ada seseorang boleh mengedit atau tidak dalam elemen kandungan tertentu.
boleh diseret: Ia digunakan untuk menentukan sama ada elemen yang diberikan boleh diseret atau tidak oleh pengguna.
dropzone: Atribut ini berkaitan dengan atribut boleh seret. Ia digunakan untuk menyalin atau mengalihkan elemen apabila ia jatuh ke lokasi tertentu.
id: id kepada elemen digunakan untuk mentakrifkan nama pengenalan unik kepada elemen tertentu.
lang: Atribut ini dalam tag yang digunakan untuk menentukan bahasa yang kandungannya ditulis. ejaan secara tatabahasa atau
Semakan ejaan: Atribut ini menyatakan bahawa unsur disemak dengan ejaan dan tatabahasanya.
gaya: Ini ialah atribut yang sangat penting yang digunakan dalam teg kapsyen untuk menyediakan sifat CSS sebaris kepada elemen.
terjemah: atribut paling penting untuk memberikan butiran elemen seperti sama ada ia boleh diterjemahkan atau tidak.

3. Atribut acara: HTML tag mengendalikan pelbagai atribut acara juga, ia adalah seperti berikut:

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:

Teg Kapsyen dalam 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:

Teg Kapsyen dalam 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:

Teg Kapsyen dalam 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.

Atas ialah kandungan terperinci Teg Kapsyen dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html define for while format Error using class internal Attribute Property Event copy this location column table td tr th kind

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Meta Tag dalam HTMLArtikel seterusnya：Meta Tag dalam HTML

Artikel berkaitan

Lihat lagi