Belajar Materialize #5 : Membuat Tabel Materialize

Belajar Materialize #5 : Membuat Tabel Materialize – Halo semua selamat datang di kodingin.com : Situs Belajar Materialize bahasa indonesia. Kodingin.com membahas tutorial materialize secara lengkap.

Kali ini ssaya akan membagikan tutorial mengenai cara membuat tabel di materialize. Di Materialize ada beberapa variasi desain sebauh tabel yang menarik.

Penggunaan desain tabel pada materialize dengan mamnfaatkan class-class yang ada untuk di terapkan dengan mudah.

Belajar Materialize #5 : Cara Membuat Tabel Materialize yang keren

Pengguaan tabel sering digunakan untuk menampilkan sebuah data dari database MySQ, sehingga data yang kita tampilkan lebih terstruktur.

Dengan adanya tabel pada tag HTML yang nantinya di tampilkan pada halaman website membuat tampilan desain data lebih rapi dan lebih enak di lihat.

Pengertian Tabel pada Tag HTML

Tabel merupakan gabungan antara kolom dan baris, dimana di antara keduanya digunakan untuk meletekkan suatu data, baik data dari database ataupun tidak.

Komponen Tabel HTML

Sebelum melakukan implementasi pembuatan tabel dengan materialize sebaiknya kenali dulu komponen yang ada di dalam tabel Tag HTML.

  •  <table>, digunakan untuk memulai / pembuka tag tabel.
  • <tr>, digunakan untuk membuat baris baru pada tabel HTML
  • <td>, digunakan untuk meletakkan data pada tabel HTMK.

Selain itu juga ada 3 komponen tabel lainnya yaitu

  • <thead>, digunakan uuntuk membuat tabel bagian header.
  • <tbody>, digunakan untuk membuat tabel bagian body.
  • <tfoot>, dogunakan untuk membuat tabel bagian footer.

Contoh Penggunaan Tabel

Sebelum menambahkan class materialize pada tabel tag HTML, kenali dulu contoh penggunaan tabel pada tag HTML.

Contoh diatas membuat tabel dengan HTML secara dasar yang sudah meliputi beberapa komponan yang sudah saya sebutkan di atas.

Membuat Tabel dengan Materialize

Ketika kita memanggil file CSS materialize maka tabel yang kita buat akan menyesuaikan dengan tabel class pada CSS, tidak seperti boostrap harus menambahkan class .table. Di materialize class tabel secara umum sudah di buat.

Di bawah ini contoh dasar tabel pada materialize.

Saya tidak menambahkan class apa-apa, hanya saja saya membungkus tabel dengan class container.

Mari kita lihat hasilnya.

Perhatikan tampilan tabel di atas, tampilan tabel sudah berubah menjadi lebih indah dan terdapat garis pemisah antara tabel data.

Belajar Materialize #5 : Membuat Tabel Materialize
Contoh Tabel dengan Materialize

Tabel dengan Efek Striped / Belang pada Materialize

Selanjutnya kita membuat tabel HTML dengan variasi efek striped/ belang, sehingga setiap td mempunyai warna latar yang selang-seling.

Untuk membuat efek striped pada tabel materialize cukup dengan membahkab class=”striped”. Cukup mudah bukan ?

untuk membuat tabel striped ubah kode di atas pada tag table menjadi seperti di bawah ini.

dan silahkan lihat hasilnya.

Belajar Materialize #5 : Membuat Tabel Materialize
Tabel dengan Efek Striped / Belang pada Materialize

Tabel dengan variasi Efek Highlight pada Materialize

Efek Highlight pada materialize adaalah tabel dimana baris data ketika di sentuh menggunakan cursor maka akan menimbulkan efek warna yang berbeda.

Efek warnanya berubah menjadi agak gelap / warna grey. Cara untuk membuat tabel Highlight dapat menambahkan class .highlight

Untuk membuat tampilan tabel Highlight menggunakan materialize yaitu ubah class tabel sebelumnya menjadi seperti kode di bawah ini

Dan silahkan lihat hasilnya. Silahkan letakkan cursor pada bagian baris data / tabel data pada tabel.

Tabel dengan variasi text mengenah / center pada Materialize

Untuk membuat teks menjadi berada di tengah di antara tabel data dapat dilakukan di materialize. Cara untuk membuat tabel teks menjadi center dapat menambahkan class .centered.

Silahkan ubah class tabel pada tabel data sebelumnya menjadi seperti kode di bawah ini.

Kemudian lihat hasilnya.

Belajar Materialize #5 : Membuat Tabel Materialize
Membuat Tabel Center pada Materialize

Perhatikan gambar di atas, tulisan menjai di tengah pada baris data / tabel data.

Membuat Tabel Responsive dengan Materialize

Anda dapat membuat tabel responsive pada materialize, hanya dengan memabahkan class .responsive-table maka tabel akan menyesuaikan lebar layar yang anda gunakan.

Silahkan ubah kode di atas pada tag tabel menjadi kode seperti kode di bawah ini.

Dan silahkan lihat hasilnya.

Belajar Materialize #5 : Membuat Tabel Materialize
Membuat Tabel Responsive dengan Materialize

Gambar di atas dengan akses tabel HTML melalui mode device mobile, dimana tabel yang kita buat tampilannya menyesuaikan dengan layar android mobile.

Kesimpulan…

Untuk membuat tabel dengan materialize dapat dilakukan dengan memanggil class yang ada di materialize. Ada 4 class yang dapat di pakai untuk membuat tampilan tabel lebih menarik.

Kita dapat membuat tabel secara responsive, artimya lebar dan panjang tabel akan menyesuaikan dengan device yang anda gunakan.

Apa yang selanjutnya di pelajari ?

Baca Juga…

Leave a Reply