HTML caption tag | belajar <caption> element

HTML caption tag | belajar <caption> element

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.

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.

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
 <!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