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 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> 4 element, kemudian tambahkan nama class <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> 5, 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.NamaJenis Kelamin1MuhammadLaki-laki2AisyahPerempuan3FatimahPerempuan
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 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> 6 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.NamaJenis Kelamin1MuhammadLaki-laki2AisyahPerempuan3FatimahPerempuan
Table Head Options
Tabel Latar Hitam Judul Kolom
Jika hanya menginginkan bagian kepala (head) atau judul kolomnya saja, gunakan class <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> 7 di dalam element <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> 8 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.NamaJenis Kelamin1MuhammadLaki-laki2AisyahPerempuan3FatimahPerempuan
Jika ingin latar abu-abu, gunakan class <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> 9 di dalam element <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> 8 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.NamaJenis Kelamin1MuhammadLaki-laki2AisyahPerempuan3FatimahPerempuan
Striped rows
Tabel Garis Zebra
Tabel garis zebra dengan latar abu-abu dan putih (selang seling) dapat dibuat dengan memberi tambahan class <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> 1 di dalam element <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> 4 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.NamaJenis Kelamin1MuhammadLaki-laki2AisyahPerempuan3FatimahPerempuan
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.NamaJenis Kelamin1MuhammadLaki-laki2AisyahPerempuan3FatimahPerempuan
Bordered table
Tabel Bergaris
Memberi garis pada setiap sisi tabel dengan menambahkan nama class <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> 3. 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.NamaJenis Kelamin1MuhammadLaki-laki2AisyahPerempuan3FatimahPerempuan
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.NamaJenis Kelamin1MuhammadLaki-laki2AisyahPerempuan3FatimahPerempuan
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.NamaJenis Kelamin1MuhammadLaki-laki2AisyahPerempuan3FatimahPerempuan
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.NamaJenis Kelamin1MuhammadLaki-laki2AisyahPerempuan3FatimahPerempuan
Contoh diatas adalah varian table dari Bootstrap dengan tambahan class <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> 4
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 <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> 5 atau <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> 6 tag.
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> 0
PREVIEW
ClassJudultable-activeCell...Celltable-primaryCelltable-secondaryCelltable-successCelltable-dangerCelltable-warningCelltable-infoCelltable-lightCelltable-darkCell
Captions
Menulis Judul Tabel
Judul tabel dapat dibuat dengan mudah dengan menggunakan element <caption> yang ditulis didalam <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> 4 tag 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> 1
PREVIEW
Data SiswaNo.NamaJenis Kelamin1YudiLaki-laki2SistaPerempuan3DediLaki-laki
Responsive tables
Tabel yang "nge-PAS" (Menyesuaikan Layar)
Agar tabel dapat menyesuaikan layar meskipun layar kecil sekalipun (handphone/smartphone) maka element <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> 4 perlu ditempatkan didalam element <div> atau element lain sebagai kontainer yang diberi nama class <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> 9. Berikut contohnya:
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> 2
PREVIEW
#JudulJudulJudulJudulJudul1CellCellCellCellCell2CellCellCellCellCell3CellCellCellCellCell
Sebagai tambahan, Anda juga dapat mentarget table tersebut responsive hanya untuk ukuran layar tertentu dengan menambahkan breakpoint (<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> 0) sehingga menjadi: