Cara Membuat Table Responsive Dengan Framework CSS Foundation

02/01/2016    Faizal Rafik    2512     Artikel Bebas

Hallo teman-teman DUMET School, pada tutorial kali ini kita akan mencoba membuat Table Responsive menggunakan Framework CSS Foundation. Foundation adalah sebuah kerangka kerja HTML & CSS yang berfungsi untuk membuat tampilan website menjadi Responsive atau dapat menyesuaikan di berbagai ukuran layar device. Dengan menggunakan Framework CSS Foundation kita mampu membuat design tampilan website dengan cepat dan mudah. Nah kali ini kita akan coba membuat Table menggunakan Framework CSS Foundation ini. Cara nya sangat mudah sekali kita akan langsung coba membuatnya saja ya teman-teman.

Pertama kalian bisa mendownloadnya terlebih dahulu file CSS dan jQuery dari Framework Foundation tersebut di www.foundation.zurb.com, disini kita menggunakan Foundation versi terbaru ya itu versi 6.

Setelah kalian download kalian bisa menghubungkan file CSS dan jQuery nya di dalam file HTML kalian, seperti berikut.

Selanjutnya kalian bisa buat satu tag div dan tambahkan attribute class dengan nama table- responsive, kemudian di dalam tag div class .table-responsive kalian bisa buat tag table, berikut script HTML nya.

Kemudian kalian bisa buat satu file CSS dengan nama style.css, dan tuliskan baris program CSS di bawah ini.

Fungsi dari property CSS overflow-x: auto; adalah untuk membuat tanda scroll secara horizontal pada table ketika table di buka di ukuran layar yang lebih kecil.

Untuk membuktikannya kalian bisa coba jalankan file HTML kalian di browser kalian masing-masing, dan coba kecilkan ukuran browser sampai sebesar ukuran layar Handphone, maka kalian akan melihat pada bagian bawah table akan terdapat garis secara horizontal yang dapat kalian gaser kekiri dan kekanan.

Nah itulah cara membuat Table Raseponsive menggunakan Framework CSS Foundation, sangat mudah sekali ya teman-teman, sekian dulu tutorial dari saya sampai ketemu di tutorial berikutnya ya. Terima Kasih.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More