Bootstrap 4 :: Percantik Tampilan Table dengan Bootstrap 4

Bootstrap 4 :: Percantik Tampilan Table dengan Bootstrap 4
17 May 2019 No Comments pemrograman2 Site Default

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 :

ClassDescription
.table-primary Biru: Menunjukkan tindakan penting
.table-successHijau: Menunjukkan tindakan yang berhasil atau positif
.table-dangerMerah: Menunjukkan tindakan berbahaya atau berpotensi negatif
.table-infoLight blue: Indicates a neutral informative change or action
.table-warningBiru muda: Menunjukkan perubahan atau tindakan informatif yang netral
.table-activeAbu-abu: Menerapkan warna hover ke baris tabel atau sel tabel
.table-secondaryAbu-abu: Menunjukkan tindakan yang sedikit kurang penting
.table-lightTabel abu-abu terang atau latar belakang baris tabel
.table-darkTabel abu-abu gelap atau latar belakang baris tabel

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

  <table class="table table-striped">
About The Author