Cara Membuat Tabel di Bootstrap

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.

INGAT!!!

jika ingin mencobanya secara offline, masukkan script diatas pada template dasar diantara kelas .container atau .container-fluid (hapus tulisan <!-- AWAL KONTEN --> sampai <!-- AKHIR KONTEN -->). Jika belum punya template dasar, anda bisa membacanya disini