Membuat Warna Tabel Menjadi Selang-Seling Menggunakan PHP

Share/Bookmark

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 main mata

6 Komentar


Komentar anda sangat berguna bagi kemajuan blog ini.
Anonymous said...

SS hasilnya dong
Pandu Widiyaksono said...

itu kan udah ada pada link demo program gan :D

Azam said...

makasih mas tutornya.. akhirnya nemu juga.. :)
camera borescope said...

minta Printscreennya donk mas :)
rofik coga said...

kalo di codeigniter gimana
Pandu Widiyaksono said...

klo di CI sama saja. Tinggal disesuaikan bro

Post a Comment

Xinthinx Blog Tutorial © 2008 Template by Dicas Blogger, emoticon from Yahoo! and KASKUS.

TOPO