Membuat alternate row color sederhana di PHP

Setelah sekian lama blog ini nganggur, karena ngga punya ide untuk nulis, akhirnya muncul juga ide untuk menulis tentang apa yang saya hadapi setiap hari. Salah satunya adalah membuat layout tabel data yang menurut saya cukup menarik untuk dilihat.

Salah satu cara paling sederhana untuk membuat layout tabel data yang menarik adalah dengan membuat variasi warna latar untuk setiap row data.

Kali ini saya coba menuliskan metode sederhana yang paling sering saya pakai ketika membuat layout tabel data.

Langkah Pertama

Siapkan dulu stylesheet untuk tabel

table {
margin: 0; padding: 0; background-color: #CCCCCC;
}

table tr {
margin: 0; padding: 0; background-color: #FFFFFF;
}
/* style untuk row genap */
table tr.genap {
background-color: #f6feff;
}

table tr.ganjil{
background-color: #FFFFFF;
}

table tr:hover {
background-color: #fffcf6;
}

/*table head */
table th {
padding: 3px 5px 3px 5px; backgroud-color: #333333;
color: #FFFFFF; text-align: center; font-weight: bold;
font-size: 13px;
}
/* cell */
table td {
padding: 2px 3px 2px 3px; font-size: 11px; color: #000000;
}

Data yang akan ditampilkan ke dalam tabel, saya asumsikan dengan data pegawai yang diambil dari database.

Struktur Database :

CREATE DATABASE employer;
USE employer;
DROP TABLE IF EXIST tbl_employer;
CREATE TABLE tbl_employer(
id int not null auto_increment,
employer_name varchar(50) null,
birth_date date null,
address varchar(255) null,
city varchar(25) null,
states varchar(45) null,
country varchar(35)
department varchar (35) null,
PRIMARY KEY(id)
)ENGINE=InnoDB;

Selanjutnya saya tidak membahas mengenai koneksi ke database, tetapi akan saya fokuskan kepada pembahasan mengenai membuat alternate row color.

Script :

<?php
//inisialisasi
$nomor = 0;

// query database
$query = "SELECT * FROM tbl_employer ORDER BY id";
$result = mysql_query($query) or die(mysql_error());

$num_rows = mysql_num_rows($result);

/* Tampilkan tabel */
echo "<table width=\"100%\" cellpadding=\"0\" cellspacing=\"1\" border=\"0\">\n\r";
echo "<tr>\n\r";
echo "<th>No</th>\n\r";
echo "<th>Nama</th>\n\r";
echo "<th>Tgl Lahir</th>\n\r";
echo "<th>Alamat</th>\n\r";
echo "<th>Kota</th>\n\r";
echo "<th>Propinsi</th>\n\r";
echo "<th>Negara</th>\n\r";
echo "<th>Departemen</th>\n\r";
echo "</tr>\n\r";

if ($num_rows) {
while ($rows = mysql_fetch_array($result, MYSQL_NUM)){
$nomor++;
/* inisialisasi class */
if ($nomor % 2 == 0){
$row_class = "genap";
}
else {
$row_class = "ganjil";
}
echo "<tr class=\"" . $row_class . "\">\n\r";
echo "<td>" . $nomor . "</td>\n\r";
echo "<td>" . $rows[1] ."</td>\n\r";
echo "<td>" . $rows[2] . "</td>\n\r";
echo "<td>" . $rows[3] . "</td>\n\r";
echo "<td>" . $rows[4] . "</td>\n\r";
echo "<td>" . $rows[5] . "</td>\n\r";
echo "<td>" . $rows[6] . "</td>\n\r";
echo "<td>" . $rows[7] . "</td>\n\r";
echo "</tr>\n\r";}
}
else {
echo "<tr><td colspan=\"8\">Record masih kosong!</td></tr>";
}
echo "</table>\n\r";

?>

Selamat mencoba!!!