HTML - Headers & Caption

Selamat datang, para pengembang web yang sedang berkembang! Hari ini, kita akan mendalamkan dunia yang menarik dari header dan caption HTML. Sebagai seseorang yang telah mengajar hal ini selama tahun tahun, saya bisa memberitahu Anda bahwa menguasai elemen ini akan membuat tabel Anda terlihat profesional dan teratur. Jadi, mari kita mulai!

Syntax

Sebelum kita masuk ke dalam hal-hal yang mendetail, mari kita bicarakan tentang sintaks yang kita akan gunakan. Dalam HTML, kita menggunakan tag tertentu untuk menentukan header dan caption untuk tabel kita. Ini adalah ringkasan cepat:

Tag	Deskripsi
<thead>	Menentukan grup header dalam tabel
<th>	Menentukan sel header dalam tabel
<caption>	Menentukan caption untuk tabel

Jangan khawatir jika ini tampak seperti sup abjad saat ini. Kita akan membongkar hal ini secara berkelanjutan, dan segera Anda akan menggunakan tag ini seperti seorang ahli!

Contoh Header dan Caption HTML

Mari kita mulai dengan contoh sederhana untuk melihat bagaimana tag ini bekerja dalam praktek.

<table>
<caption>Buku Favorit Saya</caption>
<thead>
<tr>
<th>Judul</th>
<th>Penulis</th>
<th>Tahun</th>
</tr>
</thead>
<tbody>
<tr>
<td>To Kill a Mockingbird</td>
<td>Harper Lee</td>
<td>1960</td>
</tr>
<tr>
<td>1984</td>
<td>George Orwell</td>
<td>1949</td>
</tr>
</tbody>
</table>

mari kitauraikan ini:

1. Kita mulai dengan tag <table> untuk membuat tabel kita.
2. Tag <caption> memberikan judul untuk tabel: "Buku Favorit Saya".
3. Bagian <thead> berisi baris header kita.
4. Dalam <thead>, kita memiliki <tr> (baris tabel) dengan tiga sel <th> (header tabel).
5. Bagian <tbody> berisi baris data kita, masing-masing dengan sel <td> (data tabel).

Ketika dirender, tabel ini akan memiliki baris header dengan teks tebal, membuatnya mudah dipahami apa yang dipresentasikan oleh setiap kolom.

Kombinasi dengan '' dan ' '

Sekarang, mari kita tingkatkan dan menambahkan footer ke tabel kita menggunakan tag <tfoot>.

<table>
<caption>Penjualan Buku</caption>
<thead>
<tr>
<th>Judul</th>
<th>Penulis</th>
<th>Penjualan</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Great Gatsby</td>
<td>F. Scott Fitzgerald</td>
<td>25,000,000</td>
</tr>
<tr>
<td>The Catcher in the Rye</td>
<td>J.D. Salinger</td>
<td>65,000,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">Total Penjualan:</th>
<td>90,000,000</td>
</tr>
</tfoot>
</table>

Dalam contoh ini:

1. Kita menambahkan bagian <tfoot> setelah <tbody>.
2. Baris footer menggunakan <th colspan="2"> untuk membuat sel header yang melintasi dua kolom.
3. Sel terakhir di footer menunjukkan penjualan total.

Struktur ini membantu memisahkan konten utama (<tbody>) dari informasi ringkasan (<tfoot>), membuat tabel lebih terorganisir dan mudah dibaca.

Perbedaan antara dan

Sekarang, saya sering melihat siswa bingung antara <thead> dan <th>, jadi mari kita klarifikasi ini:

• <thead>: Ini adalah wadah untuk konten header dalam tabel Anda. Itu mengelompokkan informasi header bersama-sama.
• <th>: Ini menentukan sel header individual dalam tabel Anda.

Pertimbangkan <thead> sebagai kotak yang memegang semua informasi header Anda, sedangkan <th> adalah setiap label individual dalam kotak itu.

mari kita lihat ini dalam praktek:

<table>
<thead>
<tr>
<th>Nama</th>
<th>Umur</th>
<th>Negara</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>25</td>
<td>USA</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>Canada</td>
</tr>
</tbody>
</table>

Dalam contoh ini:

1. <thead> mengelilingi seluruh bagian header.
2. Dalam <thead>, kita memiliki satu <tr> (baris tabel).
3. Dalam baris itu, kita memiliki tiga sel <th> untuk header kolom.

Ingat, Anda bisa memiliki beberapa baris dalam <thead> jika perlu, masing-masing berisi sel <th>.

Untuk mengakhiri, mari kita lihat tabel yang menggabungkan semua tag yang kita pelajari:

Tag	Tujuan	Contoh
<table>	Membuat tabel	<table>...</table>
<caption>	Menambahkan judul ke tabel	<caption>My Table</caption>
<thead>	Mengelompokkan konten header	<thead>...</thead>
<th>	Menentukan sel header	<th>Column Name</th>
<tbody>	Mengelompokkan konten body	<tbody>...</tbody>
<tfoot>	Mengelompokkan konten footer	<tfoot>...</tfoot>
<tr>	Membuat baris tabel	<tr>...</tr>
<td>	Membuat sel data standar	<td>Data</td>

Dan itu saja! Anda sekarang dilengkapi dengan pengetahuan untuk membuat tabel yang terstruktur dan mudah dibaca dalam HTML. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba tag ini. Sebelum Anda tahu, Anda akan membuat tabel yang akan membuat analis data bangga!

Credits: Image by storyset