Membuat Sebuah Table Materialize CSS Framework

Selanjutnya kita akan memperlihat cara membuat sebuah table dengan Materialize CSS Framework. Untuk membuat tag table dan didalamnya kita buat tag thead dan tbody. Tentu thead untuk bagian judulnya sedangkan tbody untuk bagian kontentnya. Kita akan buat 3 kolom dengan masing-masing judulnya sebagai table headnya yang kita tempatkan pada satu baris. Sebagai berikut

diatas kita buat simple saja. Untuk tbodynya kita isi beberapa data kedalam table datanya didalam satu baris.

Teman teman tambahkan beberapa baris lagi untuk data dummynya agar terlihat bentuk tabelnya. Nah jika kita lihat dulu sebagian maka hasil yang didapatkan

secara default bordernya akan hilang tapi pada bagian theadnya terdapat garis lurus yang tipis disana. Tentu banyak sekali yang teman teman lakukan untuk mendesign tablenya. Pertama kita bisa tambahkan class bordered yang hasilnya akan ada border atau garis dimasing-masing barisnya

dan jika setiap barisnya diberikan warna background dengan efek selang seling

kita juga bisa kasih efek highlight ketika mouse menyentuh atau dihover maka pada bagian tertentu akan terlihat perubahan warnanya.

Selain itu kita juga membuat textnya berada ditengah dengan class centered. Dan jika kecilkan layarnya tablenya sudah otomatis responsive. Satu lagi class extra untuk tablenya yakni responsive-table

hasilnya akan membuat table headnya akan berada disampingnya dan table datanya dapat kita scroll kekiri dan kekanan.

Jadi dengan class responsive-table ini maka akan terlihat menarik ketika pada ukuran mobile atau tablet. Itu dia beberapa hal yang teman teman harus familiar pada class classnya. Sampai jumpa pada bagian berikutnya.

12 Agustus 2016

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat