Beranda / Koding

Cara Membuat Judul Tabel HTML dengan Tag Caption

Oleh AneIqbal
membuat judul tabel di html

Tabel HTML yang sudah kita buat sebelumnya di tutorial Tutorial Tabel HTML: Cara Membuat Tabel Header Kolom di Tabel HTML, dapat 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.

membuat judul tabel di html

 Barangkali Anda tertarik baca:
- Tutorial Tabel HTML: Cara Membuat Struktur Tabel di Tabel HTML
- Tutorial Tabel HTML: Cara Membuat Group Kolom Tabel di Tabel HTML untuk Memberi Style ke Kolom dengan Cepat
- Tutorial Tabel HTML: Cara Mengatur Lebar Banyak Kolom Tabel HTML dengan Cepat dan Mudah

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 >> Tutorial Tabel HTML: Cara Membuat Struktur Tabel di Tabel HTML