Tutorial kali ini kita akan membuat warna selang seling atau Zebra yang mana data diambil dari database dan ditampilkan dengan script php , dalam membuat warna zebra atau belang dengan HTML dan css tentu cukup mudah, namun pada kasus ini agak sedikit berbeda , karena data yang kita tampilkan di ambil dari database mysql , Tentu dalam Penempatan style css akan mengalami permasalah, dikarenakan data yang ditampilkan secara looping, Nah disini peran dari tutorial ini

Berikut Contoh menu Zebra dengan Style css dan data yang diambil dari database :

Code CSS :

ul.left_menu li.odd a{
width:166px;height:25px;display:block;background:url(images/checked.png) no-repeat left #dad0d0; background-position:5px 5px;border-bottom:1px #FFFFFF solid;
text-decoration:none;color:#504b4b;padding:0 0 0 30px; line-height:25px;
}
ul.left_menu li.even a{
width:166px;height:25px;display:block;background:url(images/checked.png) no-repeat left #eee6e6;background-position:5px 5px;border-bottom:1px #FFFFFF solid;
text-decoration:none;color:#504b4b;padding:0 0 0 30px; line-height:25px;
}

 Nah.. Untuk kode PHP menampilkan style di atas Berikut Script Yang digunakan :

      <ul class="left_menu">
        <?php
            include "config/koneksi.php";
            $sqlTampil="SELECT * FROM kategori ";
            $qry=mysql_query($sqlTampil) or die ("Gagal Menampilkan Data Dari tbl kategori di database");
            $no=1;
            while ($r=mysql_fetch_array($qry)) {
              if(($no % 2)==0){
            echo "<li class="even"><a href=kategori_produk.php?id=$r[id_kategori]>$r[nama_kategori]</a></li>";
            }
            else {
            echo "<li class="odd"><a href=kategori_produk.php?id=$r[id_kategori]>$r[nama_kategori]</a></li>";
            }
            $no++;
            }
        ?>
      </ul>