#40 Membuat judul tabel menggunakan tag caption pada HTML
pada tutorial ini kita akan belajar membuat judul tabel menggunakan tag caption pada html. sebelumnya kita telah mengetahui struktur dasar dalam membuat tabel html, namun tabel tersebut belum ada judulnya.
Deskripsi
tag caption adalah tag yang digunakan untuk menentukan judul didalam HTML.
tag <caption> jarang digunakan karena banyak yang tidak tahu bahwa HTML telah menyediakan tag khusus untuk membuat judul tabel.
Baca juga: membuat garis horizontal pada HTML
bahkan seringkali terutama yang masih belajar html menggunakan judul tabel dengan tag <h2> atau <h3>. padahal secara semantik atau fungsinya, penggunaan tag <caption> lebih tepat untuk sebuah tabel.
secara default judul berada bagian atas tabel dengan posisi ditengah, tetapi kita bisa mengubah posisinya menggunakan properti CSS.
Cara penulisan sintaks tag caption
tag <caption> ditulis seperti dibawah ini.
<caption> judul tabel </caption>Code language: HTML, XML (xml)tag caption ditulis pada turunan pertama dari tag <table> sebelum elemen lainnya. penulisan tag caption hanya ada satu judul per tabel.
untuk atribut sebelumnya ada yang namanya atibut “align” pada tag <caption>, untuk versi HTML5, atribut ini sudah tidak disupport lagi dan sebaiknya ditinggalkan.
Contoh penggunaan tag <caption>
<!DOCTYPE html>
<html>
<head>
<title> membuat judul tabel dengan tag caption pada html </title>
</head>
<body>
<table style="width:100%" border="1">
<caption>Penjualan aksesoris</caption>
<thead>
<tr>
<th>Bulan</th>
<th>Penjualan</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mei</td>
<td>100.000</td>
</tr>
<tr>
<td>Juni</td>
<td>200.000</td>
</tr>
</tbody>
<tfoot style="text-align:center">
<tr>
<td>Jumlah</td>
<td>300.000</td>
</tr>
</tfoot>
</table>
</body>
</html>Code language: HTML, XML (xml)hasilnya
Pengaturan CSS default
Secara default tag caption ada di posisi bagian atas dan ditengah tabel dengan nilai default css sebagai berikut.
caption {
display: table-caption;
text-align: center;
}Code language: CSS (css)Browser Support
dibawah ini merupakan dukungan (support) dari beberapa browser.
| Elemen | Chrome | Safari | Firefox | Opera | IE |
| <caption> | Ya | Ya | Ya | Ya | Ya |
Pencarian di thohirdev:
- belajar membuat judul tabel html
- tag caption di html5
- fungsi dari tag caption
- atribut align yang tidak didukung html 5