Pada pertemuan ini kita akan mempelajari Tabel pada HTML. Setelah sebelumnya kita belajar HTML Dasar tentang Gambar, kali ini kita akan belajar HTML Dasar mengenai Tabel. Bagi kalian yang belum bisa sama sekali, jangan khawatir karena Belajar HTML tentang Tabel ini untuk Pemula.
Hasilnya
Yang mana tag <th> merupakan judul / header setiap baris yang mana di bawahnya akan terdapat banyak data yang disebut <td>. Sedangkan <tr> berfungsi untuk mengatur barisnya.
1 px pada contoh diatas merupakan ketebalan dari Border nya. Dapat kalian ganti sesuai keinginan kalian masing-masing.
Kita cukup menambahkan properti CSS yang lain yaitu, border-collapse: collapse.
Dan juga bagi kalian yang belum belajar dan membaca materi sebelumnya mengenai HTML Dasar, kalian dapat membaca nya terlebih dahulu.
Baca Juga -> Belajar HTML Dasar : Gambar Background
Apakah penting Tabel pada HTML itu?
Jawabannya Iya. Karena adanya Tabel memungkinkan kita untuk mengatur data yang ada menjadi baris dan kolom.
Mengapa kita memerlukan Tabel untuk mengatur data atau tulisan? karena dengan Tabel pada HTML, data yang ditampilkan akan menjadi lebih rapi dan enak untuk dibaca.
Agar kalian lebih paham, kita lihat saja contoh Tabel di bawah ini.
Contoh
Dengan tabel seperti diatas, pembaca akan semakin mudah dalam memahami data yang ada. Serta memiliki kesan yang rapi dan dinamis.
Catatan !!! Tabel diatas sudah di beri tambahan CSS, jadi memiliki tampilan yang lebih bagus dari Tabel biasa.
Lalu, bagaimana pembuatan atau pendefinisian Tabel pada HTML?. Kita simak caranya di bawah ini.
Cara Mendefinisikan Tabel pada HTML
Tabel pada HTML didefinisikan dengan tag <table>
Yang mana di dalam tag <table> terdapat beberapa komponen lain seperti <tr>, <td>, dan <th>.
Penjelasan :
1. <tr> merupakan bagian tabel yang mendefiniskan setiap barisnya ( Table Row ).
2. <td> merupakan bagian tabel yang mendefinisikan setiap data nya ( Table Data )
3. <th> merupakan bagian tabel yang mendefinisikan header / judul ( Table Header )
Contoh
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
![]() |
contoh tabel tanpa border / pembatas |
Yang mana tag <th> merupakan judul / header setiap baris yang mana di bawahnya akan terdapat banyak data yang disebut <td>. Sedangkan <tr> berfungsi untuk mengatur barisnya.
Cara Menambahkan Pembatas / Border
Lalu bagaimana cara untuk menambahkan pembatas / border pada tabel tersebut? caranya sangat mudah. Kalian cukup menambahkan properti CSS yang namanya border.
Contoh
table, th, td {
border: 1px solid black;
}
Hasilnya
Atau kalian juga bisa memberikan pembatas / border yang menjadi satu. Tidak banyak seperti tadi. Bagaimana maksudnya? kalian lihat contoh tabel nya saja di bawah ini.
Cara penulisan nya
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Mungkin cukup sekian pembelajaran kita mengenai Belajar HTML Dasar tentang Tabel. Pada artikel selanjutnya kita masih belajar seputar tabel lagi.
Karena jika di lanjutkan di sini akan terlalu panjang hehe. Jadi, materi Tabel pada HTML belum selesai sampai disini ya.
Terima kasih dan sampai jumpa.
Posting Komentar
Silahkan Bertanya atau Beri Tanggapannya, Terima Kasih