Bootstrap 4 Tables - Membuat Tabel

Bootstrap 4 Tables - Membuat Tabel

BOOTSTRAP Fadlullah Fadul December 3, 2018

Anda akan belajar bagaimana membuat tabel dengan bootstrap. Jika Anda sebelumnya telah mempelajari HTML <table> Tag, maka Anda juga dapat dengan mudah menyisipkan tabel di dalam HTML yang ditenagai oleh Bootstrap.

Bootstrap menyediakan style khusus tinggal pakai untuk membuat tabel dengan mudah dan cepat tapi tetap dengan tampilkan indah dan baik.

Membuat Tabel

Untuk membuat tabel, gunakan HTML <table> element, kemudian tambahkan nama class .table, selanjutnya akan dijelaskan tambahan lain (modifier) yang akan dipaparkan berikutnya.

Tabel sederhana dapat dibuat dengan contoh berikut:

HTML
editor 
<table class="table">
  <thead>
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Nama</th>
      <th scope="col">Jenis Kelamin</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Muhammad</td>
      <td>Laki-laki</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Aisyah</td>
      <td>Perempuan</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Fatimah</td>
      <td>Perempuan</td>
    </tr>
  </tbody>
</table>
PREVIEW
No. Nama Jenis Kelamin
1 Muhammad Laki-laki
2 Aisyah Perempuan
3 Fatimah Perempuan

Perhatikan contoh diatas, thead menunjukkan table head (kepala tabel), tr adalah table row (baris tabel), th ialah table heading yang bisanya digunakan untuk judul kolom. tbody menunjukkan table body (untuk konten atau baris data), td adalah table data cell adalah baris data sebuah sel (cell).

Dark Table
Tabel Gelap dengan latar Hitam

Membuat tabel dengan latar (background) hitam. Gunakan tambahan class table-dark di dalam element <table> seperti contoh berikut:

HTML
editor 
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Nama</th>
      <th scope="col">Jenis Kelamin</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Muhammad</td>
      <td>Laki-laki</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Aisyah</td>
      <td>Perempuan</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Fatimah</td>
      <td>Perempuan</td>
    </tr>
  </tbody>
</table>
PREVIEW
No. Nama Jenis Kelamin
1 Muhammad Laki-laki
2 Aisyah Perempuan
3 Fatimah Perempuan

Table Head Options
Tabel Latar Hitam Judul Kolom

Jika hanya menginginkan bagian kepala (head) atau judul kolomnya saja, gunakan class .thead-dark di dalam element <thead> seperti contoh di bawah ini.

HTML
editor 
<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Nama</th>
      <th scope="col">Jenis Kelamin</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Muhammad</td>
      <td>Laki-laki</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Aisyah</td>
      <td>Perempuan</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Fatimah</td>
      <td>Perempuan</td>
    </tr>
  </tbody>
</table>
PREVIEW
No. Nama Jenis Kelamin
1 Muhammad Laki-laki
2 Aisyah Perempuan
3 Fatimah Perempuan

Jika ingin latar abu-abu, gunakan class .thead-light di dalam element <thead> seperti berikut:

HTML
editor 
<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Nama</th>
      <th scope="col">Jenis Kelamin</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Muhammad</td>
      <td>Laki-laki</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Aisyah</td>
      <td>Perempuan</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Fatimah</td>
      <td>Perempuan</td>
    </tr>
  </tbody>
</table>
PREVIEW
No. Nama Jenis Kelamin
1 Muhammad Laki-laki
2 Aisyah Perempuan
3 Fatimah Perempuan

Striped rows
Tabel Garis Zebra

Tabel garis zebra dengan latar abu-abu dan putih (selang seling) dapat dibuat dengan memberi tambahan class .table-striped di dalam element <table> seperti contoh berikut:

HTML
editor 
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Nama</th>
      <th scope="col">Jenis Kelamin</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Muhammad</td>
      <td>Laki-laki</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Aisyah</td>
      <td>Perempuan</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Fatimah</td>
      <td>Perempuan</td>
    </tr>
  </tbody>
</table>
PREVIEW
No. Nama Jenis Kelamin
1 Muhammad Laki-laki
2 Aisyah Perempuan
3 Fatimah Perempuan

Table zebra juga dapat dibuat dengan latar hitam seperti contoh di bawah ini:

HTML
editor 
<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Nama</th>
      <th scope="col">Jenis Kelamin</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Muhammad</td>
      <td>Laki-laki</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Aisyah</td>
      <td>Perempuan</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Fatimah</td>
      <td>Perempuan</td>
    </tr>
  </tbody>
</table>
PREVIEW
No. Nama Jenis Kelamin
1 Muhammad Laki-laki
2 Aisyah Perempuan
3 Fatimah Perempuan

Bordered table
Tabel Bergaris

Memberi garis pada setiap sisi tabel dengan menambahkan nama class .table-bordered. Ini contohnya:

HTML
editor 
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Nama</th>
      <th scope="col">Jenis Kelamin</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Muhammad</td>
      <td>Laki-laki</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Aisyah</td>
      <td>Perempuan</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Fatimah</td>
      <td>Perempuan</td>
    </tr>
  </tbody>
</table>
PREVIEW
No. Nama Jenis Kelamin
1 Muhammad Laki-laki
2 Aisyah Perempuan
3 Fatimah Perempuan

Apabila menggunakan latar hitam (table-dark) maka hasilnya seperti ini:

HTML
editor 
<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Nama</th>
      <th scope="col">Jenis Kelamin</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Muhammad</td>
      <td>Laki-laki</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Aisyah</td>
      <td>Perempuan</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Fatimah</td>
      <td>Perempuan</td>
    </tr>
  </tbody>
</table>
PREVIEW
No. Nama Jenis Kelamin
1 Muhammad Laki-laki
2 Aisyah Perempuan
3 Fatimah Perempuan

Hoverable rows

Tabel melayang yang apabila kursor berada di atas baris tabel, maka latar (background) memiliki style khusus.

Pada contoh di bawah ini, coba tap atau arahkan kursor di atas baris tabel, lihat perbedaannya.

HTML
editor 
<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Nama</th>
      <th scope="col">Jenis Kelamin</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Muhammad</td>
      <td>Laki-laki</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Aisyah</td>
      <td>Perempuan</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Fatimah</td>
      <td>Perempuan</td>
    </tr>
  </tbody>
</table>
PREVIEW
No. Nama Jenis Kelamin
1 Muhammad Laki-laki
2 Aisyah Perempuan
3 Fatimah Perempuan

Small table
Tabel Ukuran Kecil (Sempit)

Tabel dengan ukuran kecil dan ramping. Tabel seperti ini digunakan menghemat ruang (padding) pada sebuah baris kolom agar terlihat kompak dan ramping.

HTML
editor 
<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Nama</th>
      <th scope="col">Jenis Kelamin</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Muhammad</td>
      <td>Laki-laki</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Aisyah</td>
      <td>Perempuan</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Fatimah</td>
      <td>Perempuan</td>
    </tr>
  </tbody>
</table>
PREVIEW
No. Nama Jenis Kelamin
1 Muhammad Laki-laki
2 Aisyah Perempuan
3 Fatimah Perempuan

Contoh diatas adalah varian table dari Bootstrap dengan tambahan class .table-sm

Contextual classes
Beberapa kelas untuk mewarnai baris tabel

Gunakan class tambahan seperti contoh dibawah ini untuk mewarnai dan membedakan baris tabel satu dengan lainnya. Letakkan nama class di dalam <tr> atau <td> tag.

HTML
editor 
<table class="table">
    <thead>
      <tr>
        <th scope="col">Class</th>
        <th scope="col">Judul</th>
      </tr>
    </thead>
    <tbody>
      <tr class="table-active">
        <th scope="row">table-active</th>
        <td>Cell</td>
      </tr>
      <tr>
        <th scope="row">...</th>
        <td>Cell</td>
      </tr>
      <tr class="table-primary">
        <th scope="row">table-primary</th>
        <td>Cell</td>
      </tr>
      <tr class="table-secondary">
        <th scope="row">table-secondary</th>
        <td>Cell</td>
      </tr>
      <tr class="table-success">
        <th scope="row">table-success</th>
        <td>Cell</td>
      </tr>
      <tr class="table-danger">
        <th scope="row">table-danger</th>
        <td>Cell</td>
      </tr>
      <tr class="table-warning">
        <th scope="row">table-warning</th>
        <td>Cell</td>
      </tr>
      <tr class="table-info">
        <th scope="row">table-info</th>
        <td>Cell</td>
      </tr>
      <tr class="table-light">
        <th scope="row">table-light</th>
        <td>Cell</td>
      </tr>
      <tr class="table-dark">
        <th scope="row">table-dark</th>
        <td>Cell</td>
      </tr>
    </tbody>
  </table>
PREVIEW
Class Judul
table-active Cell
... Cell
table-primary Cell
table-secondary Cell
table-success Cell
table-danger Cell
table-warning Cell
table-info Cell
table-light Cell
table-dark Cell

Captions
Menulis Judul Tabel

Judul tabel dapat dibuat dengan mudah dengan menggunakan element <caption> yang ditulis didalam <table> tag seperti contoh berikut:

HTML
editor 
<table class="table">
  <caption>Data Siswa</caption>
  <thead>
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Nama</th>
      <th scope="col">Jenis Kelamin</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Yudi</td>
      <td>Laki-laki</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Sista</td>
      <td>Perempuan</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Dedi</td>
      <td>Laki-laki</td>
    </tr>
  </tbody>
</table>
PREVIEW
Data Siswa
No. Nama Jenis Kelamin
1 Yudi Laki-laki
2 Sista Perempuan
3 Dedi Laki-laki

Responsive tables
Tabel yang "nge-PAS" (Menyesuaikan Layar)

Agar tabel dapat menyesuaikan layar meskipun layar kecil sekalipun (handphone/smartphone) maka element <table> perlu ditempatkan didalam element <div> atau element lain sebagai kontainer yang diberi nama class table-responsive. Berikut contohnya:

HTML
editor 
<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Judul</th>
        <th scope="col">Judul</th>
        <th scope="col">Judul</th>
        <th scope="col">Judul</th>
        <th scope="col">Judul</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
    </tbody>
  </table>
</div>
PREVIEW
# Judul Judul Judul Judul Judul
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell

Sebagai tambahan, Anda juga dapat mentarget table tersebut responsive hanya untuk ukuran layar tertentu dengan menambahkan breakpoint (sm, md, lg, xl) sehingga menjadi:

  • .table-responsive-sm (ukuran layar small / kecil)
  • .table-responsive-md (ukuran layar middle / sedang)
  • .table-responsive-lg (ukuran layar large / besar)
  • .table-responsive-xl (ukuran layar extra large / sangat besar)

Berikut contohnya:

HTML
editor 
<div class="table-responsive-sm">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Judul</th>
        <th scope="col">Judul</th>
        <th scope="col">Judul</th>
        <th scope="col">Judul</th>
        <th scope="col">Judul</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
    </tbody>
  </table>
</div>
PREVIEW
# Judul Judul Judul Judul Judul
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell
SHARE
Previous Article Next Article