Cara menggunakan table-responsive bootstrap

Question

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.

Table of Contents Show

Membuat Tabel
Dark TableTabel Gelap dengan latar Hitam
Table Head OptionsTabel Latar Hitam Judul Kolom
Striped rowsTabel Garis Zebra
Bordered tableTabel Bergaris
Hoverable rows
Small tableTabel Ukuran Kecil (Sempit)
Contextual classesBeberapa kelas untuk mewarnai baris tabel
CaptionsMenulis Judul Tabel
Responsive tablesTabel yang "nge-PAS" (Menyesuaikan Layar)
Apa itu Table hover?
Apa itu Bootstrap 5?
Kelas apa yang digunakan dalam bootstrap untuk membuat bentuk gambar menjadi lingkaran?

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 TableTabel 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 OptionsTabel 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 rowsTabel 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 tableTabel 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 tableTabel 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 classesBeberapa 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

CaptionsMenulis 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 tablesTabel 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:

Apa itu Table hover?

Table hover adalah table yang baris tablenya bisa berubah warna ketika diletakkan cursor mouse di atasnya.

Apa itu Bootstrap 5?

Tentang Kelas. Bootstrap adalah sebuah framework yang paling populer digunakan untuk membuat sebuah website. Bootstrap membuat front-end developer dapat membuat website dengan cepat, fokus pada responsive mobile, dan membuat website menjadi lebih interaktif tanpa membuat banyak CSS dan JavaScript dari nol.