Cara Membuat Judul Tabel HTML dengan Tag Caption

Sebelumnya, kita sudah bahas cara membuat tabel header HTML. Kali ini kita akan bahas cara membuat judul tabel HTML dengan tag caption. Ingin tahu bagaimana caranya? Silakan simak panduan AneIqbal berikut sampai akhir.

Tabel HTML yang sudah kita buat sebelumnya bisa kita tambahkan judul di atasnya. HTML menyediakan tag khusus untuk membuatnya.

Tagnya yaitu <caption>. Letaknya setelah tag pembuka untuk membuat tabel yakni tag <table>. Hasilnya, judul tabel akan tampil di atas tengah tabel tersebut.

Markicob, gan. Mari kita coba.

Ketik kode HTML seperti ini.

<!DOCTYPE html>
<html>
  <head>
    <title>Membuat tabel header di HTML</title>
  </head>
  <body>
    <table border="1" cellpadding="1" cellspacing="1">
      <caption>Daftar Pelajar Beserta Hobinya</caption>
      <tr>
        <th>No.</th>
        <th>Nama</th>
        <th>Hobi</th>
      </tr>
      <tr>
        <td>1.</td>
        <td>Ane</td>
        <td>Baca buku</td>
      </tr>
      <tr>
        <td>2.</td>
        <td>Iqbal</td>
        <td>Maen bola</td>
      </tr>
    </table>
  </body>
</html>

Simpan. Lalu jalankan dengan web browser.

aneiqbal-tutorial-tabel-html10
judul tabel dengan caption

Judul tabel akan muncul di atas tengah dan menyesuaikan lebarnya dengan lebar tabel. Karena tabel di atas hanya memiliki lebar yang kecil (pengaruh panjang teks datanya) dan judul tabelnya melebihi lebar tabel, maka judul tabelnya ditampilkan menjadi dua baris.

Tag <caption> ini jarang digunakan. Kebanyakan, tag heading-lah (antara <h1> sampai <h6>) yang digunakan untuk membuat judul tabel. Karena, lebih mengoptimalkan dalam SEO (Search Engine Optimization).

Selanjutnya >> Cara Membuat Struktur Tabel HTML.

 

Share yuk, ke:

Leave a Comment