Cara Membuat Table Dengan Bootstrap

Cara Membuat Table Dengan Bootstrap

Table merupakan komponen yang sering digunakan dalam website. Table berguna untuk menampilkan data dalam bentuk tabel.

Bootstrap juga sudah menyediakan komponen untuk pembuatan table, jadi kita dapat dengan mudah membuat tabel dengan cantik dengan bootstrap.

Langsung saja berikut caranya.

Tabel Biasa

Pertama akan membuat sebuah table, lalu berikan class table pada tabel tersbut.

<table class="table">
  <thead>
    <tr>
      <th scope="col">No</th>
      <th scope="col">Nama</th>
      <th scope="col">Alamat</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Ibrahim</td>
      <td>Indonesia</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Richard</td>
      <td>Inggris</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Manolo</td>
      <td>Mexico</td>
    </tr>
  </tbody>
</table>

Coba buka dibrowser dan lihat hasilnya.

Tabel Biasa

Tabel Dark

Kita juga bisa mengganti warna tabel menjadi hitam dengan menambah class table-dark pada tabel.

<table class="table table-dark">

Tabel Dark

Merubah Warna Thead

thead merupakan bagian table yang berada diatas sendiri, atau judul dari tabel.

Kita juga bisa merubah warna dari thead, yaitu menambah class thead-light untuk warna abu-abu, atau thead-dark untuk warna hitam.

Contoh.

<thead class="thead-dark">

Thead

Table Zebra

Table zebra artinya warna pada table tersebut selang -seling, pertama abu-abu, lalu putih.

Cara menggunakanya adalah dengan menambahkan class table-striped pada table.

Contoh.

<table class="table table-striped">

Tabel Zebra

Table Bordered

Table bordered berguna untuk menambahkan border pada setiap sisi tabel.

Caranya dengan menambahkan class table-bordered pada table.

Contoh.

<table class="table table-bordered">

Tabel Bordered

Small Table

Anda juga dapat mengecilkan ukuran tabel, yaitu dengan menambahkan class table-sm pada table.

Contoh.

<table class="table table-sm">

Small Table

Memberi Warna Pada Baris Table

Anda juga bisa memberi warna pada setiab baris tabel, yaitu dengan menambahkan class table-nama-warna pada tr.

Contoh.

<tr class="table-primary">

Warna Pada Baris Table

Caption Pada Table

Untuk menambahkan caption, kita perlu menambahkan tag <caption> dibawah tabel.

Contoh.

<table class="table">
<caption>Data Siswa</caption>

Caption Table

Efek Hover Pada Table

Efek ini berarti ketika kursor mendekati table warnanya akan berubah, caranya dengan memberi class table-hover pada tabel.

Contoh.

<table class="table table-hover">

Table Responsive

Agar table dapat terlihat baik di setiap perangkat, kita perlu menambahkan classtable-responsive pada tabel.

Contoh.

<table class="table table-responsive">

Anda juga dapat menspesifik table akan responsive di perangkar mana saja, dengan menambahkan breakpoints .

Contoh.

<table class="table table-responsive-sm">

Sekian postingan saya karena jentik saya sudah pegel, semoga bermanfaat.

Related Post

Comments

X