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 | 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;
}