✓ Cara Membuat Table Bootstrap Responsive Di BLOGGER + Source

Cara Membuat Table Bootstrap Responsive Di BLOGGER + Source

Gambar terkait

Bootstrap adalah open-source framework front-end yang bebas untuk merancang situs web dan aplikasi web. Framework ini berisi template desain berbasis HTML dan CSS untuk tipografi, formulir, tombol, navigasi dan komponen antarmuka lainnya, serta juga ekstensi opsional JavaScript.

berikut cara membuat table kita menjadi responsive :

Doctype HTML5
Bootstrap memanfaatkan elemen HTML dan properti CSS tertentu yang memerlukan penggunaan doctype HTML5. Masukkan itu di awal semua projek Anda.

<!doctype html>
<html lang="en">
  ...
</html>

Mobile First
Dengan Bootstrap 2, kami menambahkan gaya ramah seluler opsional untuk aspek-aspek utama kerangka kerja. Dengan Bootstrap 3, kami telah menulis ulang proyek menjadi ramah seluler sejak awal. Alih-alih menambahkan gaya ponsel opsional, mereka dipanggang langsung ke inti. Sebenarnya, Bootstrap lebih dulu mobile. Gaya pertama seluler dapat ditemukan di seluruh perpustakaan alih-alih dalam file terpisah.
Untuk memastikan rendering dan sentuhan zoom yang tepat, tambahkan meta tag viewport ke tag Anda <head>

<meta name="viewport" content="width=device-width, initial-scale=1">

Anda dapat menonaktifkan kemampuan pembesaran pada perangkat seluler dengan menambahkan pengguna-scalable = tidak ke tag meta viewport. Ini menonaktifkan zoom, artinya pengguna hanya dapat menggulir, dan hasil di situs Anda terasa sedikit lebih seperti aplikasi asli. Secara keseluruhan, kami tidak merekomendasikan ini di setiap situs, jadi berhati-hatilah!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">


Elemen Pada Tabel

Untuk mempermudah pembuatan tabel, pertama kita pelajari dahulu elemen-elemen yang membentuk tabel dalam HTML. Tabel basic terdiri dari tag-tag berikut :
<table>
  <tr>
   <th>..kolom..</th>
   <th>..kolom..</th>
  </tr>
  <tr>
   <td>..data..</td>
   <td>..data..</td>
  </tr>
</table>

Elemen <table> merupakan representasi data yang lebih dari satu dimensi dalam bentuk sebuah tabel. Ketika membuat sebuah tabel, dimulai dengan tag <table> dan ditutup dengan tag </table>.

Selanjutnya di dalam HTML tabel dibentuk oleh baris dengan tag elemen <tr> yang adalah kepanjangan dari table row. Element baris tabel <tr> ditutup oleh elemen </tr>.

Didalam baris tabel disisipkan elemen pendukung pembentuk tabel yaitu tabel header dengan tag <th>dan tabel data dengan tag <td>.

Tabel header <th> ditandai dengan huruf yang dicetak tebal dan menjadi header dari data tabel. Dimulai dengan tag <th> dan ditutup dengan tag </th>.

Tabel data <td> berisi data yang akan ditampilkan dalam tabel. Dimulai dengan tag <td> dan ditutup dengan tag </td>.

Berikut ini adalah contoh dari code untuk sebuah basic tabel HTML. Sebelumnya buat file .php dan letakkan di localhost sobat.
<div>
      <h3>Tabel Dasar (Basic Table) dengan HTML</h3>
      <table border="2">    
          <tr>
            <th>Nama Awal</th>
            <th>Nama Akhir</th>
            <th>Umur</th>
            
          </tr>    
          <tr>
            <td>Andi</td>
            <td>Simahani</td>
            <td>12 tahun</td>
            
          </tr>
          <tr>
            <td>Amar</td>
            <td>Zamika</td>
            <td>10 tahun</td>
            
          </tr>
          <tr>
            <td>Mira</td>
            <td>Wahyuni</td>
            <td>12 tahun</td>
            
          </tr>
          <tr>
            <td>Indah</td>
            <td>Kamila</td>
            <td>14 tahun</td>
            
          </tr>  
      </table>
</div>

Hasilnya adalah sebagai berikut :
Cara Membuat Tabel dengan Bootstrap
tabel basic html

CSS Tabel Bootstrap

Terdapat beberapa class tabel pada Bootstrap yang dapat kita gunakan untuk memberi style ciri khas bootstrap. Beberapa penjelasan dari kelas tabel (CSS) Bootstrap adalah sebagai berikut :
  1. Class ".table" menambahkan style basic dari tabel bootstrap dengan padding dan hanya menggunakan garis horisontal untuk membagi data.
  2. Class ".table-striped" menambahkan style corak belang seperti zebra utnuk setiap baris dalam tag <tbody> (kelemahan tidak available di internet explorer 8 (IE8)).
  3. Class ".table-bordered" meanambahkan border (garis tepi) pada setiap sisi dari tabel dan cells.
  4. Class ".table-hover" menambahkan efek dari hover (ketika baris data tabel didekatkan oleh kursor, akan muncul tanda gelap) pada baris dalam tag <tbody>.
  5. Class ".table-condensed" membuat table lebih compact dengan menghilangkan cell pading dari jarak antar baris. 

Contoh dalam Code

Selanjutnya kita coba terapkan class bootstrap diatas kedalam baris code. Berikut ini adalah masing-masing contoh codenya.

Contoh code untuk class ".table"
<div class="col-sm-4">
      <h3>Tabel Bootstrap dengan class="table"</h3>
      <table class="table">
        <thead>
          <tr>
            <th>Nama Awal</th>
            <th>Nama Akhir</th>
            <th>Umur</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Andi</td>
            <td>Simahani</td>
            <td>12 tahun</td>
          </tr>
          <tr>
            <td>Amar</td>
            <td>Zamika</td>
            <td>10 tahun</td>
          </tr>
          <tr>
            <td>Mira</td>
            <td>Wahyuni</td>
            <td>12 tahun</td> 
          </tr>
          <tr>
            <td>Indah</td>
            <td>Kamila</td>
            <td>14 tahun</td> 
          </tr>
        </tbody>
      </table>
    </div>

Contoh code untuk class ".table-striped"
<div class="col-sm-4">
      <h3>Tabel Bootstrap dengan class="table table-striped"</h3>
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Nama Awal</th>
            <th>Nama Akhir</th>
            <th>Umur</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Andi</td>
            <td>Simahani</td>
            <td>12 tahun</td>
          </tr>
          <tr>
            <td>Amar</td>
            <td>Zamika</td>
            <td>10 tahun</td>
          </tr>
          <tr>
            <td>Mira</td>
            <td>Wahyuni</td>
            <td>12 tahun</td>
          </tr>
          <tr>
            <td>Indah</td>
            <td>Kamila</td>
            <td>14 tahun</td>
          </tr>
        </tbody>
      </table>
    </div>

Contoh code untuk class ".table-bordered"
<div class="col-sm-4">
      <h3>Tabel Bootstrap dengan class="table table-bordered"</h3>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>Nama Awal</th>
            <th>Nama Akhir</th>
            <th>Umur</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Andi</td>
            <td>Simahani</td>
            <td>12 tahun</td>
          </tr>
          <tr>
            <td>Amar</td>
            <td>Zamika</td>
            <td>10 tahun</td>
          </tr>
          <tr>
            <td>Mira</td>
            <td>Wahyuni</td>
            <td>12 tahun</td>
          </tr>
          <tr>
            <td>Indah</td>
            <td>Kamila</td>
            <td>14 tahun</td>
          </tr>
        </tbody>
      </table>
      </div>

Contoh code untuk class ".table-hover"
<div class="col-sm-4">
      <h3>Tabel Bootstrap dengan class="table table-hover"</h3>
      <table class="table table-hover">
        <thead>
          <tr>
            <th>Nama Awal</th>
            <th>Nama Akhir</th>
            <th>Umur</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Andi</td>
            <td>Simahani</td>
            <td>12 tahun</td>
          </tr>
          <tr>
            <td>Amar</td>
            <td>Zamika</td>
            <td>10 tahun</td>
          </tr>
          <tr>
            <td>Mira</td>
            <td>Wahyuni</td>
            <td>12 tahun</td>
          </tr>
          <tr>
            <td>Indah</td>
            <td>Kamila</td>
            <td>14 tahun</td>
          </tr>
        </tbody>
      </table>
      </div>

Contoh code untuk class ".table-condensed"
<div class="col-sm-4">
      <h3>Tabel Bootstrap dengan class="table table-condensed"</h3>
      <table class="table table-condensed">
        <thead>
          <tr>
            <th>Nama Awal</th>
            <th>Nama Akhir</th>
            <th>Umur</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Andi</td>
            <td>Simahani</td>
            <td>12 tahun</td>
          </tr>
          <tr>
            <td>Amar</td>
            <td>Zamika</td>
            <td>10 tahun</td>
          </tr>
          <tr>
            <td>Mira</td>
            <td>Wahyuni</td>
            <td>12 tahun</td> 
          </tr>
          <tr>
            <td>Indah</td>
            <td>Kamila</td>
            <td>14 tahun</td> 
          </tr>
        </tbody>
      </table>
    </div>

Perhatikan pada masing-masing code, cara kita menyisipkan class tabel bootstrap adalah pada tag <table> menjadi <table class="nama_class_bootstrap">. Jadi pada bagian tag ini dapat kita ubah-ubah class-nya sesuai dengan jenid tabel yang kita inginkan.

Contoh Hasil Screenshoot :
Cara Membuat Tabel dengan Bootstrap
hasil dari masing-masing class tabel bootstrap

Berikutnya kita coba class tabel untuk merubah warna dari baris tabel dan kolom tabel.
  1. Class ".active" membuat warna hover (penanda) menjadi light-grey (abu-abu) untuk baris dan kolom tertentu. 
  2. Class ".succes" membuat indikasi succes atau penanda aksi positif (warna hijau tua).
  3. Class ".info" memberikan penanda informasi (warna biru muda).
  4. Class ".warning" memberikan penanda bagian tersebut perlu diperhatikan (warna pink).
  5. Class ".danger" memberikan penanda potensi kerusakan atau sesuatu yang salah (warna merah).

Contoh code untuk class tabel bootstrap dengan warna pada baris dan kolom :
<div class="col-sm-4">
      <h3>Tabel Bootstrap dengan class="table"</h3>
      <table class="table">
        <thead>
          <tr>
            <th>Nama Awal</th>
            <th>Nama Akhir</th>
            <th>Umur</th>
          </tr>
        </thead>
        <tbody>
          <tr class="active">
            <td>Andi</td>
            <td>Simahani</td>
            <td>12 tahun</td>
          </tr>
          <tr class="success">
            <td>Amar</td>
            <td>Zamika</td>
            <td>10 tahun</td>
          </tr>
          <tr class="info">
            <td>Mira</td>
            <td>Wahyuni</td>
            <td>12 tahun</td> 
          </tr>
          <tr class="warning">
            <td>Indah</td>
            <td>Kamila</td>
            <td>14 tahun</td> 
          </tr>
          <tr class="danger">
            <td>Santi</td>
            <td>Vania</td>
            <td>14 tahun</td> 
          </tr>
        </tbody>
      </table>
    </div>

Perhatikan pada masing-masing code, cara kita menyisipkan class tabel bootstrap adalah pada tag baris <tr> menjadi <tr class="nama_class_bootstrap">. Jadi pada bagian tag ini dapat kita ubah-ubah class-nya sesuai dengan jenis warna baris pada tabel yang kita inginkan.

Contoh hasil screenshoot :
Cara Membuat Tabel dengan Bootstrap
hasil class bootstrap (warna tabel)

Belum ada Komentar untuk "Cara Membuat Table Bootstrap Responsive Di BLOGGER + Source"

Posting Komentar

Komentarlah Dengan Relavant

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel