Membuat Tabel Pada HTML
Umumnya saat kalian menampilkan suatu data yang terstruktur dari database, kalian akan menampilkannya dalam bentuk tabel bukan? Maka dari itu, HTML sebagai bahasa markup telah menyediakan elemen table yang bisa digunakan saat kalian ingin membuat tabel.
Sebelum itu, mari kenali terlebih dahulu apa itu tabel. Tabel pada dasarnya digunakan untuk mengelompokkan suatu data secara terstruktur yang terdiri dari baris, kolom dan sel. Baris, kolom dan sel pada suatu tabel ini sangat membantu dalam melihat informasi keterkaitan di dalamnya.
Dari gambar di atas, bisa kalian pahami bahwa sel merupakan pertemuan antara baris dengan kolom. Mau tidak mau kalian harus memahami betul cara membuat tabel karena ini berkaitan erat dengan menampilkan data ketika suatu website sudah terdapat PHP - MySQL.
"Orang sukses akan mengambil keuntungan dari kesalahan dan mencoba lagi dengan cara yang berbeda." – Dale Carnegie
Memahami Elemen HTML dalam Membuat Tabel
Ada beberapa tag HTML dasar dalam membuat tabel yang harus kalian pahami yaitu :
- <table> digunakan untuk mendefinisikan pembuatan tabel
- <tr> digunakan untuk mendefinisikan pembuatan baris pada tabel
- <td> digunakan untuk membuat kolom atau sel di setiap baris pada tabel
Seiring dengan perkembangan dan kebutuhan akan tabel, HTML juga menyediakan elemen-elemen opsional lain dalam pembuatan tabel seperti berikut :
- <th> digunakan untuk mendefinisikan header di dalam tabel
- <thead> digunakan untuk membungkus konten bagian judul atau kepala tabel
- <tbody> digunakan untuk membungkus konten bagian isi atau tubuh dari tabel
- <tfoot> digunakan untuk membungkus konten bagian kaki atau bawah dari tabel
Contoh dan Pembahasan
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
</tr>
</table>
</body>
</html>
Elemen tabel wajib disusun seperti contoh di atas. Tag <td> harus berada di dalam tab <tr>, kemudian tag <tr> harus berada di dalam tag <table>. Perlu kalian ingat, bahwa tag pada tabel semuanya memiliki pasangan, jadi jangan lupa membuat penutup di setiap tag-nya.
Pada contoh code di atas, akan menghasilkan tabel yang terdiri dari 2 baris dan 2 kolom. Sehingga secara otomatis akan menghasilkan 4 buah sel. Salah satu atribut yang digunakan pada contoh tabel di atas adalah border, yang berfungsi untuk memberikan garis tepi suatu tabel. Berikut hasilnya:
