Jika kamu banyak membuat web aplikasi yang akan mendisplay banyak data dalam bentuk tabel - tabel, maka tidak ada salahnya mempercantik data tabel anda agar terlihat lebih elegan dan lebih enak dibaca oleh user yang memakai nantinya dengan menampilkan data di tabel dengan style Tabel Zebra (Belang - Belang).

Untuk bisa menampilkan data tabel dengan style zebra (belang - belang), di mengapply style yang berbeda untuk tiap baris data tabel (row) yang diposisi ganjil dan genap dengan style yang berbeda. seperti contoh dibawah ini.

Untuk Tabelnya saya akan menggunakan contoh data tabel seperti berikut ini

<table id="rounded-corner">

 <thead>

 <tr>

 <th class="left">Company</th>

 <th>Q1</th>

 <th>Q2</th>

 <th>Q3</th>

 <th class="right">Q4</th>

 </tr>

 </thead>

 <tbody>

 <tr>

 <td>Microsoft</td>

 <td>20.3</td>

 <td>30.5</td>

 <td>23.5</td>

 <td>40.3</td>

 </tr>

 <tr>

 <td>Google</td>

 <td>50.2</td>

 <td>40.63</td>

 <td>45.23</td>

 <td>39.3</td>

 </tr>

 <tr>

 <td>Apple</td>

 <td>25.4</td>

 <td>30.2</td>

 <td>33.3</td>

 <td>36.7</td>

 </tr>

 <tr>

 <td>IBM</td>

 <td>20.4</td>

 <td>15.6</td>

 <td>22.3</td>

 <td>29.3</td>

 </tr>

 </tbody>

</table>

Untuk style tabel bisa menggunakan style css seperti berikut

#rounded-corner

{

 font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;

 font-size: 12px;

 margin: 45px;

 width: 480px;

 text-align: left;

 border-collapse: collapse;

}

#rounded-corner thead th.left

{

 background: #b9c9fe url('img/left.png') left -1px no-repeat;

}

#rounded-corner thead th.right

{

 background: #b9c9fe url('img/right.png') right -1px no-repeat;

}

#rounded-corner th

{

 padding: 8px;

 font-weight: normal;

 font-size: 13px;

 color: #039;

 background: #b9c9fe;

}



#rounded-corner td

{

 padding: 8px; 

 border-top: 1px solid #fff;

 color: black;

 font-weight: bold;

}



#rounded-corner tbody tr:hover td

{

 background: gray;

}



#rounded-corner tbody tr.genap

{

 background-color: cyan;

}



#rounded-corner tbody tr.ganjil

{

 background-color: pink;

}

Untuk memudahkan dalam appaly style zebra (belang-belang) nya kita apply classnya melewati jquery saja karena lebih simpel dan tidak ribet nantinya di server script phpnya. phpnya cukup generate tabel seperti biasa tanpa perlu kasih class genap ganjilnya. untuk apply class genap ganjilnya kita pake jquery saja lebih simpel. Contohnya seperti ini

$(document).ready(function(){

 $("#rounded-corner tbody tr:even").addClass('genap');

 $("#rounded-corner tbody trdd").addClass('ganjil');

});

Cukup simpel untuk membuat aplikasi anda tampak lebih bagus dan menarik
Untuk melihat Demo dari Tips ini atau mau mendownload source code contohnya bisa langsung ke link artikel dibawah ini
Tips Simpel Buat Tabel Zebra (Belang - Belang) dengan jQuery