Menerapkan Table Inverse pada Bootstrap 4

Hallo semuanya, pada tutorial kali ini kita akan coba membuat table menggunakan Bootstrap menggunakan versi terbaru, yaitu versi 4 beta. Yang pasti, kalian sudah tau apa itu Bootstrap, kalau ada yang belum tau disini saya akan jelaskan sedikit apa itu Bootstrap. Bootstrap adalah Front-end framework untuk membuat sebuah website yang responsive atau dapat dijalankan disemua ukuran layar. Bootstrap ini juga sangat mempermudah dalam membangun sebuah website dengan cepat. Nah pada tutorial kali ini kita akan belajar mengenai bagaimana cara membuat sebuah table responsive menggunakan Bootstrap 4 yang sangat powerful. Baiklah langsung saja kita mulai pembahasannya.

Disini saya menganggap kalian sudah mengerti cara menghubungkan file bootstrap  dengan HTML yang kalian punya.  

Selanjutnya kita akan bahas tentang Bagian apa saja yang berubah pada bootstrap versi 4 beta ini.

Disini kita akan membuat sebuah table biasa menggunakan class table pada bootstrap seerti berikut

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</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>

Maka hasilnya akan seperti ini.

Perubahan pada bootstrap 4 memberikan kesempatan bagi penggunak untuk mengganti background table menjadi gelap hanya dengan menambahkan nama class .table-inverse pada tag <table> maka akan menjadi seperti ini

Atau kalian juga bisa meletakkan class .thead-inverse pada tag <thead> di HTML sehingga judul kolom table akan menjadi gelap seperti ini

Atau bisa juga menggunakan class .thead-default seperti ini.

Dari penjelasan diatas sebenarnya kalian masih bisa memberikan kombinasi dengan table-stripped ataupun table-hover, disini kalian juga bisa menggunakan contextual classes untuk memberi warna pada kolom atau baris table. Apa itu contextual classes? Nanti kita akan bahas pada artikel lainnya.

Baiklah teman teman, demikian artikel yang membahas tentang penerapan table-inverse pada bootstrap 4, semoga dapat bermanfaat untuk pengetahuan kalian tentang fitur baru bootstrap 4 ini.