HTML - Headers & Caption (ID)

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

Sintaks

Sebelum kita masuk ke detailnya, mari kita bicarakan sintaks yang akan kita gunakan. Dalam HTML, kita menggunakan tag tertentu untuk menentukan header dan caption untuk tabel kita. Berikut adalah penjelasan singkat:

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

Jangan khawatir jika ini terlihat seperti sup abjad saat ini. Kita akan membongkar ini secara bertahap, 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> memberi judul tabel kita: "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.

Menggabungkan dengan '' dan ' '

Sekarang, mari kita tingkatkan dan tambahkan 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 menampilkan 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>, 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> melingkupi seluruh bagian header.
2. Dalam <thead>, kita memiliki <tr> (baris tabel) tunggal.
3. Dalam baris itu, kita memiliki tiga sel <th> untuk header kolom.

Ingat, Anda dapat memiliki beberapa baris di dalam <thead> jika diperlukan, 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 adalah! 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