Mr.Q: 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

Mr.Q

Selasa, 09 Juni 2020

Membuat Tabel

Dark Table
Tabel Gelap dengan latar Hitam

Table Head Options
Tabel Latar Hitam Judul Kolom

Striped rows
Tabel Garis Zebra

Bordered table
Tabel Bergaris

Hoverable rows

Small table
Tabel Ukuran Kecil (Sempit)

Contextual classes
Beberapa kelas untuk mewarnai baris tabel

Captions
Menulis Judul Tabel

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

Tidak ada komentar:

Posting Komentar

Arsip Blog

Mengenai Saya

Selasa, 09 Juni 2020

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)

Tidak ada komentar:

Posting Komentar

Dark Table
Tabel Gelap dengan latar Hitam

Table Head Options
Tabel Latar Hitam Judul Kolom

Striped rows
Tabel Garis Zebra

Bordered table
Tabel Bergaris

Small table
Tabel Ukuran Kecil (Sempit)

Contextual classes
Beberapa kelas untuk mewarnai baris tabel

Captions
Menulis Judul Tabel

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