Tutorial Belajar Bootstrap 4 Part 3 – Membuat Tabel dengan Bootstrap

Selamat datang lagi dalam tutorial warung belajar, dalam tutorial ini kita masih membahas mengenai Bootstrap 4, kali ini kita akan membahas mengenai cara membuat tabel dengan menggunakan Bootstrap.

Pada bootstrap ada beberapa class yang bisa anda gunakan untuk mendesign tampilan dari tabel, jadi istilah disini adalah mendesain tampilan ya teman – teman, untuk proses membuat tabel kita masih menggunakan HTML, tapi disini kita akan tambahkan class yang telah disediakan oleh bootstrap 4 untuk manipulasi tampilan tabel yang telah dibuat di HTML.

Beberapa Class Bootstrap 4 yang bisa digunakan untuk manipulasi tampilan antara lain :

• .table                         : class standart yang digunakan untuk membuat desain tabel dengan bootstrap
• .table-striped           : class tambahan yang bisa anda tambahkan pada class .table, class ini digunakan untuk membuat tabel dengan warna yang selang seling (strip)
• .table-bordered       : class tambahan yang bisa anda tambahkan pada class .table, class ini digunakan untuk menambahkan border pada bagian tabel
• .table-hover             : class tambahan yang bisa anda tambahkan pada class .table, class ini digunakan untuk membuat effect hover pada tabel yang dibuat
• .table-dark               : class tambahan yang bisa anda tambahkan pada class .table, class ini digunakan untuk membuat tabel dengan warna gelap (dark)
• .table-sm                  : class tambahan yang bisa anda tambahkan pada class .table, class ini digunakan untuk membuat tabel dengan ukuran yang lebih kecil
• .table-responsive    : class ini digunakan pada tag div sebelum dituliskan tabel, class ini digunakan untuk memberikan effect responsive pada tabel yang dibuat

 

Baik kita akan mulai untuk membuat contoh dari penggunaan masing – masing class untuk manipulasi tampilan tabel.

 

Class .table

Perhatikan skrip dibawah ini, kita menggunakan mode online untuk memanggil file bootstrap, jadi pastikan anda terkoneksi dengan internet :

semisal kita simpan dengan nama table_bootstrap.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :

Keterangan :

• Tabel akan ditampilkan dengan tampilan diatas, karena kita menggunakan class “table” pada tag <table>

 

 

Class .table-striped

Setelah kita membahas mengenai contoh dari penggunaan class .table berikutnya kita akan menggunakan class “table-striped”, perhatikan contoh skrip dibawah ini :

Semisal kita simpan dengan nama table_striped.html, lalu kita buka di browser maka hasilnya adalah seperti berikut ini :

Keterangan :

• Tabel yang ditampilkan dengan menggunakan class  table-striped akan ditampilkan dengan warna selang – seling
• Anda dapat mengkolaborasikan beberapa class table sekaligus, dalam contoh diatas kita memasangkan class table dan table-striped pada tag <table>

 

.

Class .table-bordered

class table-bordered digunakan untuk memberikan border pada tabel yang anda buat, perhatikan contoh skrip dibawah ini :

Semisal kita simpan dengan menggunakan nama table_bordered.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :

Keterangan :

• Table yang ditampilkan akan memiliki border karena kita menggunakan class table-bordered di table <table>
• anda juga bisa menambahkan beberapa class sekaligus dalam sebuah tag tabel sehingga tampilannya lebih bervariasi, dalam contoh diatas kita memberikan class table-striped dan table-bordered sehingga tabelnya ditampilkan dengan warna selang seling dan memiliki border

 

Class .table-hover

class table-hover digunakan untuk memberikan effect pergantian warna pada baris tabel yang terdapat mouse diatasnya, untuk contohnya perhatikan skrip dibawah ini :

Semisal kita simpan dengan menggunakan nama tabel_hover.html, nah untuk contoh ini kita akan menggunakan jsfiddle agar teman  – teman bisa tahu fungsi dari class ini :

Keterangan :

• Ketika ada kursus mouse diatas sebuah baris, maka warna baris akan berganti hal tersebut karena kita menggunakan class table-hover pada tag <table>

 

Class .table-dark

class table-dark digunakan untuk memberikan warna gelap (hitam) pada tabel yang dibuat, sepertinya ini adalah fitur baru yang ada di bootstrap 4, untuk contoh skripnya adalah sebagai berikut :

semisal kita simpan dengan nama tabel_dark.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :

Keterangan :

• Tabel akan ditampilkan dengan warna hitam karena kita menggunakan class table-dark pada tag <table>

 

 

Class .table-sm

class table-sm digunakan untuk membuat tabel dengan ukuran baris yang lebih kecil, jadi untuk padding dari masing – masing kolom akan diperkecil ketika kita menggunakan class table-sm, jadi tabel akan ditampilkan dengan ukuran yang lebih kecil, untuk contoh penggunaan skripnya adalah sebagai berikut :

Semisal kita simpan dengan nama tabel_sm.html, lalu kita buka di browser maka hasilnya adalah :

Keterangan :

• table akan ditampilkan dengan ukuran baris yang lebih kecil, karena padding di masing – masing kolom akan diperkecil, hal tersebut karena karena kita menggunakan class table_sm

 

 

Class .table-responsive

Class ini digunakan untuk membuat sebuah tabel dengan mode responsive, dengan mode responsive ini ukuran tabel akan menyesuaikan ukuran device ketika mengakses, untuk menggunakan class table-responsive anda harus meletakkan tag <table> diantara <div></div>, pada tag <div> kita berikan class table-responsive, untuk contoh skripnya adalah seperti berikut ini :

Keterangan :

• Hasil dari tabel yang ditampilkan akan sama saja dengan contoh – contoh sebelumnya, perbedaan akan tampil ketika tabel diakses dengan menggunakan dengan ukuran device yang kecil, maka akan terdapat scrol pada tabelnya sehingga data dalam tabel tetap dapat ditampilkan dengan ukuran menyesuaikan layar.

 

Contextual Classes

Contextual Classes adalah class yang digunakan untuk merubah warna pada masing – masing baris pada tabel, berbeda dengan beberapa class sebelumnya yang dipasang pada tag <table>, untuk class ini akan dipasang pada tag <tr>, untuk contoh penggunaannya silahkan perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama table_contextual_class.html, lalu kita buka di browser maka hasilnya adalah :

Keterangan :

• warna baris yang ditampilkan pada tabel akan menyesuaikan class yang digunakan di masing – masing tag <tr>
• untuk merubah warna pada masing – masing baris, ada hanya perlu menyesuaikan nama class yang digunakan.

 

Jadi kurang lebih seperti itu ya teman – teman tutorial mengenai bagaimana design tampilan tabel dengan menggunakan bootstrap 4, anda tinggal memasangkan classnya pada tag <table> ataupun pada tag <tr> disesuaikan dengan tampilan seperti apa yang anda inginkan, baik sekian dulu, jika ada yang ingin ditambahkan silahkan di kolom komentar, sampai jumpa di tutorial bootstrap selanjutnya