Tutorial Bootstrap Part 4 : Membuat Tabel Bootstrap

Assalamu'alaikum Wr. Wb.

A). Pendahuluan 

     Bertemu lagi di blog saya. Pada kesempatan kali ini saya akan membahas tentang membuat tabel dengan bootstrap. Kalau belum tahu lihatlah blog saya di bawah ini.

B). Pengertian

    Tabel ialah Sebuah alat untuk menampilkan informasi dalam bentuk matriks.

C). Maksud dan Tujuan

       Agar kalian bisa membuat tabel dengan bootstrap.

D). Pembahsan

       CLASS YANG TERSEDIA 

1. .table               = Bentuknya tabel tanpa adanya border

2. .table-striped    = Memberikan efek belang - belang pada row tabel

3. .table-bordered = Memberikan border pada tabel

4. .table-hover     = Memberikan efek / animasi sentuhan saat di sentuh dan untuk membuat pewarnaan pada row atau table data anda dapat menggunakan class-class berikut ini yang dapat anda tambahkan pada tag <tr> untuk memberi warna pada table row, atau tambahkan pada tag <td> untuk memberi warna pada table data :

      - .success

         .class ini di gunakan untuk memberi warna hijau di tabel row atau tabel data

      - .danger

          .class ini di gunakan untuk memberi warna merah di tabel row atau tabel data

      - .info

        .class ini di gunakan untuk memberi warna biru di tabel row atau tabel data

      - .warning

         .class ini di gunakan untuk memberi warna kuning di tabel row atau tabel data.

CARA MEMBUAT TABEL DENGAN BOOTSTRAP

Contoh script & hasilnya ketika di jalankan di web browser.

            Hasil Script:

 
Pada gambar di atas, karena menggunakan class .table maka tidak di berikan border di setiap coloumnnya.

CARA MEMBUAT TABEL BORDER :

            Hasil Script: 

Pada gambar di atas, sudah menggunakan class .table-bordered dan alhasil memiliki border di setiap coloumnnya.

CARA MEMBUAT TABEL STRIP:

            Hasil Script: 

Pada gambar di atas, merupakan perpaduan dari class .table-bordered dengan .table-striped dan menjadi belang-belang dari setiap rownya.

CARA MEMBUAT TABLE RESPONSIVE :

 

         Hasil Script:

Pada gambar di atas, merupakan perpaduan antara class .table, .table-bordered, .table-striped, .table-hover. Yang memiliki fungsionalitas yang sangat efisien dan responsive.

Kombinasi antara Tabel Border, Striped, Tabel Hover dan tambahan CSS di Bootstrap.

Cukup menambahkan script pada gambar berikut ini:

         Hasil Scriptnya: 

E). Kesimpulan
     Jadi untuk membuat table yang responsive lebih gampang menggunakan bootstrap, karena kita tinggal memanggil classnya saja & sangat menghemat waktu bukan ?.

Cukup sekian informasi yang dapat saya berikan pada hari ini, jika ada kesalahan mohon maaf semuanya. Terima kasih telah mengunjungi blog saya dan jangan lupa untuk mengikuti dan membaca selalu postingan di blog saya yang saat ini masih biasa-biasa saja.

  ~ Wassalamu'alaikum Wr. Wb. ~