Menata Tampilan Tabel dengan Lebih Mudah dan Efisien menggunakan Bootstrap

 Bootstrap Table

src: pngwing

   Tabel adalah salah satu elemen penting dalam tampilan website yang digunakan untuk menampilkan data dalam bentuk yang terstruktur dan mudah dibaca. Bootstrap, salah satu framework front-end yang populer digunakan oleh para pengembang web, menyediakan komponen Tabel yang dapat membantu meningkatkan tampilan dan fungsionalitas tabel dalam website.

     Komponen Tabel Bootstrap memiliki banyak fitur yang berguna, seperti pengaturan ukuran kolom, penyusunan kolom secara otomatis, penambahan tanda centang atau ikon pada baris yang dipilih, dan sebagainya. Selain itu, komponen Tabel Bootstrap juga mendukung berbagai opsi untuk memperbaiki tampilan tabel dan membuatnya lebih menarik dan mudah dibaca.

Berikut adalah fitur-fitur utama Tabel pada Bootstrap:

1.  Pengaturan Ukuran Kolom: Komponen Tabel Bootstrap memungkinkan pengembang web untuk mengatur ukuran kolom tabel secara fleksibel. Hal ini sangat berguna ketika ada beberapa kolom tabel yang perlu ditampilkan dengan ukuran yang berbeda untuk memudahkan pembacaan.

2. Penyusunan Kolom Otomatis: Dalam Tabel Bootstrap, pengembang web tidak perlu menulis kode tambahan untuk menyusun kolom secara otomatis. Bootstrap secara otomatis akan menyesuaikan susunan kolom sesuai dengan ukuran layar perangkat pengguna.

3.  Pengaturan Tipe Data: Tabel Bootstrap mendukung berbagai tipe data seperti angka, teks, dan gambar. Hal ini memungkinkan pengembang web untuk menampilkan data dalam bentuk yang lebih variatif dan menarik.

4. Penambahan Tanda Centang/Ikon pada Baris Terpilih: Dalam Tabel Bootstrap, pengembang web dapat menambahkan tanda centang atau ikon pada baris yang dipilih untuk memudahkan pengguna dalam melihat data yang dipilih.

5. Opsi Sortir dan Pencarian: Komponen Tabel Bootstrap mendukung fitur sortir dan pencarian, sehingga pengguna dapat dengan mudah menemukan data yang mereka cari.

Cara Menggunakan Tabel pada Bootstrap:

Tabel pada Bootstrap dapat digunakan dengan mudah dengan hanya menambahkan kelas Bootstrap pada elemen HTML. Berikut adalah contoh penggunaan Tabel pada Bootstrap:

<div class="container" style="padding-top: 6rem;">

      <table class="table">

        <thead>

          <tr>

            <th scope="col">No</th>

            <th scope="col">Nama</th>

            <th scope="col">Alamat</th>

            <th scope="col">Telepon</th>

          </tr>

        </thead>

        <tbody>

          <tr>

            <th scope="row">1</th>

            <td>Andi</td>

            <td>Jl. Sudirman No.1</td>

            <td>084444444444</td>

          </tr>

          <tr>

            <th scope="row">1</th>

            <td>Budi</td>

            <td>Jl. Thamrin No.2</td>

            <td>085555555555</td>

          </tr>

          <tr>

            <th scope="row">1</th>

            <td>Cici</td>

            <td>Jl. Gajahmada No.3</td>

            <td>086666666666</td>

          </tr>

        </tbody>

      </table>

    </div>

Output:

   Pada contoh di atas, terdapat elemen "<table>" dengan kelas table. Selanjutnya, ada elemen "<thead>" untuk bagian kepala tabel yang berisi baris dengan kelas "table-header". Pada baris kepala tersebut, terdapat elemen "<th>" untuk menampilkan judul kolom.

    Setelah bagian kepala, ada elemen "<tbody>" yang berisi baris-baris data dengan kelas "table-row". Pada setiap baris data, terdapat elemen "<td>" untuk menampilkan isi kolom.

   Selain menggunakan kelas table, Bootstrap juga menyediakan beberapa kelas tambahan untuk mengatur tampilan Tabel. Berikut adalah beberapa kelas Bootstrap yang umum digunakan untuk Tabel:

1. ".table-striped": Digunakan untuk memberikan warna bergaris pada setiap baris tabel.

2. ".table-bordered": Digunakan untuk menambahkan garis tepi pada tabel.

3. ".table-hover": Digunakan untuk memberikan efek hover pada setiap baris tabel.

4. ".table-responsive": Digunakan untuk membuat Tabel responsif agar dapat menyesuaikan ukuran layar pengguna.

Contoh penggunaan kelas pada Tabel Bootstrap:

<div class="container table-striped table-bordered table-hover table-responsive" style="padding-top: 6rem;">

      <table class="table">

        <thead>

          <tr>

            <th scope="col">No</th>

            <th scope="col">Nama</th>

            <th scope="col">Alamat</th>

            <th scope="col">Telepon</th>

          </tr>

        </thead>

        <tbody>

          <tr>

            <th scope="row">1</th>

            <td>Andi</td>

            <td>Jl. Sudirman No.1</td>

            <td>084444444444</td>

          </tr>

          <tr>

            <th scope="row">1</th>

            <td>Budi</td>

            <td>Jl. Thamrin No.2</td>

            <td>085555555555</td>

          </tr>

          <tr>

            <th scope="row">1</th>

            <td>Cici</td>

            <td>Jl. Gajahmada No.3</td>

            <td>086666666666</td>

          </tr>

        </tbody>

      </table>

    </div>

   Dalam penggunaan Tabel pada Bootstrap, pastikan untuk memperhatikan penggunaan kelas dengan tepat dan mengikuti prinsip-prinsip desain yang baik. Dengan menggunakan Tabel Bootstrap, Anda dapat meningkatkan tampilan dan fungsionalitas tabel dalam website dengan lebih mudah dan efisien.