Siang ini saya mendapatkan request tutorial dari temen tentang tips membuat css table zebra colour. Tips css ini simple menggunakan konsep ganjil-genap, 1. pertama kita buat table untuk data kita: <table class='tbl-data'> <thead> <tr> <th>Label 1</th><th>Label 2</th><th>Label 3</th><th>Label 4</th> </tr> </thead&g...

CSS Table [Zebra Colour]

Siang ini saya mendapatkan request tutorial dari temen tentang tips membuat css table zebra colour. Tips css ini simple menggunakan konsep ganjil-genap, style ini biasa digunakan untuk menampilkan data yang banyak, style ini memudahkan user untuk membaca data. conth hasil :

Label 1Label 2Label 3Label 4
data1 data 2  data 3   data4 
       
       
       
       

 

1. pertama kita buat table untuk data kita:

<table class='tbl-data'>
<thead>
<tr>
<th>Label 1</th><th>Label 2</th><th>Label 3</th><th>Label 4</th>
</tr>
</thead>
<tbody>
<tr class='ganjil'><td>data 1</td><td>data 1</td><td>data 1</td><td>data 1</td></tr>
<tr class='genap'><td>data 2</td><td>data 2</td><td>data 2</td><td>data 2</td></tr>
<tr class='ganjil' ><td>data 3</td><td>data 3</td><td>data 3</td><td>data 3</td></tr>
<tr class='genap'><td>data 4</td><td>data 4</td><td>data 4</td><td>data 4</td></tr>
<tr class='ganjil'><td>data 5</td><td>data 5</td><td>data 5</td><td>data 5</td></tr>
</tbody></table>

2. kedua buat css untuk table, 

.tbl-data th{
     background:#333;
     color:#fff;
     padding: 3px;
}
.tbl-data td{
     border : 1px solid #ccc;
     padding: 3px;
}
.tbl-data tr.ganjil{
     background: #fff;
}
.tbl-data tr.genap{
     background: #eee;
}

 aplikasi class css tersebut bisa digenerate secara otomatis menggunakan looping javascript atau menggunakan looping PHP, contoh aplikasi dari class tersebut menggunakan looping php adalah sebagai berikut :

<table class='tbl-data'>
<thead>
<tr>
<th>Label 1</th><th>Label 2</th><th>Label 3</th><th>Label 4</th>
</tr>
</thead>
<tbody>
<?php
for($i=0;$i<=5;$i++){
   if($i mod 2!=0){
     echo " <tr class='ganjil'>";
   }
   else{
     echo "<tr class='genap'>";
   }
     echo "<td>data $i</td><td>data $i</td><td>data $i</td><td>data $i</td>";
   echo "</tr>";
}
?>

demikianlah tutorial sederhana ini, semoga bermanfaat :D, 


About Author

titan

Hi, saya senang dengan dunia Komputer, more information visit http://blackinkstudio.co


Comment & Discussions

  • Irvan Riswanto
    keren gan tapi seperti ada yang kurang gan screen shotnya ditampilkan biar terlihat hasilnya gan :D

    • titan

      udah di update..ada contoh hasilnya


    • Cecep Yusuf

      @brunx: ah eta aya oge, kumaha sih maneh mah haha..


  • Richard
    Mantap tutorialnya, tapi ada baiknya juga dimasukkan unsur jquery biar gak usah kasih class setiap <td>

    • titan

      ini meang cara klasik mas :D, klo skrg udah ada css3 gk udah pake jquery. css 3 udah ada selector 'odd' or 'even' contoh, tr:nth-of-type(odd){ background: #000; }


    • Cecep Yusuf

      yup, betul :)


  • asep saepulloh
    Klo di aplikasiin di table dengan database gimana ? :)

    • titan

      klo di aplikasiin ke database pake looping, klo kan dari db nantinya berupa array (misal while($db=mysql_fetc_array()) nah nanti masukkin kelas2xnya


  • wah wah pd jago2coding!!

  • Supardi
    iya nih boleh sih dikasih mulai dari buat data sampai jadi tabel yahud gitu. buat belajar pasti ok.

  • Please LOGIN before if you want to give the comment.