Di artikel sebelumnya, kita sudah mengenal apa itu Bootstrap dan cara menggunakannya. Sekarang, kita akan melangkah lebih jauh dan belajar cara membuat tabel yang tidak hanya rapi, tetapi juga responsif dan menarik secara visual menggunakan kelas-kelas bawaan dari Bootstrap.

Tabel adalah elemen HTML yang sangat penting untuk menampilkan data terstruktur. Namun, membuat tabel yang terlihat bagus di semua perangkat bisa menjadi tantangan. Bootstrap menyederhanakan proses ini dengan menyediakan berbagai kelas CSS yang dapat Anda tambahkan langsung ke tag <table> Anda.

Struktur Dasar Tabel Bootstrap

Untuk memulai, pastikan Anda telah menyertakan file CSS dan JavaScript Bootstrap di proyek Anda, seperti yang dijelaskan di tutorial sebelumnya. Struktur dasar sebuah tabel di HTML tetap sama, hanya saja kita akan menambahkan kelas khusus dari Bootstrap.

<div class="container mt-5">
    <h2>Daftar Produk Unggulan</h2>
    <table class="table">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Nama Produk</th>
                <th scope="col">Stok</th>
                <th scope="col">Harga</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Bakso Malang Frozen</td>
                <td>50</td>
                <td>Rp 25.000</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Keripik Tempe Aneka Rasa</td>
                <td>120</td>
                <td>Rp 15.000</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Apel Malang Organik</td>
                <td>80</td>
                <td>Rp 30.000</td>
            </tr>
        </tbody>
    </table>
</div>

Dalam kode di atas, kita menggunakan kelas dasar .table. Ini akan memberikan tampilan dasar yang rapi pada tabel, termasuk padding dan garis horizontal tipis di antara baris.

Kelas-Kelas Bootstrap untuk Mempercantik Tabel

Bootstrap menyediakan banyak kelas tambahan yang bisa digabungkan dengan .table untuk mengubah tampilan tabel sesuai kebutuhan Anda.

1. Tabel Bergaris (Striped Rows) Untuk memberikan warna latar belakang yang berbeda pada setiap baris genap, tambahkan kelas .table-striped. Ini membuat tabel lebih mudah dibaca, terutama untuk data yang panjang.
   HTML

   <table class="table table-striped">
     ...
   </table>
   

2. Tabel Berbatasan (Bordered Table) Jika Anda ingin tabel memiliki garis batas di sekeliling setiap sel, tambahkan kelas .table-bordered.
   HTML

   <table class="table table-bordered">
     ...
   </table>
   

3. Tabel Tanpa Garis (Borderless Table) Sebaliknya, jika Anda ingin menghilangkan semua garis batas, gunakan kelas .table-borderless.
   HTML

   <table class="table table-borderless">
     ...
   </table>
   

4. Tabel Hoverable Kelas .table-hover memberikan efek perubahan warna pada baris ketika kursor diarahkan ke atasnya (hover). Ini meningkatkan interaktivitas dan navigasi.
   HTML

   <table class="table table-hover">
     ...
   </table>
   

5. Tabel Berukuran Kecil (Small Table) Untuk membuat tabel yang lebih ringkas dengan padding yang lebih kecil, tambahkan kelas .table-sm.
   HTML

   <table class="table table-sm">
     ...
   </table>
   

6. Warna Tema Tabel Anda bisa mengubah warna baris atau sel dengan menggunakan kelas-kelas warna kontekstual Bootstrap, seperti .table-primary, .table-success, .table-table-danger, dan lain-lain.
   HTML

   <tr class="table-success">
     ...
   </tr>
   

Tabel Responsif

Fitur paling kuat dari tabel Bootstrap adalah kemampuannya untuk menjadi responsif. Di layar kecil seperti smartphone, tabel yang lebar bisa menyebabkan tampilan terpotong. Untuk mengatasinya, cukup bungkus tag <table class="table"> Anda di dalam sebuah <div> dengan kelas .table-responsive.

<div class="table-responsive">
    <table class="table">
      ...
    </table>
</div>

Kelas .table-responsive secara otomatis akan menambahkan scroll horizontal pada tabel jika tampilannya melebihi lebar layar, sehingga pengguna masih bisa melihat seluruh konten tabel tanpa perlu memperbesar halaman.

Kesimpulan

Membuat tabel yang terlihat bagus di era mobile-first tidak lagi sulit berkat Bootstrap. Hanya dengan menambahkan beberapa kelas CSS, Anda bisa dengan cepat mengubah tampilan dan fungsionalitas tabel Anda, mulai dari desain yang sederhana hingga yang interaktif. Dengan menggabungkan berbagai kelas seperti .table-striped, .table-hover, dan membungkusnya dalam .table-responsive, Anda dapat menyajikan data terstruktur dengan cara yang efisien dan ramah pengguna di semua perangkat. Selamat mencoba, dan sampai jumpa di tutorial selanjutnya! 👨‍💻