Ehm, sering kan kita buat data di blog/web menggunakan tabel? Kalo datanya sedikit, mungkin nggak terlalu jelek jadinya. Tapi klo datanya udah ratusan bahkan ribuan, pengunjung juga bakalan sakit mata tuh ngeliat barisan tabel itu :)

Tapi jangan khawatir yah ;) Semua itu ada solusinya kok, salah satunya ya dengan mempercantik tampilan tabel yang konvensional itu, misalnya dengan warna dari tiap baris itu berbeda :)

Gimana tuh caranya?

Mudah aja kok! Sesuai judul postingan ini, “Mempercantik Tabel dengan jQuery”, ya kita disini menggunakan jQuery sebagai bantuan utamanya.

Adapun potongan kode jQuery-nya hanya begini:
HTML Code:
<script type="text/javascript">
      $(document).ready(function() {
        $("tr:odd").addClass("ganjil");
        $("tr:even").addClass("genap");
        $("th").parent().addClass("tbheading");
      });
    </script>
Butuh penjelasan?
odd , dalam jQuery lebih dikenal dengan ganjil. jadi klo “tr:odd” itu event yg terjadi klo baris pada tabel itu pada urutan ganjil :)
even, ya jelas ini sisanya, yaitu genap. jadi “tr:even” itu event yg terjadi klo baris pada tabel itu pada urutan genap ;)
th, yups ini emang jarang digunakan. ntar qta bahas lebih lanjut dibawah.

Kemudian tetep aja dibantu CSS untuk pewarnaannya.
HTML Code:
.ganjil {
  background-color: red; /* baris ganjil berwarna merah */
}
.genap {
  background-color: blue; /* baris genap berwarna biru */
}
.tbheading {
  background-color: #00ff00; /* baris genap berwarna hijau muda */
}
Okeh, kemudian kita punya tabel seperti ini:
HTML Code:
<table cellpadding="5">
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Status</th>
        </tr>
      <tr>
        <td>1</td>
        <td>AaEzha van Ilmi</td>
        <td>Tampan tak terkira</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Uba Bully</td>
        <td>Tampan tak ditanya</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Uwi van Ilmi</td>
        <td>Cantik natural</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Palembang Hacker Link</td>
        <td>Hah?</td>
      </tr>
    </table>
Lihat dan perhatikan baik-baik.
Untuk barisan pertama, itu pasti untuk “No”, “Nama” dan “Status”. (ganjil kan?)
Dilanjut baris kedua, “1″ “AaEzha van Ilmi” “Tampan tak terikira”. (yg ini harusnya genap kan?)
Tapi coba deh lihat di Zebra.html . Apa yang ada di benak kamu? :D

Baris pertama (ganjil) malah berwarna hijau, bukannya merah (sesuai dengan CSS diatas).
Yups, itu karena ada tabel head <th> spesialisasi dalam head pada tabel. Juga dibantu oleh jQuery diatas.

Ehm, jadi klo script lengkapnya seperti ini:
HTML Code:
<html>
  <head>
<title>Tabel jQuery Zebra</title>
    <script type="text/javascript" src="http://contoh.aaezha.com/jquery-1.4.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $("tr:odd").addClass("ganjil");
        $("tr:even").addClass("genap");
        $("th").parent().addClass("tbheading");
      });
    </script> 

    <style type="text/css">
    .ganjil {
      background-color: #ff0000; /* baris ganjil berwarna hijau muda */
    }
    .genap {
      background-color: blue; /* baris genap berwarna hijau tua */
    }
    .tbheading {
      background-color: #00ff00; /* baris genap berwarna hijau tua */
    }
    </style>
  </head>
  <body bgcolor="#000000" text="#ffffff">
<table cellpadding="5">
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Status</th>
        </tr>
      <tr>
        <td>1</td>
        <td>AaEzha van Ilmi</td>
        <td>Tampan tak terkira</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Uba Bully</td>
        <td>Tampan tak ditanya</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Uwi van Ilmi</td>
        <td>Cantik natural</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Palembang Hacker Link</td>
        <td>Hah?</td>
      </tr>
    </table>
  </body>
</html>