Selasa, 09 Juni 2020

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
<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 Kelamin
1MuhammadLaki-laki
2AisyahPerempuan
3FatimahPerempuan
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
<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 Kelamin
1MuhammadLaki-laki
2AisyahPerempuan
3FatimahPerempuan

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
<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 Kelamin
1MuhammadLaki-laki
2AisyahPerempuan
3FatimahPerempuan
Jika ingin latar abu-abu, gunakan class .thead-light di dalam element <thead> seperti berikut:
HTML
<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 Kelamin
1MuhammadLaki-laki
2AisyahPerempuan
3FatimahPerempuan

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
<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 Kelamin
1MuhammadLaki-laki
2AisyahPerempuan
3FatimahPerempuan
Table zebra juga dapat dibuat dengan latar hitam seperti contoh di bawah ini:
HTML
<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 Kelamin
1MuhammadLaki-laki
2AisyahPerempuan
3FatimahPerempuan

Bordered table
Tabel Bergaris

Memberi garis pada setiap sisi tabel dengan menambahkan nama class .table-bordered. Ini contohnya:
HTML
<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 Kelamin
1MuhammadLaki-laki
2AisyahPerempuan
3FatimahPerempuan
Apabila menggunakan latar hitam (table-dark) maka hasilnya seperti ini:
HTML
<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 Kelamin
1MuhammadLaki-laki
2AisyahPerempuan
3FatimahPerempuan

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
<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 Kelamin
1MuhammadLaki-laki
2AisyahPerempuan
3FatimahPerempuan

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
<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 Kelamin
1MuhammadLaki-laki
2AisyahPerempuan
3FatimahPerempuan
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
<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
ClassJudul
table-activeCell
...Cell
table-primaryCell
table-secondaryCell
table-successCell
table-dangerCell
table-warningCell
table-infoCell
table-lightCell
table-darkCell

Captions
Menulis Judul Tabel

Judul tabel dapat dibuat dengan mudah dengan menggunakan element <caption> yang ditulis didalam <table> tag seperti contoh berikut:
HTML
<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.NamaJenis Kelamin
1YudiLaki-laki
2SistaPerempuan
3DediLaki-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
<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
#JudulJudulJudulJudulJudul
1CellCellCellCellCell
2CellCellCellCellCell
3CellCellCellCellCell
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
<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
#JudulJudulJudulJudulJudul
1CellCellCellCellCell
2CellCellCellCellCell
3CellCellCellCellCell

Tidak ada komentar:

Posting Komentar