Membuat Table Dengan Bootstrap (BOOTSTRAP PART2)

Guys kali ini saya akan memposting tentang membuat table di Bootstrap , Yuk disimak guys.

A. Pengertian
Bootstrap adalah framework atau tools untuk membuat aplikasi web atau website yang bersifat responsive secara cepat, mudah dan gratis. Kata 'responsive' disini berarti bahwa tampilan web (lebar dan susunan isinya) dapat berubah otomatis sesuai dengan lebar layar yang menampilkanya.
Salah satu website besar yang menggunakan framework bootstrap. Mengapa bisa demikian? Karena Bootstrap sendiri dikembangkan oleh developer twitter sehingga Bootstrap juga disebut " Twitter Bootstrap" Dengan bootstrap, kita dapat membuat responsive website dengan cepat dan mudah  dapat berjalan sempurna pada browser-browser modern seperti Firefox, Google Chrome, Safari, Opera, Dan Internet Exploler.

B. Latar belakang
Salah satu kemudahan Botstrap yaitu Bootstrap terdiri dari CSS dan HTML untuk menghasilkan Grid, Layout, Tifografi, Tabel, Form, Navigasi dan lain-lain. Di dalam Bootstrap juga sudah terdapat Javascript (jQuery Pluigns) untuk menghasilkan komponen UI yang cantik transtition, Modal, Dropdown, scroolspy, ToolTip, PopOver, Tab, Alert, Button, Carousel, dan lain-lain.

C. Alat dan Bahan

• PC / Laptop
• CSS Bootstrap

BELAJAR 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.

D. Tahapan Pelaksanaan

CARA 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.

Dan ini hasilnya dari script di atas

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".

Hasilnya

MEMBUAT TABLE STRIP DENGAN BOOTSTRAP

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

Hasilnya

MEMBUAT TABLE HOVER DENGAN MENGGUNAKAN BOOTSTRAP

Seperti tutorial diatas cuma menambah class " table-hover".

Hasilnya kemudian

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.

Hasilnya

E. 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.

F. Refrensi

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

G. Penutup

Sekian postingan kali ini. Semoga bermanfaat guys, good luck.