Blog Request tutorial? klik disini!

  • Membuat Table Dengan Bootstrap

    Ditulis oleh: Faizal Rafik
    14628 kali dibaca
    04 Jul / 2014 20:47

    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






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155