Artikel ini dapat digunakan, disalin, dan disebarluaskan. Cukup cantumkan sumber asli. Jika isinya mengandung kebenaran, semoga memberi kebaikan bagi kita yang memanfaatkannya. Jika ada yang salah, mohon kiranya penulis dimaafkan. Dan sangat baik, jika kesalahan tersebut dapat diberitahukan kepada penulis.
Yanmarshus, 27 Oktober 2005, yan[at]daunsalam[dot]net

Membuat Tabel Data Berwarna

Dalam menampilkan data, cukup sering kita menyajikannya dalam bentuk tabel. Untuk menghasilkan sebuah tabel dengan HTML sudah tersedia tag <table> yang memang berfungsi untuk pembuatan tabel. Untuk menghasilkan sebuah tabel yang lebih baik dalam visualisasinya, bisa dimanfaatkan kombinasi beberapa warna.

Dalam tutorial singkat ini, akan diulas bagaimana menghasilkan sebuah tabel data yang sudah "dipoles" dengan warna untuk setiap baris data. Kemudian ditambahkan fungsi yang menonjolkan warna (highlight) baris yang dilewati kursor. Tutorial ini menggunakan PHP, HTML, dan CSS.

Pertama kita akan membuat dulu sebuah CSS yang akan dipakai oleh tabel dalam menampilkan warna tertentu. Class yang diperlukan adalah untuk untuk tabel data, baris judul tabel, baris yang berwarna terang, baris yang berwarna gelap, dan baris yang sedang disorot. Contoh untuk CSS tersebut seperti berikut : 

<style>
.tabeldata { border: 1px solid #909090; font-size : 12px }
.judul { font-weight: bold; text-align: center; background: #C0C0C0 }
.terang { background: #E8E8E8 }
.gelap { background: #D8D8D8 }
.sorot { background: #E6B016 }
</style>

Umumnya data yang akan ditampilkan dalam tabel berupa data yang diambil dari database. Untuk contoh ini, kita akan menyusun data dalam sebuah variabel array, yang nanti akan ditampilkan pada tabel dengan warna yang berselang-seling pada tiap-tiap baris. Contohnya adalah sebagai berikut : 

$data[1] = array("Budiman","Jl Cemara No 123 Jakarta");
$data[2] = array("Joko Susanto","Kampung Indah Rt 24 Bandung");
$data[3] = array("Insan Kamil","Jl Merpati No 456 Bogor");
$data[4] = array("Hermawan","Jl Mawar No 3 Sukabumi");
$data[5] = array("Susilawati","Kelurahan Jaya Bekasi");
$data[6] = array("Nugroho","Desa Sukamaju Kecamatan Mandiri");
$data[7] = array("Marni","Klebengan CT V No 33 Yogyakarta");

Proses untuk menampilkan data ke dalam tabel adalah seperti kode di bawah. Untuk melakukan pergantian warna untuk setiap baris (row), digunakan satu variabel, pada contoh adalah variabel $terang. Jika variabel $terang bernilai true, maka <tr> yang bersangkutan akan diberi class terang. Jika sebaliknya, maka <tr> tersebut diberi class gelap.

Proses highlight terhadap sebuah row memanfaatkan event onMouseOver, dan onMouseOut. Aksi untuk onMouseOver adalah mengganti class <tr> bersangkutan dengan class sorot. Sedangkan aksi untuk onMouseOut adalah mengembalikan class <tr> tersebut ke class yang sesuai untuk barisnya. 

$terang = true;
echo "<table border=0 cellspacing=1 cellpadding=3 class=tabeldata>\n";
for ($i = 1; $i < 8; $i++) {
  if ($terang) {
    echo "<tr class="terang"
              onMouseOver="this.className='sorot'"
              onMouseOut="this.className='terang'">";
  } else {
    echo "<tr class="gelap"
              onMouseOver="this.className='sorot'"
              onMouseOut="this.className='gelap'">";
  }
  echo "<td align=center>" . $i . "</td>" .
       "<td>" . $data[$i][0] . "</td>" .
       "<td>" . $data[$i][1] . "</td></tr>\n";
  $terang = !$terang;
}
echo "</table>\n";

Hasil dari kode program di atas adalah seperti berikut ini. Arahkan mouse ke salah satu baris data, maka baris tersebut akan jadi berganti warna.

NoNamaAlamat
1BudimanJl Cemara No 123 Jakarta
2Joko SusantoKampung Indah Rt 24 Bandung
3Insan KamilJl Merpati No 456 Bogor
4HermawanJl Mawar No 3 Sukabumi
5SusilawatiKelurahan Jaya Bekasi
6NugrohoDesa Sukamaju Kecamatan Mandiri
7MarniKlebengan CT V No 33 Yogyakarta

Script lengkap untuk contoh ini adalah sebagai berikut : 

<html>
<head>
<style>
.tabeldata { border: 1px solid #909090; font-size : 12px }
.judul { font-weight: bold; text-align: center; background: #C0C0C0 }
.terang { background: #E8E8E8 }
.gelap { background: #D8D8D8 }
.sorot { background: #E6B016 }
</style>
</head>
<body>

<?php

$data[1] = array("Budiman","Jl Cemara No 123 Jakarta");
$data[2] = array("Joko Susanto","Kampung Indah Rt 24 Bandung");
$data[3] = array("Insan Kamil","Jl Merpati No 456 Bogor");
$data[4] = array("Hermawan","Jl Mawar No 3 Sukabumi");
$data[5] = array("Susilawati","Kelurahan Jaya Bekasi");
$data[6] = array("Nugroho","Desa Sukamaju Kecamatan Mandiri");
$data[7] = array("Marni","Klebengan CT V No 33 Yogyakarta");

$terang = true;
echo "<table border=\"0\"
             cellspacing=\"1\"
             cellpadding=\"3\"
             class=\"tabeldata\">\n";
echo "<tr class=\"judul\"><td>No</td>
                          <td>Nama</td>
                          <td>Alamat</td></tr>\n";
for ($i = 1; $i < 8; $i++) {
  if ($terang) {
    echo "<tr class=\"terang\"
              onMouseOver=\"this.className='sorot'\"
              onMouseOut=\"this.className='terang'\">";
  } else {
    echo "<tr class=\"gelap\"
              onMouseOver=\"this.className='sorot'\"
              onMouseOut=\"this.className='gelap'\">";
  }
  echo "<td align=\"center\">" . $i . "</td>" .
       "<td>" . $data[$i][0] . "</td>" .
       "<td>" . $data[$i][1] . "</td></tr>\n";
  $terang = !$terang;
}
echo "</table>\n";

?>

</body>
</html>