Membuat Table Dengan Bootstrap

04/07/2014    Faizal Rafik    15227     Website

Hallo teman-teman, pada tutorial kali ini kita akan coba membuat table menggunakan Bootstrap. Kalian pasti sudah tau apa itu Bootstrap, kalau ada yang belum tau disini saya akan jelaskan sedikit apa itu Bootstrap. Bootstrap adalah Front-end framework untuk membuat sebuah website yang responsive atau dapat dijalankan disemua ukuran layar, contohnya seperti di handphone, tab, desktop, dan lain-lainnya. Nah pada tutorial kali ini saya akan mengajarkan bagaimana cara membuat sebuah table responsive menggunakan Bootstrap. Baiklah langsung saja kita masuk ke pokok pembahasannya.

Pertama kalian bisa buat struktur HTML nya seperti gambar dibawah ini, dimana kalian bisa menambahkan class .table didalam elemen <table> untuk mendapatkan tampilan table yang sederhana didalam bootstrap. Contohnya seperti gambar dibawah ini :

Hasilnya seperti gambar dibawah ini :

Jika kalian ingin membuat garis-garis zebra didalam isi table kalian bisa menambahkan class .table-striped. Contohnya seperti gambar dibawah ini :

Hasilnya seperti gambar dibawah ini :

Selanjutnya kalau kalian ingin membuat sebuah efek hover didalam table kalian bisa menambah class .table-hover didalam elemen <table>. Contohnya seperti gambar dibawah ini :

Hasilnya seperti gambar dibawah ini :

Jika kalian ingin memperkecil jarak didalam sebuah isi table atau menghilangkan Padding yang berada didalam isi table kalian bisa menambahkan class .table-condensed didalam elemen <table> untuk menghilangkan jarak dalam (Padding) tersebut. Contohnya seperti gambar dibawah ini :

Hasilnya seperti gambar dibawah ini :

Contextual classes didalam table berfungsi untuk mengubah warna latar belakang baris pada table. Jadi kalian bisa langsung menambahkan class .active, .success, .warning, dan .danger didalam elemen <tr>. Contohnya seperti gambar dibawah ini :

Hasilnya seperti gambar dibawah ini :

Nah itulah macam-macam table yang berada didalam Bootstrap. Sekian dulu tutorial dari saya semoga tutorial ini bermanfaat untuk kalian semua. Sampai ketemu ditutorial berikutnya. Terima Kasih.

DEMO

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