Assalamu’alaikum Wr. Wb
Pengantar
Tag caption digunakan untuk judul table di dalam HTML.
Harapan saya teman-teman dapat mempraktekan dan lebih baik lagi memahami materi kali ini dengan catatan di ulang pelajaran yang sudah dipraktekan agar tidak lupa. Teman-teman mulai dari sini harus membaca dengan teliti agar tidak salah memahami materinya. Semoga sukses dan berhasil, Amin.
Praktik HTML
Pada praktik kali kita akan membahas caption, mari kita mulai praktiknya, struktur kode HTML
Contoh:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Alami Computer</title>
</head>
<body>
<h3>Belajar table menggunakan tag caption element di HTML</h3>
<table border="2">
<caption>Caption Table disini</caption>
<tr>
<td>No</td>
<td>Nama</td>
<td>Asal</td>
</tr>
<tr>
<td>1</td>
<td>Fatah</td>
<td>Jakarta</td>
</tr>
<tr>
<td>2</td>
<td>Fatih</td>
<td>Kuningan</td>
</tr>
<tr>
<td>3</td>
<td>Fitrah</td>
<td>Bandung</td>
</tr>
</table>
</body>
</html>
 |
| Gambar 1 kode-caption-table |
 |
| Gambar 2 hasil kode-caption-table |
Sekarang kita buat menggunakan css, sebagai berikut, contoh kodenya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Alami Computer</title>
<style>
table {
border: 4px solid red;
width: 150px;
height: 100px;
}
tr {
padding: 3px;
border: 2px solid greenyellow;
}
td {
padding: 3px;
border: 2px solid gold;
}
caption {
caption-side: top;
}
</style>
</head>
<body>
<h3>Belajar membuat table menggunakan caption di HTML</h3>
<table>
<caption>Caption Table disini</caption>
<tr>
<td>No</td>
<td>Nama</td>
<td>Asal</td>
</tr>
<tr>
<td>1</td>
<td>Fatih</td>
<td>Jakarta</td>
</tr>
<tr>
<td>2</td>
<td>Fitrah</td>
<td>Kuningan</td>
</tr>
<tr>
<td>3</td>
<td>Fatah</td>
<td>Bandung</td>
</tr>
</table>
</body>
</html>
 |
| Gambar 3 kode caption menggunakan css |
 |
| Gambar 4 hasil kode caption menggunakan css |
Kesimpulan
YouTube: Alami Computer
Website: www.alamicomputer.id
Instagram: chaerullah.fadli
Daftar Pustaka: Tim Riset Alami Computer