Bootstrap Part 2 : Membuat Table Dengan Bootstrap Untuk Pemula

Membuat Table Dengan Bootstrap

Bootstrap Part 2 : Membuat Table Dengan Bootstrap Untuk Pemula 

Membuat Table Dengan Bootstrap

OK broo..

Bertemu lagi..

Jadi pada tutorial sebelumnya kita telah belajar bootstrap part 1 : pengertian dan cara menggunakan bootstrap.

Nah.. maka pada tutorial ini kita akan belajar bootstrap part 2: membuat table dengan bootstrap.

Jadi pada bab ini kita akan membahas cara membuat atau men design table dengan menggunakan bootstrap. 

Jangan bingung bro.. Santai..

Cara membuat table dengan bootstrap sangatlah mudah dan gak sulit kok.
Kita hanya perlu menambahkan class-class bootstrap untuk mendesign table.

Jadi gini broo...
Class bootstrap untuk membuat atau mendesign table itu gak hanya satu broo..
Jadi semuanya itu berjumlah 4 buah class... 

*Class pertama adalah .table
Class .table ini digunakan untuk membuat table standart/berbentuk table biasa.

*Class kedua adalah .table-striped
Class ini adalah class tambahan untuk membuat table dengan bootstrap.
Fungsinya adalah untuk membuat tabel belang-belang (strip).

*Class ketiga adalah .table-bordered
Class ini adalah class tambahan bootstrap untuk membuat table yang memiliki garis.

*Class keempat adalah .table-hover
Class ini juga berguna untuk mendesign table menggunakan bootstrap.
Class ini berguna untuk membuat efek hover pada row table disaat mouse kita berada di atas row table.

Nah....
Selain itu ada juga class yang berguna untuk membuat pewarnaan pada row atau table data.

Untuk memberi warna pada table row maka letakkan class warna ini di tag<tr>...
Namun jika ingin memberi warna pada table data maka letakkan di tag <td>..

Gituu.. bro. gampang kan..
Nah... Untuk class warna ada 4 bro..

*Pertama adalah class .succes
Class ini memberi warna sukses atau warna hijau.

*Kedua adalah class .info
Class ini memberi warna biru.

*Ketiga adalah class .danger
Class ini memberi warna merah

*Ke-empat adalah class .warning
Class ini memberi warna kuning.

Udah bro..
Jadi sekarang ayo kita buat table dengan bootstrapnya..!!!

1. Cara Membuat Table Dengan Bootstrap

Langkah pertama untuk membuat atau mendesign table dengan bootstrap adalah ..

*Buatlah file HTML atau PHP dengan nama index.php...

Bagi kamu yang masih bingung...

Maka baca dulu cara menghubungkan bootstrap. Karena telah saya bahas pada tutorial bootstrap sebelumnya.

Ok.. kalo sudah siap ..

Silahkan copy kode di bawah ini..

Lalu paste ke file index.php tadi yaa...

Ini kodenya bro..

Nah.. dan ini ss nya..

cara membuat table dengan bootstrap untuk pemula

*Penjelasan..
1. <table class="table">...</table> adalah perintah membuat table.
2. <thead>...</thead> adalah untuk membuat kepala judul tabel.
3. <tbody>..</tbody> adalah untuk menaruh isi dari tabel.

2. Membuat Table Border Dengan Bootstrap

Untuk membuat table bergaris atau border maka kamu hanya perlu menambahkan class "table-bordered" dan letakkan bersamaan dengan class "table".

Contohnya seperti ini..

<table class="table table-bordered">

Silahkan praktekan dengan copy kode ini lalu paste di file index.php tadi.

Nah ini ss nya bro..Beda kan yang ini ada garisnya..

membuat table dengan bootsrap class table-bordered

3. Membuat Table Strip Dengan Bootstrap

Dengan menggunakan class table-sriped maka tabel kita akan bergaya belang-belang..

Untuk prakteknya copy kode ini dan paste di file index.php.

Jadi kamu hanya menambahkan table-striped
Seperti ini <table class="table table-bordered table-striped">

Gampang kan.. hehehe..

Nah ini ss nya bro..

membuat table bootsrap dengan class table-striped

4. Membuat Table Hover Dengan Bootstrap

Jadi caranya sama dengan contoh-contoh membuat table dengan bootstrap diatas tadi..

Kalian hanya perlu menambahkan class "table-hover" pada tag <table>

Copy dan paste kode ini di file index.php

Nah ini bro Demonya..hehe

See the Pen VzzJWz by penakngoding (@penakngoding) on CodePen.

5. Membuat Table Responsive Dengan Bootstrap

Untuk membuat table responsive caranya hanya dengan menambahkan element "<div>" dan ditambahkan class "table-responsive"

Penerapan = <div class='table-responsive'>

Kelebihan menggunakan table responsive adalah..

Tidak akan berantakan saat dilihat di smartphone dengan resolusi yang kecil.

Dan akan muncul scrool otomatis untuk menjaga table agar tetap utuh.

Nah ini bro kode contoh membuat table responsive dengan bootstrap.

Sudah..Cukup...Cukup..Sudah.. Cukup..Sampai.. Disini saja..
cara mendesign dan membuat table dengan bootstrap.

Gimana dengan mempelajari cara membuat table dengan bootstrap ini pasti kamu sudah merasa lebih mudah kan..
Tak hanya itu..
Karena masih banyak lagi kelebihan bootstrap dalam hal design interface website.

Daftar Tutorial Bootstrap Lainnya

Bootstrap Part 1 : pengertian dan cara menggunakan bootstrap untuk pemula.
Bootstrap Part 2 : membuat table dengan bootstrap untuk pemula
Bootstrap Part 3 : tamplan gambar dengan bootstrap
Bootstrap Part 4 : membuat tombol dengan bootstrap

Bootstrap Part 5 : membuat jumbotron dengan bootstrap
Bootstrap Part 6 : membuat alert dengan bootstrap (rilis besok tanggal 16-08-2017)
Lainnya masih rahasia yaa.. hehehe