Sebelumnya kita pernah belajar Cara Membuat Tabel Dalam HTML, untuk membuat tabel itu pada dasarnya hanya diperlukan 3 tag saja, yaitu : tag table, tag tr, dan tag td. Nahh sedangkan untuk membuat sebuah tabel yang lebih spesifik atau lebih detail di dalam HTML itu menyediakan tag lain yaitu tag thead, tfoot dan tbody, dimana fungsi tag tersebut adalah untuk membuat bagian bagian tabel, atau lebih tepatnya layout tabel, misalnya kita bisa memisahkan antara kolom tabel header dengan kolom tabel isi dan kolom tabel footer.
Apa manfaat menggunakan tag thead, tfoot dan tbody itu ? Untuk mempermudah kita di dalam pengeditan tabel apalagi kalo kita membuat tabel dengan jumlah kolom banyak dan kita menggunakan 3 tag dasar saja itu sangat memusingkan kita jika kita ingin mengedit tabel tersebut, nahh dengan menggunakan tag thead, tfoot dan tbody kita bisa lebih mudah mengedit antara bagian heading, isi, dan footer.
Supaya bisa lebih mengerti dalam penggunan tag thead, tfoot dan tbody, perhatikan contoh kode berikut ini.
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag thead, tfoot dan tbody dalam Tabel</title>
</head>
<body>
<h3>Belajar Tag thead, tfoot dan tbody dalam Tabel</h3>
<table border="1">
<thead>
<tr>
<th>Judul 1</th>
<th>Judul 2</th>
<th>Judul 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
</tbody>
</table>
</body>
</html>
Nahh pada contoh di atas, kita bisa melihat dengan jelas antara bagian table heading, table body dan table footer. Memang jika kita ingin membuat sebuah tabel, tag ini tidak terlalu diperlukan tetapi jika kita membuat tabel dengan jumlah kolom yang banyak kita sebaiknya menggunakan tag thead, tfoot dan tbody.
Sekian Tutorial Mengenal Tag thead, tfoot dan tbody dalam Tabel HTML semoga tutorial ini bisa bermanfaat dan bisa membantu sobat dalam belajar HTML. Terimakasih
No comments:
Post a Comment