Cara Membuat Tabel di Bootstrap

21 February 2016
Sekarang kita akan belajar membuat tabel di bootstrap. Sebenarnya caranya hampir sama dengan cara membuat tabel dengan HTML. Perbedaannya hanya pada nama-nama kelasnya.
Untuk lebih jelasnya, kita bisa mengikuti panduan dibawah ini.

Tabel dasar

    Pada tabel dasar, bentuknya hanya berupa garis horisontal saja. Untuk membuatnya, kita perlu menambahkan kelas .table pada tag <table>. Berikut penampakannya:
    <table class="table">
    ...
    </table>
    Hanya begitu saja? nggak, kita masih perlu menambahkan beberapa tag di dalam format dasar tadi, antara lain:
    • <tr> = Untuk membuat baris tabel
    • <th> = Untuk membuat kepala tabel
    • <td> = Untuk membuat data tabel
    Formatnya jadi seperti ini:
    <table class="table">
    <tr>
       <th> ... </th>
    </tr>
    <tr>
       <td> ... </td>
    </tr>
    </table>
    Contoh penerapannya:
    <table class="table">
    <tr>
       <th>SENIN</th>
       <th>SELASA</th>
    </tr>
    <tr>
       <td>Matematika</td>
       <td>Kimia</td>
    </tr>
    <tr>
       <td>Fisika</td>
       <td>Biologi</td>
    </tr>
    </table>
    Hasilnya:
    SENIN SELASA
    Matematika Kimia
    Fisika Biologi

Tabel dasar lanjutan

    Jika kita perhatikan tabel diatas, baris pada kepala (heading) tabel dengan data tidak ada perbedaannya. Untuk itu, agar terlihat lebih bagus dan rapi, kita perlu membungkusnya.
    Untuk membungkus kepala tabel, kita harus menambahkan tag <thead>. Untuk membungkus data, tambahkan tag <tbody>.
    Formatnya jadi seperti ini:
    <table class="table">
    <thead>
       <tr>
          <th> ... </th>
       </tr>
    </thead>
    <tbody>
       <tr>
          <td> ... </td>
          </tr>
    </tbody>
    </table>
    Contoh penerapannya:
    <table class="table">
    <thead>
       <tr>
          <th>SENIN</th>
          <th>SELASA</th>
       </tr>
    </thead>
    <tbody>
       <tr>
          <td>Matematika</td>
          <td>Kimia</td>
       </tr>
       <tr>
          <td>Fisika</td>
          <td>Biologi</td>
       </tr>
    </tbody>
    </table>
    Hasilnya:
    SENIN SELASA
    Matematika Kimia
    Fisika Biologi

Baris Strip

    Baris strip disini maksudnya adalah bentuk tabel dimana antar barisnya memiliki 2 warna yang berbeda. Anda juga boleh menamakannya tabel zebra, karena warnanya yang berselang-seling antara abu-abu dan putih. Untuk membuatnya, kita cukup menambahkan kelas .table-striped pada tag <table>
    Formatnya seperti ini:
    <table class="table table-striped">
    <thead>
       <tr>
          <th> ... </th>
       </tr>
    </thead>
    <tbody>
       <tr>
          <td> ... </td>
       </tr>
    </tbody>
    </table>
    Contoh penerapannya:
    <table class="table table-striped">
    <thead>
       <tr>
          <th>SENIN</th>
          <th>SELASA</th>
       </tr>
    </thead>
    <tbody>
       <tr>
          <td>Matematika</td>
          <td>Kimia</td>
       </tr>
       <tr>
          <td>Fisika</td>
          <td>Biologi</td>
       </tr>
    </tbody>
    </table>
    Hasilnya:
    SENIN SELASA
    Matematika Kimia
    Fisika Biologi

Tabel border

    Dengan menambahkan kelas .table-bordered pada tag <table>, maka bentuk tabel ini nantinya akan dikelilingi garis border.
    Formatnya seperti ini:
    <table class="table table-bordered">
    <thead>
       <tr>
          <th> ... </th>
       </tr>
    </thead>
    <tbody>
       <tr>
          <td> ... </td>
       </tr>
    </tbody>
    </table>
    Contoh penerapannya:
    <table class="table table-bordered">
    <thead>
       <tr>
          <th>SENIN</th>
          <th>SELASA</th>
       </tr>
    </thead>
    <tbody>
       <tr>
          <td>Matematika</td>
          <td>Kimia</td>
       </tr>
       <tr>
          <td>Fisika</td>
          <td>Biologi</td>
       </tr>
    </tbody>
    </table>
    Hasilnya:
    SENIN SELASA
    Matematika Kimia
    Fisika Biologi

Tabel melayang

    Tabel melayang disini hanya istilah. Bukan berarti tabelnya melayang-layang :) Dengan menambahkan kelas .table-hover pada tag <table>, ketika kita mengarahkan mouse pada data tabel, maka data tersebut akan tersorot. Biar lebih jelas , kita lihat saja hasilnya.
    Formatnya seperti ini:
    <table class="table table-hover">
    <thead>
       <tr>
          <th> ... </th>
       </tr>
    </thead>
    <tbody>
       <tr>
          <td> ... </td>
       </tr>
    </tbody>
    </table>
    Contoh penerapannya:
    <table class="table table-hover">
    <thead>
       <tr>
          <th>SENIN</th>
          <th>SELASA</th>
       </tr>
    </thead>
    <tbody>
       <tr>
          <td>Matematika</td>
          <td>Kimia</td>
       </tr>
       <tr>
          <td>Fisika</td>
          <td>Biologi</td>
       </tr>
    </tbody>
    </table>
    Hasilnya:
    SENIN SELASA
    Matematika Kimia
    Fisika Biologi

Tabel ringkas

    Dari pengamatan saya, sebenarnya tabel ini mirip dengan tabel standar, hanya lebih ringkas saja karena batas kolomnya dikurangi setengah dari standarnya. Cara membuatnya dengan menambahkan kelas .table-hover pada tag <table>.
    Formatnya seperti ini:
    <table class="table table-condensed">
    <thead>
       <tr>
          <th> ... </th>
       </tr>
    </thead>
    <tbody>
       <tr>
          <td> ... </td>
       </tr>
    </tbody>
    </table>
    Contoh penerapannya:
    <table class="table table-condensed">
    <thead>
       <tr>
          <th>SENIN</th>
          <th>SELASA</th>
       </tr>
    </thead>
    <tbody>
       <tr>
          <td>Matematika</td>
          <td>Kimia</td>
       </tr>
       <tr>
          <td>Fisika</td>
          <td>Biologi</td>
       </tr>
    </tbody>
    </table>
    Hasilnya:
    SENIN SELASA
    Matematika Kimia
    Fisika Biologi

Tabel responsif

    Cara membuatnya dengan membungkus tag <table> dengan menggunakan kelas .table-responsive
    . Formatnya seperti ini:
    <div class="table-responsive">
    <table class="table">
    <thead>
       <tr>
          <th> ... </th>
       </tr>
    </thead>
    <tbody>
       <tr>
          <td> ... </td>
       </tr>
    </tbody>
    </table>
    </div>
    
    Menurut saya, khusus untuk kelas ini (.table-responsive) kurang diperlukan, karena walaupun kita tidak menggunakannya, tabel yang kita buat dengan bootstrap semuanya sudah responsif. Itulah indahnya Bootstrap :)P

Tabel kontekstual

    Dengan tabel kontekstual memungkinkan kita membuat tabel dengan warna latar yang berwarna-warni. Untuk membuatnya, kita hanya perlu menambahkan kelas warna pada tag <tr> atau tag <td>. Formatnya seperti ini:
    <table class="table">
    <thead>
       <tr>
          <th> ... </th>
       </tr>
    </thead>
    <tbody>
       <tr>
          <td> ... </td>
       </tr>
    </tbody>
    </table>
    Contoh penerapannya pada tag <tr>:
    <table class="table">
    <thead>
       <tr>
          <th>SENIN</th>
          <th>SELASA</th>
       </tr>
    </thead>
    <tbody>
       <tr class="success">
          <td>Matematika</td>
          <td>Kimia</td>
       </tr>
       <tr class="info">
          <td>Fisika</td>
          <td>Biologi</td>
       </tr>
    </tbody>
    </table>
    Hasilnya:
    SENIN SELASA
    Matematika Kimia
    Fisika Biologi
    Contoh penerapannya pada tag <td>:
    <table class="table">
    <thead>
       <tr>
          <th>SENIN</th>
          <th>SELASA</th>
       </tr>
    </thead>
    <tbody>
       <tr>
          <td  class="success">Matematika</td>
          <td>Kimia</td>
       </tr>
       <tr>
          <td>Fisika</td>
          <td  class="info">Biologi</td>
       </tr>
    </tbody>
    </table>
    Hasilnya:
    SENIN SELASA
    Matematika Kimia
    Fisika Biologi
Itu tadi beberapa tag dan kelas yang perlu kita pahami untuk membuat tabel di Bootstrap. Besok kita akan membahas pembuatan form (blangko isian) pada Bootstrap. Silahkan baca artikelnya disini.
Semoga sukses.

INFORMASI PENTING

Apabila ada script atau tips & trik yang tidak bisa digunakan, silahkan beritahu kami melalui kolom komentar atau email kami di psnpenting@gmail.com

papa wardi
papa wardi Updated at: 20:54

Kolom komentar adalah tempat untuk Tanya-Jawab, Kritik-Saran dan tempat untuk berbagi ilmu, BUKAN TEMPAT PROMOSI.
Maaf jika saya tidak bisa membalas satu per satu komentar sahabat semua. Harap maklum.

Copyright 2016 © papawardi