Membuat Warna Tabel Menjadi Selang-Seling Menggunakan PHP

Tabel adalah kumpulan data atau informasi yang ditampilkan dalam bentuk baris dan kolom. Biasanya pada aplikasi web terdapat tabel. Terutama pada halaman admin pasti ada tabelnya. Untuk contoh tabel yang dimaksud, lihat halaman contoh tabel. Terlihat bahwa tabel tersebut sangat polos. Mungkin sangat menarik apabila di setiap baris terdapat warna background tabel. Apalagi warna antara baris genap dan ganjil berbeda warnanya. Nah, untuk itu saya akan menuliskan bagaimana cara membuat warna tabel tersebut menjadi selang seling.

Saya asumsikan bahwa para pembaca sudah bisa menampilkan tabel, yang tentunya tabel tersebut datanya diambil dari database. Jika anda belum bisa menampilkannya, anda dapat membukanya pada http://blog.xinthinx.us/2011/10/menampilkan-nama-bulan-dari-database.html. Setelah selesai, hal yang perlu diperhatikan yaitu pada background setiap baris. Awalnya, code program baris tersebut adalah sebagai berikut (sesuai dengan artikel http://blog.xinthinx.us/2011/10/menampilkan-nama-bulan-dari-database.html).

echo "<tr>
<td align='center'>$b[tgl]</td>
<td align='center'>$tgl-$bln-$thn<br></td>
<td align='center'>$semua</td>
</tr>"

Kemudian ubah kode di atas seperti di bawah ini.

 if(($no % 2)==0){
  $warna="#acbefa";
 }
 else{
  $warna="#E1E1E1";
 }

 echo "<tr bgcolor='$warna'>
   <td align='center'>$b[tgl]</td>
   <td align='center'>$tgl-$bln-$thn<br></td>
   <td align='center'>$semua</td>
  </tr>";

Baris pertama merupakan penentuan posisi baris pada tabel. Misalkan nomor urut, $no, dimodulo dengan 2, jika hasilnya 0 maka akan menampilkan kode variabel

$warna="#acbefa";

Jika hasilnya tidak 0 maka akan menampikan kode vaiabel

$warna="#E1E1E1";

Setelah itu, kode variabel tersebut akan diintegrasikan untuk menampilkan background color pada tabel dan bentuk kodenya adalah sebagai berikut.

<tr bgcolor='$warna'>

Untuk demo programnya, dapat dilihat pada halaman berikut ini http://xinthinx.us/demo/table-color/. Warna background dapat anda sesuaikan menurut keinginan anda. Semoga bermanfaat