Hallo teman-teman kembali lagi pada tutorial dumet school, kali ini kita akan belajar fungsi dari tag caption Pada HTML, nah untuk teman-teman yang belum tau fungsi dari tag caption ini, saya akan jelaskan terlebih dahulu fungsinya.
Fungsi dari tag caption itu sendiri adalah untuk memberikan judul pada sebuah table ataupun memberikan keterangan pada sebuah table pada HTML.
Memang sih tag ini jarang digunakan mengingat kita juga depan memberikan tag H1 dan yang lainnya karna dapat meningkatkan nilai judul pada sebuah table, tapi tidak ada salahnya kita belajar atau sekedar tau tentang fungsi tag yang satu ini.
Oke kita coba langsung praktek saja, silahkan teman-teman buat sebuah file dan ketikan script berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<table border="1"> <caption>Table 1.1 Murid</caption> <tr> <th>Nama</th> <th>Paket Kursus</th> </tr> <tr> <td>Rizal</td> <td>Web Master</td> </tr> <tr> <td>Bayu</td> <td>Grafik Design</td> </tr> <tr> <td>Indah</td> <td>Digital Marketing</td> </tr> </table> |
Nah, script di atas saya memberikan tag caption sebagai judulnya, jika di save maka hasilnya akan seperti berikut :
Nah, hasilnya judulnya akan default berada di atas.
Sekarang coba kita atur sedikit dengan css properties caption-side, coba tambahkan script css berikut:
|
1 2 3 4 5 |
<style> caption { caption-side: bottom; } </style> |
Fungsi dari properties caption-side adalah untuk mengatur letak dari tag caption, jika di save maka hasilnya akan seperti berikut :
Judulnya akan berada di bawah,karna kita beri nilai bottom.
Oke cukup sekian untuk artikel kali ini, semoga bermanfaat,
Terimakasih.