HTML caption tag | belajar <caption> element

HTML Fadlullah Fadul December 3, 2018

Referensi Belajar HTML caption tag. Tutorial dan panduan mengenai element <caption>...</caption> yang digunakan untuk memberi judul sebuah tabel. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <caption>.

Deskripsi
Penjelasan HTML caption

caption dapat diartikan dengan judul, baik itu judul halaman, bab dan lain sebagainya.

HTML element <caption> digunakan memberi judul sebuah HTML table (<table> element ).

Dalam penggunaannya, element <caption> harus ditulis didalam element <table> secara langsung sebelum element lainnya, sehingga caption (judul) tersebut terletak diatas sebuah tabel dan berada ditengah-tengah secara default, akan tetapi, dapat diubah dengan CSS text-align (untuk teks rata kiri atau kanan) dan caption-side (untuk judul terletak di atas atau bawah tabel). Silahkan, lihat contoh lengkapnya di bawah.

Global Attributes
Atribut Secara Global (Keseluruhan)

<caption> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Silahkan, lihat referensi mengenai HTML Global Attribute

Event Attributes
Atribut event (Peristiwa)

<caption> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Silahkan, lihat referensi mengenai HTML Events Attribute

Example
Contoh HTML <caption> element

HTML 
<table>
  <caption>Daftar Belanja</caption>
  <tr>
    <th>Lauk-Pauk</th>
    <th>Sayuran</th>
  </tr>
  <tr>
    <td>Ikan Mas</td>
    <td>Wortel</td>
  </tr>
</table>

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
editor 
 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo HTML caption</title>
    <style>
    /* contoh 2 */
    caption.caption2 {
    text-align: right;
    }

    /* contoh 3 */
    caption.caption3 {
    caption-side: bottom;
    }

    </style>
  </head>
  <body>
    <h3>Contoh 1: Caption dengan style default browser.</h3>
    <table border="1">
      <caption>Daftar Belanja</caption>
      <tr>
        <th>Lauk-Pauk</th>
        <th>Sayuran</th>
      </tr>
      <tr>
        <td>Ikan Mas</td>
        <td>Wortel</td>
      </tr>
    </table>
    <hr />
    <h3>Contoh 2: Caption dengan style rata kanan.</h3>
    <table border="1">
      <caption class="caption2">Daftar Belanja</caption>
      <tr>
        <th>Lauk-Pauk</th>
        <th>Sayuran</th>
      </tr>
      <tr>
        <td>Ikan Mas</td>
        <td>Wortel</td>
      </tr>
    </table>
    <hr />
    <h3>Contoh 3: Caption terletak dibawah tabel.</h3>
    <table border="1">
      <caption class="caption3">Daftar Belanja</caption>
      <tr>
        <th>Lauk-Pauk</th>
        <th>Sayuran</th>
      </tr>
      <tr>
        <td>Ikan Mas</td>
        <td>Wortel</td>
      </tr>
    </table>
  </body>
</html>
SHARE
Previous Article Next Article