BLANTERORIONv101

Cara Membuat Tabel Responsive dengan Bootstrap

4 Juli 2022
Cara Membuat Tabel Responsive dengan Bootstrap

Apa Itu Tabel?

Tabel biasanya digunakan untuk menyajikan data secara grid seperti kolom dan baris. Bootstrap merupakan sebuah framework HTML, CSS dan Javascript. Dengan menggunakan Bootstrap kita dapat dengan mudah dan cepat mendesain sebuah website reponsive. Untuk studi kasus kali ini yaitu membuat tabel responsive dengan bantuan Bootstrap.

Untuk menggunakan tabel bootstrap, kita perlu untuk memperhatikan beberapa aspek penting, yaitu dengan menambahkan css dan js.

CSS

Copy dan paste css link ke dalam tag <head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

JS

Copy dan paste js link sebelum tag </body>.
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>


Membuat Table Sederhana dengan Bootstrap

Contoh kali ini kita akan membuat tabel sederhana dengan gaya dasar.
<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Clark</td>
            <td>Kent</td>
            <td>clarkkent@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr> 
        <tr>
            <td>3</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>                   
    </tbody>
</table>
Simpel Tabel Bootstrap
Gambar 1. Output dari contoh diatas.

Membuat Dark Table dengan Bootstrap

Pada contoh ini kita akan membuat tabel dengan dengan tampilan dark atau gelap.
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
Gambar 2. Output Dark Table

Membuat Striped Rows Table dengan Bootstrap

Pada contoh ini kita akan membuat table dengan gaya striped
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
Gambar 3. Output Striped Table


Masih ada beberapa contoh untuk membuat table dengan bootstrap. Anda bisa langsung kunjungi website Bootstrap untuk mempelajarinya. Disini saya hanya memberikan contoh kecil untuk Anda. Semoga artikel ini bermanfaat untuk Anda, terimakasih.
Sumber: Bootstrap

1 komentar

  1. SarjanaIT
    14 Juli 2022 18.46

    Hello

    Reply