Cara Membuat Tabel di Bootstrap Mudah dan Lengkap

Suci Wulandari

•

06 July 2023

•

5295

Saat mendesain website, Sobat MinDi akan terbantu dengan menggunakan framework seperti Bootstrap. Menariknya, Bootstrap ini bisa membuat tampilan tabel data menjadi lebih rapi dan bagus. Hal itu dikarenakan adanya berbagai fitur dan fasilitas pada Bootstrap yang memungkinkan pembuatan tabel menjadi lebih menarik.
Pembuatan tabel Bootstrap pun termasuk mudah sebab kamu hanya perlu memanggil komponen tabel dengan atribut class. Melalui artikel ini, MinDi akan bantu memberikan informasi lebih mendalam tentang apa itu Bootstrap, keunggulannya, jenis-jenis tabel Bootstrap, hingga cara membuat tabel di Bootstrap. Simak artikel berikut ini sampai selesai, ya!

Apa Itu Bootstrap?

Bootstrap adalah framework web development yang dirancang untuk mempercepat proses pengembangan mobile-first dan web responsive. Bootstrap berbasis HTML, CSS, dan Javascript. Menariknya, script dan syntax yang ada di Bootstrap dapat kamu terapkan pada berbagai komponen saat mendesain web.

Dengan memakai Bootstrap, semua elemen antarmuka website dapat bekerja optimal pada semua ukuran layar. Ada dua varian Bootstrap yaitu versi yang sudah dikompilasi dan versi yang didasarkan pada kode sumber. Versi kedua lebih banyak dipakai profesional sebab programer bisa menyesuaikan gaya dengan proyek yang sedang dikerjakan.
Keunggulan Menggunakan Bootstrap

Dibimbing.id - Keunggulan Menggunakan Bootstrap

Pilihan framework web development yang bisa kamu gunakan sangat beragam. Meski begitu, Bootstrap termasuk salah satu yang unggul jika dibandingkan framework yang lainnya. Berikut ini beberapa keunggulan menggunakan Bootstrap.
Mudah untuk dipelajari dan digunakan. Bootstrap cukup populer di kalangan developer. Struktur filenya sederhana dan aksesnya mudah. Kamu hanya perlu pengetahuan dasar HTML, CSS, dan JS untuk melakukan modifikasi.
Grid cukup responsif karena adanya sistem yang siap pakai. Kamu pun tidak perlu membuatnya dari awal. Sistem grid tersebut terdiri dari kolom dan baris. Kamu tidak perlu memasukkan kueri media dalam file CSS saat akan membuat grid baru di dalam grid sebelumnya.
Dokumentasi lengkap dengan berbagai topik yang bisa ditemukan di halaman dokumentasi seperti konten, JavaScript, browser dari perangkat, alat, tema, dan aksesibilitas.
Performa website meningkat dengan Bootstrap Image System. Kamu bisa mengganti ukuran gambar otomatis sesuai ukuran layar pengguna. Dengan begitu, optimasi website juga semakin maksimal.
Cocok digunakan pada berbagai browser yang populer sehingga memudahkan pengunjung. Dengan begitu, bounce rate akan berkurang dan peringkat web otomatis naik.
Jenis-jenis Tabel pada Bootstrap
Bootstrap dapat digunakan untuk membuat tampilan tabel jadi lebih bagus. Kamu bisa mengatur beberapa hal di tabel seperti header, efek hover, dan lain-lain. Terdapat berbagai jenis tabel yang bisa dibuat pada Bootstrap. Berbagai jenis tabel di Bootstrap tersebut akan dijelaskan lebih lengkap berikut ini.
Basic Table merupakan tabel yang paling sederhana yang ada di Bootstrap.
Striped Table merupakan tabel yang ada garis di kerangka tabelnya.
Bordered Table merupakan tabel dengan warna baris selang-seling yang berbeda.
Hover Rows digunakan untuk memberi efek hover pada baris tabel yang tersentuh cursor pengunjung.

Cara Membuat Tabel di Bootstrap

Dibimbing.id - Cara Membuat Tabel di Bootstrap Mudah

Untuk membuat tabel di Bootstrap, sebenarnya kamu hanya tinggal memanggil class class yang dibutuhkan. Berbagai class yang terdapat pada Bootstrap yaitu:

.table merupakan class untuk mendefinisikan sekaligus membuat tabel standar atau biasa.
.table-striped merupakan class tambahan untuk membuat tabel Bootstrap. Dengan class ini, kamu bisa membuat baris tabel yang bergaya strip/belang-belang.
.table-bordered merupakan class untuk membuat garis pada tabel serta menjadi class tambahan untuk mendesain tabel.
.table-hover merupakan class tambahan untuk membuat efek hover di row tabel saat cursor mouse diletakkan di atas row tabel.

Selain membuat tabel dengan berbagai class di atas, kamu juga bisa memberikan pewarnaan pada row atau tabel data dengan memakai class class tambahan. Untuk memberi warna pada tabel row kamu perlu menambahkan tag <tr>. Untuk menambahkan warna pada tabel data kamu perlu menambahkan tag <td>. Berbagai class yang membantu pewarnaan tabel Bootstrap yaitu:

.success merupakan class yang berfungsi memberi tanda sukses atau warna hijau pada tabel.
.danger merupakan class yang memberi warna merah pada tabel.
.info merupakan class yang berfungsi memberi warna biru pada tabel.
.warning merupakan class yang memberi warna kuning pada tabel.

Langkah-langkah Membuat Tabel di Bootstrap

Untuk membuat tabel Bootstrap tidaklah sulit, kok! Apalagi kamu sudah mengetahui berbagai class yang akan membantu proses pembuatan. Sekarang ikuti step by step membuat tabel di Bootstrap berikut ini.

Buat file index.php dan tuliskan kode untuk membuat tabel. Tambahkan class table pada elemen tag <table> pembuka. Berikut ini kode yang bisa kamu contoh.
Untuk membuat tabel border, tambahkan class table-bordered bersamaan dengan class table. Penulisan kodenya <table class=”table table-bordered”>

Untuk membuat tabel strip, tambahkan class table-striped bersamaan dengan class table. Penulisan kodenya <table class=”table table-hover”>
Untuk membuat tabel responsive, letakkan element table di dalam elemen <div> yang diberi class table-responsive. Dengan class table responsive maka tabel yang dibuat akan rapi dan tidak berantakan saat dibuka pada ponsel dengan resolusi layar kecil. Tabel akan muncul utuh dengan tampilan scroll otomatis. Penulisan kodenya <div class=’table-responsive’>

Semoga artikel di atas bisa membantu Sobat MinDi yang akan membuat tabel di Bootstrap, ya! Jika kamu tertarik untuk belajar lebih lanjut tentang dunia programer, jangan lewatkan kesempatan untuk mengikuti bootcamp online by dibimbing.id. Tersedia kelas khusus untuk belajar Web Development , lho! Di situ nanti kamu akan dibimbing secara mendalam oleh para mentor yang berpengalaman di bidangnya. Segera daftarkan dirimu di sini agar tidak kehabisan kuota, ya!