Bootstrap 4 :: Percantik Tampilan Table dengan Bootstrap 4

Setelah membuat table tentu kita ingin mempercantiknya agar terlihat bagus dan profesional. Salah satu1 cara mempercantik table adalah dengan menggunakan Bootsrtap4 dapat di diwnload disini

Bootstrap 4 adalah versi terbaru dari Bootstrap; dengan komponen baru, stylesheet yang lebih cepat dan lebih responsif. Bootstrap 4 mendukung rilis terbaru dan stabil dari semua browser dan platform utama. Namun, Internet Explorer 9 dan ke bawah tidak didukung.

Langkah pertama yang harus kita lakukan adalah dengan bukak view table kita dan masukkan link bootsrap di dalam head tepatnya di bawah <title> kita seperti dibawah

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

Bootstrap 4 Basic Table

Tabel Bootstrap 4 dasar memiliki padding cahaya dan pembagi horizontal.Class .table menambahkan gaya dasar ke sebuah tabel:

<table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>

Striped Rows

Tabel Bootstrap 4 dasar memiliki padding cahaya dan pembagi horizontal. Class .table menambahkan gaya dasar ke sebuah tabel:

<table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>

Bordered Table

Class .table-bounded menambahkan batas di semua sisi tabel dan sel:

<table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>

Selanjutnya masih ada beberapa class lagi yaitu :

1. Class .table-hover menambahkan efek hover (warna latar abu-abu) pada baris tabel:
2. Class .table-dark menambahkan latar belakang hitam ke tabel:
3. Gabungkan .table-dark dan .table-striped untuk membuat tabel gelap, bergaris:
4. Class.table-hover menambahkan efek hover (warna latar abu-abu) pada baris tabel:
5. Class .table-borderless menghapus batas dari tabel:

Penggabungan dua nama clas dilakukan dengan cara beikut :

<table class="table table-dark table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
       </tbody>
  </table>

selanjunya mari kita coba mengenal class table pada bootstrap, ada beberapa class yang untuk table yaitu :

Untuk cara penggunaannya sendiri, kita tambahkan clas pada <table> seperti pada contoh berikut

  <table class="table table-striped">