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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
body {
font-family: "verdana",arial,sans-serif;
font-size: 13px;
}
.table {
width: 100%;
border-collapse: collapse;
}
.table th, .table td {
padding: 8px;
border: 1px solid #c7c7c7;
}
</style>
</head>
<body>
<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>
</body>
</html>
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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
body {
font-family: "verdana",arial,sans-serif;
font-size: 13px;
}
code {
color:red;
}
.table {
width: 100%;
border-collapse: collapse;
}
.table th, .table td {
padding: 8px;
border: 1px solid #c7c7c7;
}
/* css caption */
caption {
padding-top: .75rem;
padding-bottom: .75rem;
color: #5f82bb;
caption-side: top;
font-weight: bold;
}
.caption-left {
text-align: left;
}
.caption-right {
text-align: right;
}
</style>
</head>
<body>
<p>Perhatikan nama <code>class</code> pada element <code>caption</code> dan cek pada bagian css</p>
<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>
</body>
</html>
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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
body {
font-family: "verdana",arial,sans-serif;
font-size: 13px;
}
code {
color:red;
}
.table {
width: 100%;
border-collapse: collapse;
}
.table th, .table td {
padding: 8px;
border: 1px solid #c7c7c7;
}
/* css caption */
caption {
padding-top: .75rem;
padding-bottom: .75rem;
color: #5f82bb;
text-align: left; /* value : left, right */
font-weight: bold;
}
.caption-top {
caption-side: top;
}
.caption-bottom {
caption-side: bottom;
}
</style>
</head>
<body>
<p>Perhatikan nama <code>class</code> pada element <code>caption</code> dan cek pada bagian css</p>
<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>
</body>
</html>
Attributes :
| Attibute | Value | Deskripsi |
|---|---|---|
align | leftrighttopbottom | 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;
}