Notice: Trying to access array offset on value of type null in /home/u5799550/public_html/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Notice: Trying to access array offset on value of type null in /home/u5799550/public_html/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

Membuat Table Dengan Bootstrap

Pada tutorial sebelumnya di tutorial belajar bootstrap dasar di www.malasngoding.com sudah di bahas tentang pengertian dan cara menggunakan bootstrap. sehingga pada tutorial bootstrap part 2 : membuat table dengan bootstrap ini akan di bahas tentang cara membuat atau men design table dengan menggunakan bootstrap. untuk membuat table dengan bootstrap caranya sangat mudah. 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.

dan 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

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

See the Pen yeMPRY by Malas Ngoding (@malasngoding) on CodePen.0

Membuat table responsive dengan bootstrap

untuk membuat table yang responsive dengan bootstrap anda hanya tinggal meletakkan element table di dalam element <div> yang di beri class “table-responsive”. <div 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