7 Jenis Default Table Class Pada Bootstrap yang Perlu Kamu Tau

Membuat table pada HTML memerlukan waktu lebih lama ketimbang menggunakan framework Bootstrap, Bootstrap telah menyediakan beberapa class yang dapat digunakan dalam membangun table di blog / web. Masalahnya, kamu harus tau dan mengerti class-class tersebut.

Berikut ini class-class yang disediakan Bootstrap untuk membuat table:

Basic Table

Untuk membuat table dengan cepat pada Bootstrap hanya memerlukan class table, ini juga sebagai dasar table Bootstrap.

<table class="table">
  <thead>
    <tr>
      <th>Domain</th>
      <th>Negara</th>
      <th>Nomor Telepon</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>posciety.com</td>
      <td>Indonesia</td>
      <td>+62</td>
    </tr>
    <tr>
      <td>posciety.com</td>
      <td>Indonesia</td>
      <td>+62</td>
    </tr>
  </tbody>
</table>

Hasilnya akan terlihat seperti ini:

gambar 1 - table dasar bootstrap

Responsive Table

Jika ingin membuat table responsive Bootstrap, gunakan class table-responsive seperti ini:

<div class="table-responsive">          
<table class="table">
  <thead>
    <tr>
      <th>NO</th>
      <th>Benua</th>
      <th>Negara</th>
      <th>Pulau</th>
      <th>Provinsi</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>ASIA</td>
      <td>Indonesia</td>
      <td>Jawa</td>
      <td>Jawa Barat</td>
    </tr>
    <tr>
      <td>2</td>
      <td>ASIA</td>
      <td>Indonesia</td>
      <td>Sumatera</td>
      <td>Bengkulu</td>
    </tr>
  </tbody>
</table>
</div>

Pada contoh di atas menggunakan div sebagai induk table, beberapa pengembang juga biasanya meletakkan class table-reponsive langsung di dalam tag table bersamaan dengan class table. Hasilnya sama aja akan terlihat seperti ini:

gambar 2 - table responsive bootstrap

Untuk membuktikan responsive nya, ubahlah ukuran website kamu ke ukuran lain seperti ukuran tablet  / HP.

Table Berwarna

Bawaan table itu berwarna dasar putih atau polos tanpa garis penuh sisi, kamu dapat memberikan warna pada setiap baris bahkan warna yang berbeda-beda dengan menggunakan contextual class yang pernah dibahas sebelumnya pada postingan tentang memberi warna pada tulisan dan memberi warna background pada tulisan.

<h2>Table Bootstrap Berwarna - Posciety</h2>
  <table class="table">
    <thead>
      <tr>
        <th>Warna</th>
        <th>class</th>
        <th>Situs</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td>-</td>
        <td>posciety.com</td>
      </tr>      
      <tr class="success">
        <td>Hijau</td>
        <td>success</td>
        <td>posciety.com</td>
      </tr>
      <tr class="danger">
        <td>Merah</td>
        <td>danger</td>
        <td>posciety.com</td>
      </tr>
      <tr class="info">
        <td>Biru</td>
        <td>info</td>
        <td>posciety.com</td>
      </tr>
      <tr class="warning">
        <td>Kuning/Orange</td>
        <td>warning</td>
        <td>posciety.com</td>
      </tr>
      <tr class="active">
        <td>Gelap / Pudar</td>
        <td>Aktif</td>
        <td>posciety.com</td>
      </tr>
    </tbody>
  </table>

Ini adalah warna dari kontekstual class Bootstrap, kamu dapat menyesuaikan warna lain jika ingin warna yang berbeda. Dari kodingan di atas akan terlihat hasilnya terlihat seperti ini :

gambar 3 - table bootstrap berwarna

Table Bergaris (Belang)

Beberapa pengguna Bootstrap juga menggunakan class table-stiped dalam membuat table agar table gak polos banget, sedikit lebih menarik tapi masih sederhana dengan balutan warna terang dan gelap yang berbeda-beda setiap barisnya.

<h2>Striped Table Bootstrap - Posciety</h2>          
<table class="table table-striped">
  <thead>
    <tr>
      <th>Negara</th>
      <th>Identitas</th>
      <th>No HP</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Indonesia</td>
      <td>KTP</td>
      <td>+62</td>
    </tr>
    <tr>
      <td>Indonesia</td>
      <td>KTP</td>
      <td>+62</td>
    </tr>
  </tbody>
</table>

Akan tampak belang seperti Zebra:

gambar 4 - table belang zebra strped bootstrap

Table Padat

Ini merupakan table Bootstrap yang dibangun tanpa jarak (padding) ditengah-tengah sehingga table tampak padat berisi. Gunakan class table-condensed untuk membangun table seperti ini di Bootstrap.

<h2>Table Tanpa Padding Bootstrap - Posciety</h2>    
  <table class="table table-condensed">
    <thead>
      <tr>
        <th>Bahasa</th>
        <th>Language</th>
        <th>Where ?</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Indonesia</td>
        <td>English</td>
        <td>World</td>
      </tr>
       <tr>
        <td>Indonesia</td>
        <td>English</td>
        <td>World</td>
      </tr>
    </tbody>
  </table>

Table tanpa spasi (jarak padding) diantara kotak item ini akan tampak seperti:

gambar 5 - table bootstrap tanpa spasi jarak

Table Border

Jika diperhatikan pada contoh-contoh di atas, table tersebut tidak memiliki border atau garis luaran yang menutupi table. Jika memerlukan garis border pada table Bootstrap silahkan gunakan class table-bordered.

<h2>Table Border Bootstrap - Posciety</h2>          
<table class="table table-bordered">
  <thead>
    <tr>
      <th>Negara</th>
      <th>Benua</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Indonesia</td>
      <td>Asia</td>
    </tr>
    <tr>
      <td>Indonesia</td>
      <td>Asia</td>
    </tr>
    <tr>
      <td>Indonesia</td>
      <td>Asia</td>
    </tr>
  </tbody>
</table>

Dengan kode table di atas akan tampil garis setiap item pada table seperti ini:

gambar 6 - table bootstrap bergaris bordered

Hover Rows Table

Ini adalah table dengan class table-hover Boostrap yang akan berubah warna ketika disentuh (hover), warna ini sama dengan class active.

<h2>Hover Rows</h2>
<p>The .table-hover class enables a hover state on table rows:</p>            
<table class="table table-hover">
  <thead>
    <tr>
      <th>Nama</th>
      <th>Pekerjaan</th>
      <th>Alamat</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Isyana</td>
      <td>Teller</td>
      <td>Bumi</td>
    </tr>
    <tr>
      <td>Isyana</td>
      <td>Teller</td>
      <td>Bumi</td>
    </tr>
    <tr>
      <td>Isyana</td>
      <td>Teller</td>
      <td>Bumi</td>
    </tr>
  </tbody>
</table>

Coba terapkan kode ini kemudia simpan dan lihat hasilnya, ketika di hover akan berwarna pada rows (baris) yang disentuh. Pastikan untuk tidak menggunakan class active pada table agar terlihat perubahan ketika hover.

tunggu sebentar...
POS Lainnya:

Tinggalkan Komentar

avatar

Situs ini menggunakan Cookie untuk meningkatkan pengalaman setiap pengunjung SETUJU & TUTUP Lihat Privasi