BOOTSTRAP TABLE

kulo nuwun gan.. ha ha, kali ini saya akan membagi sedikit tentang bagaimana membuat tabel di bootstrap

BOOTSRAP
Setelah sebelumnya kita mempelajari pengertian Bootsrtap kini kita akan mempraktekanya secara langsng bagaimana menggunakan Bootstarap dan pada tutorial kali ini kita akan membuat sebuah Tabel Responsive dengan Bootstrap. Untuk membuat table sangatlah mudah sobat hanya memasukan class - class bootstrap yang berfungsi 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 pada tag <tr> untuk memberi warna 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. 

MEMBUAT TABLE DENGAN BOOTSTRAP

Untuk membuat atau mendesign table dengan Bootstrap buat sebuah file php atau html. Disini saya membuat file part2.html. Untuk cara penggunaanya telah dibahas pada tutorial sebelumnya.

 MEMBUAT TABLE BORDER DENGAN BOOTSTRAP
Untuk membuat table border atau table yang memiliki garis anda hanya perlu menambahkan class "table_bordered" bersamaan dengan class "table".

MEMBUAT TABLE STRIP DENGAN BOOTSTRAP

Membuat table dengan warna belang - belang kita dapat menggunakan  class "table-striped"

MEMBUAT TABLE HOVER DENGAN MENGGUNAKAN BOOTSTRAP

  tambahkan class " table-hover".

 

MENGGANTI WARNA TABLE DENGAN BOOTSRAP

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.

 

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 menemnukan sendiri apa kelebihan Bootstrap dalam hal design interface website.

Refrensi

http://www.script-kiddies.org/2016/11/belajar-bootstrap-part-2-membuat-tabel.html

http://www.w3im.com/id/bootstrap/default.html 

 

Penutup

 

mungkin itu sedikit gan yang saya bagikan semoga dapat di manfaatkan dengan baik