Bootstrap Part 2 : Membuat Table Dengan Bootstrap

Bootstrap Part 2 : Membuat Table Dengan Bootstrap

Untuk membuat table dengan bootstrap, anda hanya perlu memasukkan class-class bootstrap yang di gunakan untuk mendesign table. Adapun beberapa class bootstrap yang di gunakan untuk design atau membuat table adalah sebagai berikut.

  • .table
    class ini di gunakan untuk mendefinisikan atau membuat table standar/ table biasa.
  • .table-striped
    table-striped merupakan class tambahan untuk membuat table dengan menggunakan bootstrap. class ini berfungsi untuk membuat baris table yang bergaya belang-beling (strip).
  • .table-bordered
    table-bordered di gunakan untuk membuat table yang memiliki garis dan termasuk class tambahan pada bootstrap untuk mendesign table.
  • .table-hover
    table-hover merupakan class tambahan untuk mendesign table menggunakan bootstrap. table hover di gunakan untuk membuat efek hover pada row table pada saat cursor mouse di letakkan di atas row table.

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 tanda sukses atau warna hijau pada table row atau table data.
  • .danger
    class ini di gunakan untuk memberi warna merah pada table row atau table data.
  • .info
    class ini di gunakan untuk memberi warna biru pada table row atau table data.
  • .warning
    class ini di gunakan 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. di sini saya membuat file index.php. untuk cara menghubungkan bootstrap telah di bahas pada tutorial sebelumnya.

index.php

membuat table dengan bootstrap

membuat table dengan bootstrap

perhatikan pada contoh di atas, kita hanya perlu menambahkan class “table” pada element tag <table> pembuka. dan hasilnya tampilan table akan seperti 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”. contohnya

membuat table border dengan bootstrap

membuat table border dengan bootstrap

membuat table border atau table yang memiliki garis anda hanya perlu menambahkan class “table-bordered” pada tag <table> pembuka seperti contoh di atas.

Membuat Table strip dengan bootstrap

table dengan gaya strip atau belang-belang dapat di buat dengan menggunakan class “table-striped” pada bootstrap

tambahkan class “table-striped” pada tag <table> pembuka seperti contoh di atas.

dan hasilnya

membuat table striped dengan bootstrap

membuat table striped dengan bootstrap

Membuat table hover dengan bootstrap

seperti pada contoh-contoh membuat table dengan bootstrap di atas, untuk membuat efek hover pada table anda hanya perlu menambahkan class “table-hover” pada tag <table> pembuka.

perhatikan lagi contoh membuat table dengan bootstrap berikut ini

Membuat table responsive dengan bootstrap

untuk membuat table yang responsive dengan bootstrap anda hanya tinggal meletakkan element table di dalam element

yang di beri class “table-responsive”.

. kelebihan dari class table-responsive ini akan membuat table anda tidak akan berantakan walaupun di buka melalui smartphone yang memiliki resolusi layar yang lebih kecil. akan muncul scrol secara otomatis untuk membuat menjaga table tetap utuh. berikut ini adalah contoh membuat table responsive dengan bootstrap.

sekain lah cara mendesign dan membuat table dengan bootstrap. anda hanya perlu menambahkan class-class table bootstrap untuk membuat table sesuai keinginan anda. dan tentu setelah anda mempelajari cara membuat table dengan bootstrap ini pasti anda telah menemukan sendiri apa kelebihan dari bootstrap dalam hal design interface website.

Tutorial Bootstrap Dasar Lainnya

Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap
Bootstrap Part 2 : Membuat Table dengan Bootstrap
Bootstrap Part 3 : Tampilan Gambar dengan Bootstrap
Bootstrap Part 4 : Membuat Tombol dengan Bootstrap
Bootstrap Part 5 : Membuat Jumbotron dengan Bootstrap
Bootstrap Part 6 : Membuat Pesan Alert dengan Bootstrap
Bootstrap Part 7 : Cara Membuat Icon dengan Bootstrap
Bootstrap Part 8 : Pagination dan Breadcrumb dengan Bootstrap
Bootstrap Part 9 : Membuat List dengan Bootstrap
Bootstrap Part 10 : Membuat Panel dengan Bootstrap
Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills dengan Bootstrap
Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
Bootstrap Part 13 : Membuat Form dengan Bootstrap
Bootstrap Part 14 : Membuat Carousel dengan Bootstrap
Bootstrap Part 15 : Membuat Modal dengan Bootstrap
Bootstrap Part 16 : Mengenal System Grid Bootstrap

Sumber : http://www.malasngoding.com/membuat-table-dengan-bootstrap/

This entry was posted in Bootstrap. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s