Tutorial Bootstrap 4 #9 : Membuat Table Dengan Bootstrap 4

Membuat Table Dengan Bootstrap 4 – Selamat datang di tutorial cara membuat desain table dengan bootstrap 4. pada tutorial ini kita akan belajar tentang cara membuat desain table yang menarik dengan menggunakan bootstrap.

Tanpa harus menulis kode css secara manual, kita bisa langsung menggunakan banyak class-class yang sudah disediakan oleh bootstrap.

Dengan menggunakan bootstrap, kita tidak hanya bisa membuat satu model desain table. tapi kita bisa membuat banyak model desain sesuai keinginan.

Karena bootstrap sudah menyediakan banyak sekali class-class yang bisa langsung kita gunakan seperti pada saat membuat komponen-komponen yang sudah kita pelajari di tutorial bootstrap 4 di www.malasngoding.com sebelumnya.

Untuk teman-teman yang belum belajar membuat table dengan HTML, silahkan baca dulu tutorial cara membuat table dengan HTML di malasngoding.com.

Membuat Table Dengan Bootstrap 4

Table merupakan salah satu elemen paling penting pada sebuah aplikasi. karena biasanya data yang ada pada aplikasi atau sistem informasi ditampilkan dalam sebuah table.

Sehingga desain table yang menarik dan rapi akan membuat data-data yang ditampilkan pada table menjadi lebih enak dilihat. karena terstruktur dengan rapi dan tampil menggunakan warna yang bersih.

Oke, langsung saja kita mulai belajar mengenal class-class bootstrap 4 untuk membuat table.

Oh ya, teman-teman yang belum membaca tentang cara instalasi bootstrap 4, silahkan baca terlebih dulu tutorial berikut, karena di tutorial ini tidak dijelaskan lagi tentang cara menghubungkan proyek dengan bootstrap 4.

Wajib Baca :

• Tutorial Bootstrap 4 #1 : Pengenalan Bootstrap 4
• Tutorial Bootstrap 4 #2 : Cara Menggunakan Bootstrap

Membuat Table Dengan Bootstrap 4

Kita mulai dengan cara membuat table sederhana dengann bootstrap 4. untuk membuat table menggunakan bootstrap 4, kita bisa menggunakakan class .table pada tag <table>.

Berikut ini adalah contoh syntax membuat table sederhana dengan HTML.

Sehingga jika kita tambahkan class .table pada tag <table>, maka hasilnya menjadi <table class=”table”> contohnya seperti berikut.

Coba kita lihat hasilnya. contoh table ini saya simpan dalam file table.html. dalam folder belajar_bootstrap yang sudah kita buat pada tutorial sebelumnya. dan sudah dihubungkan juga ke bootstrap.

Dan jika kita jalankan, maka hasilnya akan seperti berikut.

Gambar di atas adalah contoh tampilann table sederhana menggunakan class .table dari bootstrap.

Cukup mudah kan teman-teman, kita tinggal menghubungkan proyek dengan bootstrap, selanjutnya hanya tinggal menuliskan class .table pada tag table nya, maka desain table sederhana pun jadi.

Membuat Table Bergaris Dengan Bootstrap 4

Jika teman-teman perhatikan pada table sederhana di atas tadi, tampilan tablenya benar-benar sederhana, sehingga tidak memiliki garis samping.

Kita bisa membuat garis pada table dengan sangat mudah. kita hanya perlu menambahkan class .table-bordered pada tag <table>.

Contoh

Maka hasilnya akan seperti berikut.

Nah, Table kita sudah memiliki garis sekarang. perhatikan pada syntax di atas tadi. untuk membuat table yang memiliki garis seperti pada gambar di atas, kita tinggal menambahkan class .table-bordered pada tag <table>.

Sangat mudah kan 🙂 .

Membuat Table Tanpa Garis Dengan Bootstrap 4

Jika tadi kita belajar cara membuat table yang memiliki garis, sekarang kita belajar cara membuat table yang tidak memiliki table sama sekali.

Untuk membuat table yang tidak memiliki garis, kita bisa menuliskan class .table-borderless pada tag <table>.

Perhatikan contoh berikut.

Maka hasilnya akan menjadi seperti berikut.

Table yang tidak memiliki garis pun selesai kita buat.

Membuat Table Striped (belang) Dengan Bootstrap 4

Table striped adalah table yang memiliki warna belang atau selang-seling antar 1 baris dengan baris table lainnya. untuk membuat table striped atau table belang ini kita bisa gunakan class .table-striped . letakkan pada tag <table> seperti biasa.

Atau kita juga bisa mengkombinasikan dengan class table lain juga, misalnya selain belang, kita juga ingin table kita memiliki garis. maka contohnya seperti berikut.

Maka hasilnya seperti berikut.

Sungguh menarik tampilan table yang kita buat sekarang.

Table Hover Dengan Bootstrap 4

Table hover adalah table yang baris tablenya bisa berubah warna ketika diletakkan cursor mouse di atasnya. tentu class yang satu ini akan bisa membuat tampilan table kita menjadi lebih interaktif dan keren.

Cara nya kita bisa tuliskan class .table-hover pada tag <table>.

Atau juga bisa kita kombinasikan dengan class table yang lain, misalnya kita ingin tablenya belang, bergaris, dan memiliki efek ketika diletakkan cursor mouse di atasnya (hover), maka contohnya seperti berikut.

Jika kita jalankan, maka hasilnya table kita akan seperti berikut.

Table Gelap Dengan Bootstrap 4

Kita juga bisa mengubah warna table. entah itu mengubah warna kepala table, atau badan table. kita bisa langsung menggunakan class .table-dark.

Tuliskan class .table-dark pada tag <table> jika teman-teman ingin seluruh bagian table berwarna gelap.

Tuliskan class .table-dark pada tag <thead> jika teman-teman ingin kepala table menjadi berwarna gelap.

Tuliskan class .table-dark pada tag <tbody> jika teman-teman ingin badan table menjadi berwarna gelap.

Berikut contoh penggunaannya. untuk membuat gelap seluruh bagian table.

Maka hasilnya seperti berikut.

dan berikut contoh penggunaan class .table-dark pada kepala table.

dan berikut contoh untuk membuat gelap badan table saja.

Untuk class .table-dark ini juga bisa kita kombinasikan dengan class table yang sebelumnya sudah kita bahas, tapi ingat, khusus class table yang lain, penempatannya tetap pada tag <table> seperti contoh sebelumnya.

Membuat Table Berwarna Dengan Bootstrap 4

Tidak hanya bisa membuat table yang berwarna gelap, ada banyak pilihan warna yang bisa kita gunakan untuk diterapkan pada table.

Dan cara penggunaannya sama seperti contoh membuat table gelap dengan class .table-dark sebelumnya.

Berikut ini adalah class warna yang bisa kita gunakan untuk mengubah warna pada table.

• bg-primary
  Untuk membuat warna biru
• bg-success
  Untuk membuat warna hijau
• bg-warning
  untuk membuat warna kuning
• bg-danger
  untuk membuat warna merah
• bg-info
  untuk membuat warna biru terang
• bg-dark
  untuk membuat warna gelap
• bg-light
  untuk membuat warna terang

Dan untuk penggunaannya tinggal kita tuliskan saja pada bagian mana ingin kita warnai.

Berikut contoh jika ingin memberi warna pada bagian baris table. tulis class pada bagian tag <tr>.

Dan berikut contoh jika ingin memberi warna pada bagian kolum table. tulis class pada bagian tag <th> atau tag <td>.

Berikut contoh lengkapnya.

Maka berikut adalah hasil dari contoh dari cara memberi warna pada table di atas.

Mengubah Ukuran Table Dengan Bootstrap 4

Untuk mengubah ukuran dari table, teman-teman bisa menggunakan class .table-sm pada tag <table>, agar tampilan table menjadi lebih kecil.

atau

Membuat Caption Judul Table Dengan Bootstrap 4

Untuk membuat caption pada table, bootstrap 4 juga sudah memudahkan kita. kita tinggal membuat tag <caption> .. </caption> di bawah tag <table>. berikut contoh penggunaannya.

Dan hasil nya seperti berikut.

Seperti yang terlihat pada contoh gambar di atas, tulisan caption pun tampil dengan sempurna 🙂 .

Membuat Table Responsive Dengan Bootstrap 4

Setelah banyak mempelajari class table pada bootstrap, belum lengkap jika kita belum belajar cara membuat table yang responsive dengan bootstrap 4.

Karena seperti yang kita ketahui, bootstrap identik dengan fitur responsive nya.

Nah, cara membuatnya pun sangat mudah. kita tinggal membuat sebuah elemen <div> .. </div> di luar elemen table. dan dalam tag <div> tersebut tulis class .table-responsive.

Perhatikan contoh berikut.

Dengan begitu, table kita akan responsive pada saat di akses dari berbagai ukuran device, baik itu tablet, smartphone dan lain-lain.

Akan muncul scroll otomatis pada table, agar tampilan table tidak rusak dan responsive. 🙂

Kesimpulan

Dengan bootstrap, khususnya bootstrap versi 4, kita bisa menggunakan class yang sudah disediakan oleh bootstrap untuk mendesain sebuah table.

Banyak model table yang bisa kita desain menggunakan bootstrap, sesuai seperti yang dijelaskan di atas tadi. ada table yang berbentuk sederhana, table bergaris, tanpa garis, striped, hover dan memberi warna pada table. sampai table yang responsive.

Dan semua class tersebut bisa kita kombinasikan dengan menggunakannya secara bersama-sama.

Untuk membaca dokumentasi dari bootstrap tentang table, teman-teman bisa membacanya di sini.

Download Source Code

DEMO