Bootstrap Chapter 3 - Membuat Tabel Dengan Bootstrap

BELAJAR BOOTSTRAP
Setelah sebelumnya kita mempelajari pengertian Bootstrap kini kita akan mempraktekanya secara langsung bagaimana cara menggunakan Bootstrap dan pada tutorial kali ini kita akan membuat sebuah Tabel Responsive dengan Bootstrap. Untuk membuat tabel sangatlah mudah  sobat hanya memasukkan class - class bootstrap yang berfungsi untuk mendesign tabel. Adapun beberapa class Bootstrap yang berguna untuk mendesign tabel.

• .table
  Class ini berfungsi untuk mendefinisikan atau membuat tabel sederhana / standar
• .table-strip
  Merupakan class tambahan untuk membuat tabel dengan Bootstrap. Berfungsi untuk membuat baris tabel yang bergaya belang - belang ( strip )
• .table-bordered
  Berfungsi untuk membuat tabel yang memiliki garis dan ketebalan garisnya dapat kita atur dan merupakan class tambahan untuk membuat tabel
• .table-hover
  Berfungsi untuk memberikan evek hover, yaitu ketika kursor kita arahkan pada tabel maka garis tabel akan mengeluarkan gaya tersendiri seperti bercahaya dan merupakan class tambahan untuk membuat tabel bootstrap

Dan untuk membuat pewarnaan pada row atau table data sobat dapat menggunakan class-class berikut ini yang dapat anda tambahkan pad tag <tr> untuk memberi wawrna pada table row, atau tambahkan pada tag <td> untuk memberikan warna pada table data

•  .success
  class ini digunakan untuk memberi tanda sukses atau warna hijau pada table row atau table data
• .danger
  class ini digunakan untuk memberi warna merah pada table row atau table data
• .info
  class ini digunakan untuk memberi warna biru pada table row atau table data
• .warning
  class ini digunakan untuk memberi warna kuning pada table row atau table data

CARA MEMBUAT TABLE DENGAN BOOTSTRAP
Untuk membuat atau mendesign table dengan Bootstrap buat sebuah file php atau html. Disini saya membuat file belajar2.html. Untuk cara Penggunaanya telah dibahas pada tutorial sebelumnya

belajar2.html

Perhatikan pada contoh diatas, kita hanya perlu menambahkam class "table" tag <table> pembuka dan hasilnya tampilan table akan seperti diatas

MENGGANTI WARNA TABLE DENGAN BOOTSTRAP
Untuk mengganti warna table dengan Bootstrap adalah dengan memberikan class pada tag <td> atau <tr> untuk classnya sudah saya jelaskan diatas dan berikut adalah cara penggunaanya



 Dapat kita simpulkan jika kita menaruh classnya pada tag <tr> maka satu baris kolom akan ganti warnanya, jika kita menaruh pada tag <td> maka hanya 1 kolom yang berganti warnanya, setiap class memiliki warna tersendiri yang sudah saya jelaskan diatas

KESIMPULAN
Sekian cara Membuat Table Dengan bootstrap. Sobat hanya perlu menambahkan class-class table pada Bootstrap untuk membuat table sesuai keinginan. Dan tentu setelah sobat mempelajari Cara Membuat Table Dengan Bootstrap ini pasti sobat telah menemukan sendiri apa kelebihan Bootstrap dalam hal design interface website.