Selamat datang kembali di website tips dan trik Dumet School, kembali lagi dengan saya dalam pembahasan framework css materialize. Pada kesempatan kali ini saya akan memberikan tips tentang Borderless Table Pada Framework CSS Materialize dan saya akan memperkenalkan beberapa fungsi di dalam metode Borderless Table diantaranya bordered, striped. highlight, responsive-table dan centered. Dimana dalam metode ini kita hanya memberikan class nya saja pada tag table nya. Di bawah ini keterangan dari hasil metode table
Secara default table memiliki tampilan seperti gambar di bawah ini
- bordered: Memiliki output border-botom pada setiap tag tr
- striped : Memiliki output bergaris dan ada background secara berselang – seling
- highlight : Memiliki efek hover pada setiap tar tr nya
- centered : Memiliki output konten akan ke posisi center atau tengah
- responsive-table : Memiliki output terdapat scroll bottom secara horizontal
Baik langsung saja saya akan implementasikan Borderless Table Pada Framework CSS Materialize pada gambar di bawah ini saya memiliki sebuah script tabel beserta isinya
Kemudian saya akan membeikan class pada tag table nya
Hasil output dari class bordered
Hasil output dari class bordered dan striped
Hasil output dari class highlight yang mempunyai hover ketika mouse di arahkan pada setiap kolom
Hasil output dari class centered
Hasil ouput dari class responsive-table, ketika posisi mobile table title akan keposisi samping kiri dan deskripsi secara horizontal dan ada scroll bottom nya untuk melihat detail deskripsi nya.
Nah berikut adalah hasil efek yang di hasilkan dari beberapa class untuk table yang di sediakan oleh framework ini, untuk selanjutnya teman – teman tinggal implementasikan pada setiap class nya dan melihat hasil outputnya untuk tahu mana yang cocok untuk layout yang kalian akan buat. Baik, sekian pada artikel kali ini tentang Borderless Table Pada Framework CSS Materialize kita akan lanjut pada pembahasan frame materialize ini. Mudah – mudahan bermanfaat dan semoga bisa menjadi tambahan ilmu untuk teman – teman, terimakasih dan sampai jumpa.
The post Borderless Table Pada Framework CSS Materialize appeared first on Kursus Website Terbaik.