Sama dengan framework css lainnya yang dimana kita bisa membuat table dengan mudah, begitupun dengan bulma. Bulma memiliki class yang bisa kita gunakan untuk membuat tabel yang akan kita tampilkan di website kita. Pada tips dan trick kali ini saya akan membahas tentang Cara Membuat Tabel Menggunakan Bulma Framework.
Bulma framework memiliki class yang di sebut class table dimana kita bisa menggunakannya untuk membuat table yang berisi data-data seperti data pelanggan atau data lainnya. Langsung saja saya akan memberikan langkah-langkah Cara Membuat Tabel Menggunakan Bulma Framework:
1. Pertama,
anda download file bulmanya di situs bulma itu sendiri dan tempatkan pada folder project yang teman-teman buat.
2. Kedua,
anda ketikan kode html di bawah 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 60 61 62 63 64 65 66 67 68 69 70 71 |
<!DOCTYPE html> <html> <head> <title>Gapless Bulma Framework</title> <!--link ke css bulma--> <link rel="stylesheet" href="bulma-0.4.0/css/bulma.css"> <!--link ke font-awesome--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <br> <!--Judul--> <h1 class="title is-1 has-text-centered">Tabel</h1> <!--kolom pembungkus tabel--> <div class="column"> <!--tabel yang sudah di beri class--> <table class="table is-bordered is-striped is-narrow"> <thead> <tr> <th>Nama</th> <th>Alamat</th> <th>Umur</th> <th>Paket Kursus</th> <th>Cabang</th> </tr> </thead> <tbody> <tr> <td>Andi</td> <td>Jakarta</td> <td>50</td> <td>GD</td> <td>Tebet</td> </tr> <tr> <td>Irwan</td> <td>Padang</td> <td>30</td> <td>WP</td> <td>Tebet</td> </tr> <tr> <td>Gilang</td> <td>Bandung</td> <td>28</td> <td>WD</td> <td>Tebet</td> </tr> <tr> <td>Ari</td> <td>Surabaya</td> <td>18</td> <td>WM</td> <td>Grogol</td> </tr> <tr> <td>Ali</td> <td>Solo</td> <td>24</td> <td>DM</td> <td>Depok</td> </tr> </tbody> </table> </div> </body> </html> |
Untuk Penjelasan kode html-nya saya sudah berikan commenting pada kode di atas. Setelah selesai coba teman-teman buka di browser teman-teman maka tampilannya akan menjadi seperti berikut:
3. Ketiga,
Kita tambahkan style internal untuk membuat textnya menjadi rata tengah:
|
1 2 3 4 5 6 7 8 |
<style type="text/css"> .table th{ text-align: center; } .table td{ text-align: center; } </style> |
Silahkan teman-teman refresh browsernya maka textnya akan berubah menjadi rata tengah
Berikut adalah beberapa kelas yang bisa teman-teman gunakan di bulma untuk memodifikasi tabel:
- table is-bordered
- table is-striped
- table is-narrow
Dengan bulma kita dapat dengan mudah memodifikasi tabel dan tentunya dengan kelas yang telah bulma sediakan. Bagaimana teman-teman cukup mudahkan membuat tabel pada bulma.
Sekian tips dan trick tentang Cara Membuat Tabel Menggunakan Bulma Framework. Semoga bermanfaat.