Tutorial Tabel HTML: Cara Membuat Judul Tabel di Tabel HTML dengan Tag Caption

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

Baca juga ya..
Tutorial Tabel HTML: Cara Membuat Tabel Header Kolom di Tabel HTML
PENTING!! 5 Hal yang Dapat Kita Lakukan untuk Membantu Aleppo
Yeeaahh! Indonesia Taklukan Thailand di Pertandingan Final Piala AFF 2016 Leg Pertama dengan Skor 2-1

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



0 Komentar untuk "Tutorial Tabel HTML: Cara Membuat Judul Tabel di Tabel HTML dengan Tag Caption"