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. Show 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 :
Baik kita akan mulai untuk membuat contoh dari penggunaan masing – masing class untuk manipulasi tampilan tabel.
Class .tablePerhatikan skrip dibawah ini, kita menggunakan mode online untuk memanggil file bootstrap, jadi pastikan anda terkoneksi dengan internet : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <table class="table"> <tr> <th>No</th> <th>Nama</th> <th>Kelas</th> <th>Tempat Lahir</th> </tr> <tr> <td>1</td> <td>Aris Samsudin</td> <td>3mm3</td> <td>Sidoarjo</td> </tr> <tr> <td>2</td> <td>Taufik Hidayat</td> <td>3mm3</td> <td>Sidoarjo</td> </tr> <tr> <td>3</td> <td>Indra Hermawan</td> <td>3mm1</td> <td>Yogya</td> </tr> <tr> <td>4</td> <td>Zen Wawazer</td> <td>3mm1</td> <td>Surabaya</td> </tr> </table> </body> </html> semisal kita simpan dengan nama table_bootstrap.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut : Keterangan :
Class .table-stripedSetelah kita membahas mengenai contoh dari penggunaan class .table berikutnya kita akan menggunakan class “table-striped”, perhatikan contoh skrip dibawah ini : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <table class="table table-striped"> <tr> <th>No</th> <th>Nama</th> <th>Kelas</th> <th>Tempat Lahir</th> </tr> <tr> <td>1</td> <td>Aris Samsudin</td> <td>3mm3</td> <td>Sidoarjo</td> </tr> <tr> <td>2</td> <td>Taufik Hidayat</td> <td>3mm3</td> <td>Sidoarjo</td> </tr> <tr> <td>3</td> <td>Indra Hermawan</td> <td>3mm1</td> <td>Yogya</td> </tr> <tr> <td>4</td> <td>Zen Wawazer</td> <td>3mm1</td> <td>Surabaya</td> </tr> </table> </body> </html> Semisal kita simpan dengan nama table_striped.html, lalu kita buka di browser maka hasilnya adalah seperti berikut ini : Keterangan :
. Class .table-borderedclass table-bordered digunakan untuk memberikan border pada tabel yang anda buat, perhatikan contoh skrip dibawah ini : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <table class="table table-striped table-bordered"> <tr> <th>No</th> <th>Nama</th> <th>Kelas</th> <th>Tempat Lahir</th> </tr> <tr> <td>1</td> <td>Aris Samsudin</td> <td>3mm3</td> <td>Sidoarjo</td> </tr> <tr> <td>2</td> <td>Taufik Hidayat</td> <td>3mm3</td> <td>Sidoarjo</td> </tr> <tr> <td>3</td> <td>Indra Hermawan</td> <td>3mm1</td> <td>Yogya</td> </tr> <tr> <td>4</td> <td>Zen Wawazer</td> <td>3mm1</td> <td>Surabaya</td> </tr> </table> </body> </html> Semisal kita simpan dengan menggunakan nama table_bordered.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut : Keterangan :
Class .table-hoverclass table-hover digunakan untuk memberikan effect pergantian warna pada baris tabel yang terdapat mouse diatasnya, untuk contohnya perhatikan skrip dibawah ini : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <table class="table table-hover table-bordered"> <tr> <th>No</th> <th>Nama</th> <th>Kelas</th> <th>Tempat Lahir</th> </tr> <tr> <td>1</td> <td>Aris Samsudin</td> <td>3mm3</td> <td>Sidoarjo</td> </tr> <tr> <td>2</td> <td>Taufik Hidayat</td> <td>3mm3</td> <td>Sidoarjo</td> </tr> <tr> <td>3</td> <td>Indra Hermawan</td> <td>3mm1</td> <td>Yogya</td> </tr> <tr> <td>4</td> <td>Zen Wawazer</td> <td>3mm1</td> <td>Surabaya</td> </tr> </table> </body> </html> 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 :
Class .table-darkclass 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 : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <table class="table table-dark table-bordered"> <tr> <th>No</th> <th>Nama</th> <th>Kelas</th> <th>Tempat Lahir</th> </tr> <tr> <td>1</td> <td>Aris Samsudin</td> <td>3mm3</td> <td>Sidoarjo</td> </tr> <tr> <td>2</td> <td>Taufik Hidayat</td> <td>3mm3</td> <td>Sidoarjo</td> </tr> <tr> <td>3</td> <td>Indra Hermawan</td> <td>3mm1</td> <td>Yogya</td> </tr> <tr> <td>4</td> <td>Zen Wawazer</td> <td>3mm1</td> <td>Surabaya</td> </tr> </table> </body> </html> semisal kita simpan dengan nama tabel_dark.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut : Keterangan :
Class .table-smclass 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 : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <table class="table table-sm table-bordered"> <tr> <th>No</th> <th>Nama</th> <th>Kelas</th> <th>Tempat Lahir</th> </tr> <tr> <td>1</td> <td>Aris Samsudin</td> <td>3mm3</td> <td>Sidoarjo</td> </tr> <tr> <td>2</td> <td>Taufik Hidayat</td> <td>3mm3</td> <td>Sidoarjo</td> </tr> <tr> <td>3</td> <td>Indra Hermawan</td> <td>3mm1</td> <td>Yogya</td> </tr> <tr> <td>4</td> <td>Zen Wawazer</td> <td>3mm1</td> <td>Surabaya</td> </tr> </table> </body> </html> Semisal kita simpan dengan nama tabel_sm.html, lalu kita buka di browser maka hasilnya adalah : Keterangan :
Class .table-responsiveClass 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 : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <div class="table-responsive"> <table class="table table-sm table-bordered"> <tr> <th>No</th> <th>Nama</th> <th>Kelas</th> <th>Tempat Lahir</th> </tr> <tr> <td>1</td> <td>Aris Samsudin</td> <td>3mm3</td> <td>Sidoarjo</td> </tr> <tr> <td>2</td> <td>Taufik Hidayat</td> <td>3mm3</td> <td>Sidoarjo</td> </tr> <tr> <td>3</td> <td>Indra Hermawan</td> <td>3mm1</td> <td>Yogya</td> </tr> <tr> <td>4</td> <td>Zen Wawazer</td> <td>3mm1</td> <td>Surabaya</td> </tr> </table> </div> </body> </html> Keterangan :
Contextual ClassesContextual 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 : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <div class="table-responsive"> <table class="table table-sm table-bordered"> <tr> <th>No</th> <th>Class</th> </tr> <tr> <td>1</td> <td>Default</td> </tr> <tr class="table-primary"> <td>2</td> <td>table-primary</td> </tr> <tr class="table-success"> <td>3</td> <td>table-success</td> </tr> <tr class="table-danger"> <td>4</td> <td>Danger</td> </tr> <tr class="table-info"> <td>5</td> <td>Info</td> </tr> <tr class="table-warning"> <td>6</td> <td>Warning</td> </tr> <tr class="table-active"> <td>7</td> <td>Active</td> </tr> <tr class="table-secondary"> <td>8</td> <td>Secondary</td> </tr> <tr class="table-light"> <td>9</td> <td>Light</td> </tr> <tr class="table-dark text-dark"> <td>10</td> <td>Dark</td> </tr> </table> </div> </body> </html> Semisal kita simpan dengan nama table_contextual_class.html, lalu kita buka di browser maka hasilnya adalah : Keterangan :
Jadi kurang lebih seperti itu ya teman – teman tutorial mengenai bagaimana design tampilan tabel dengan menggunakan bootstrap 4, anda tinggal memasangkan classnya pada tag |