HTML caption Tag

HTML caption Tag - belajar html <caption>, element <caption> mempunyai definisi sebagai judul dari sebuah table. dengan menggunakan element <caption> kita dapat dengan mudah membuat judul - judul dari table html yang kita buat.

Dalam Penggunaanya element <caption> diletakkan didalam element <table> dan dituliskan secara langsung sebelum element lainnya, hal tersebut agar menegaskan bahwa element <caption> yang disematkan sebagai judul dari sebuah table.

Dalam penulisan element <caption> hanya di perbolehkan satu element saja per table. Secara default posisi tampilan element <caption> akan menempilakan teks di tengah-tengah table pada bagian atas. Tetapi dengan memasukan CSS hal tersebut dapat dirubah.

Jika ingin merubah posisi element <caption> dapat memasukan CSS text-align dengan value left atau right dan CSS caption-side dengan value top atau bottom.

Contoh 1 html element <caption> :

<table class="table">
<caption>Data siswa</caption>
<tbody>
<tr>
 <th>Nama</th>
 <th>Umur</th>
 <th>L/P</th>
 <th>Nilai</th>
</tr>
<tr>
 <td>Anton</td>
 <td>8 tahun</td>
 <td>L</td>
 <td>7</td>
</tr>
<tr>
 <td>Cantik</td>
 <td>9 tahun</td>
 <td>P</td>
 <td>9</td>
</tr>
</tbody>
</table>

Contoh 2 html element <caption>

Contoh berikut untuk mengatur posisi html <caption> dikiri atau dikanan.

<h2>Demo posisi kiri</h2>

<table class="table">
<caption class="caption-left">Data siswa</caption>
<tbody>
<tr>
 <th>Nama</th>
 <th>Umur</th>
 <th>L/P</th>
 <th>Nilai</th>
</tr>
<tr>
 <td>Anton</td>
 <td>8 tahun</td>
 <td>L</td>
 <td>7</td>
</tr>
<tr>
 <td>Cantik</td>
 <td>9 tahun</td>
 <td>P</td>
 <td>9</td>
</tr>
</tbody>
</table>

<h2>Demo posisi kanan</h2>

<table class="table">
<caption class="caption-right">Data siswa</caption>
<tbody>
<tr>
 <th>Nama</th>
 <th>Umur</th>
 <th>L/P</th>
 <th>Nilai</th>
</tr>
<tr>
 <td>Anton</td>
 <td>8 tahun</td>
 <td>L</td>
 <td>7</td>
</tr>
<tr>
 <td>Cantik</td>
 <td>9 tahun</td>
 <td>P</td>
 <td>9</td>
</tr>
</tbody>
</table>

Contoh 3 html element <caption>

Contoh berikut untuk mengatur posisi html <caption> atas atau bawah.

<h2>Demo posisi atas</h2>

<table class="table">
<caption class="caption-top">Data siswa</caption>
<tbody>
<tr>
 <th>Nama</th>
 <th>Umur</th>
 <th>L/P</th>
 <th>Nilai</th>
</tr>
<tr>
 <td>Anton</td>
 <td>8 tahun</td>
 <td>L</td>
 <td>7</td>
</tr>
<tr>
 <td>Cantik</td>
 <td>9 tahun</td>
 <td>P</td>
 <td>9</td>
</tr>
</tbody>
</table>

<h2>Demo posisi bawah</h2>

<table class="table">
<caption class="caption-bottom">Data siswa</caption>
<tbody>
<tr>
 <th>Nama</th>
 <th>Umur</th>
 <th>L/P</th>
 <th>Nilai</th>
</tr>
<tr>
 <td>Anton</td>
 <td>8 tahun</td>
 <td>L</td>
 <td>7</td>
</tr>
<tr>
 <td>Cantik</td>
 <td>9 tahun</td>
 <td>P</td>
 <td>9</td>
</tr>
</tbody>
</table>

Attributes :

Attibute	Value	Deskripsi
align	left right top bottom	Menentukan arah posisi Attribute ini tidak berlaku lagi pada penggunaan HTML5.

Global Attributes:

Element <caption> mencakup Global Attributes HTML.

Event Attributes:

Element <caption> mencakup Event Attributes HTML.

Browser Support :

Desktop

Chrome	Ya
Safari	Ya
Firefox	1
Opera	Ya
IE	Ya
Edge	Ya

Mobile

Android Webview	Ya
Chrome Android	Ya
Edge Mobile	Ya
Firefox Android	4
Opera Android	Ya
iOs Safari	Ya
Samsung Internet	Ya

Default CSS :

Browser yang support dengan element <caption>, biasanya mempunyai nilai default :

caption { 
    display: table-caption;
    text-align: center;
}