tRikSonic
Tema

HTML caption Tag

Terakhir diperbarui : 24 Mei 2018 - 22.58
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.
background html
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 :

AttibuteValueDeskripsi
alignleft
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

ChromeYa
SafariYa
Firefox1
OperaYa
IEYa
EdgeYa

Mobile

Android WebviewYa
Chrome AndroidYa
Edge MobileYa
Firefox Android4
Opera AndroidYa
iOs SafariYa
Samsung InternetYa

Default CSS :

Browser yang support dengan element <caption>, biasanya mempunyai nilai default :
caption { 
    display: table-caption;
    text-align: center;
}
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.