Membuat tabel HTML mungkin agak membingungkan buat programmer pemula. Stukturnya nggak terlalu intuitif, tapi sebetulnya kalau udah paham, kamu bisa membuatnya dengan sangat cepat. Yang membuat tabel HTML menarik adalah adanya standar yang sama untuk semua platform. Di manapun kamu membuat dan menjalankannya, scriptnya selalu sama dan konsisten.
Untuk membuat tabel HTML, kamu sebenernya nggak perlu web server. Kamu bisa langsung aja save filenya ke ekstensi HTML, terus jalanin di browser kamu ya. Meskipun begitu, kalau kamu sudah punya web server dan mau menjalankannya lewat web server, bisa banget sob. Kamu bisa cek postingan ChrisTechno tentang bagaimana caranya membuat web server di komputer kamu sendiri : Memulai PHP Programming Menggunakan XAMPP.
Mulai Membuat Tabel HTML Pertamamu
Untuk lebih mudah memahaminya, mari kita buat tabel HTML yang paling gampang dulu ya. Kamu bisa pakai text editor favorit kamu, atau kalau masih belum tahu editor apa yang mau dipakai, cek postingan ChrisTechno yang ini ya : Yuk, Pakai Visual Studio Code buat Memulai Karir Programming Kamu.
<table>
<tr>
<th>Employee ID</th>
<th>Employee Name</th>
<th>Address</th>
</tr>
<tr>
<td>00001</td>
<td>Justine Remy</td>
<td>Germany</td>
</tr>
<tr>
<td>00002</td>
<td>Scott Gordie</td>
<td>China</td>
</tr>
</table>Save as filenya dengan ekstensi .html, misalnya htmltable.html. Kamu bisa langsung membukanya dengan web browser yang sering kamu pakai. Misalnya dengan cara klik kanan filenya –> Open With –> pilih web browser kamu.
Mungkin kamu kurang puas dengan tampilan tabelnya ya, karena memang stylingnya belum diapa apain, tapi begitulah bentuk tabel HTML polos. Namun kita bisa lihat kalau baris pada bagian title sudah punya tipe text bold. Ini karena kita membuatnya menggunakan tag <th>. Untuk benar – benar memahami ini, coba kita lihat scriptnya sekali lagi ya. Tag <tr> yang berarti table row atau baris, selalu konsisten di manapun, baik pada header maupun body tabel. Tag <td> yang berarti table cell, menandakan bahwa kita menempatkan cellnya sesuai script tersebut, berurutan dari kiri ke kanan.
Merge Cells (Menggabungkan Cells) pada Tabel HTML
Sekarang kita naik ke pembahasan yang sedikit lebih advanced dari tabel HTML. Kamu bisa memodifikasi baris judulnya biar kayak fitur merge cells yang ada di Microsoft Excel. Sekarang kita lihat contoh di bawah ini.
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
<table>
<tr>
<th colspan="3">Employee Data</th>
<th rowspan="2">Joined Date</th>
</tr>
<tr>
<th>Employee ID</th>
<th>Employee Name</th>
<th>Address</th>
</tr>
<tr>
<td>00001</td>
<td>Justine Remy</td>
<td>Germany</td>
<td>Aug 29 2001</td>
</tr>
<tr>
<td>00002</td>
<td>Scott Gordie</td>
<td>China</td>
<td>Sep 01 2015</td>
</tr>
</table>Tag <style> hanya untuk menambahkan garis tabel biar mudah dilihat ya.
Buat yang baru pertama kali banget bikin tabel HTML, mungkin sedikit agak membingungkan melihat cara melakukan merge ini ya. Tapi ayo kita coba sekali lagi lihat script di atas. Ada 4 tag <tr> yang menandakan bahwa ada 4 baris di tabel ini. Baris pertama hanya terdiri dari ‘Employee Data’ dan ‘Joined Date’, ini karena di tabel yang kita inginkan, memang cuma ada 2 cell aja di baris pertamanya. Field ‘Joined Date’ digabung ke baris kedua, sehingga nggak ada kolom ke empat di baris keduanya ya. Biar semakin mudah untuk memahaminya, berikut pointer penting tentang contoh di atas.
- Setiap tag <th> dan <td> harus dibungkus dengan tag <tr>, buat nandain cell tersebut ada di baris yang mana.
- Merging atau menggabungkan cell caranya sedikit berbeda dengan di Excel, yaitu menggunakan rowspan atau colspan, jadi kamu harus tahu di mana tepatnya baris atau kolom yang harus dimerge.
- Jumlah kolom <td> atau <td> untuk setiap barisnya harus tepat dan konsisten setiap barisnya. Kamu harus lihat rowspan dan colspan dari baris sebelum dan sesudahnya ya, kalau nggak, tabelnya bisa rusak loh.
- Kamu bisa aja pakai HTML table generators yang ada di luaran sana, tapi nggak disarankan ya, karena pada akhirnya kamu perlu bikin tabel yang dinamis, misalnya yang value nya diambil dari database.
Kesimpulan
Membuat tabel di HTML adalah salah satu hal yang paling penting di dunia programming. Untuk menguasainya, kamu mulai aja dari yang simple banget. Kalau kamu udah terbiasa dengan semua tag dan attribute yang ada di tabel HTML, termasuk colspan dan rowspan, gampang banget buat bikin tabel yang lebih advanced. Postingan ini cuma nunjukin penggunaan yang basic dari tabel HTML. Kamu bisa bikin stylingnya lebih bagus lagi, tabel yang datanya dinamis, dan banyak trik lanjutan yang menarik buat dipelajarin.
