Untuk menyajikan data berbentuk tabulasi kita dapat membuat tampilan yang berbeda antara baris yang satu dengan yang lain. Untuk mengimplementasikannya kita dapat membuat tampilan yang berbeda antara baris ganjil dan baris genap. Kita dapat membuat perbedaan tersebut dengan memberikan latar belakang warna yang berbeda.
Dalam penyajian dengan browser, kita dapat menggunakan tr:nth-child(even) atau tr:nth-child(odd). Pada contoh kali ini kita akan menggunakan tr:nth-child(even) dengan contoh berikut ini:
tbody tr:nth-child(even)
{
background-color:#ddd;
}
Pada coding di atas, setiap baris genap dari tbody akan diberi warna background #ddd.
Coding lengkapnya adalah
<!DOCTYPE html>
<html>
<head>
<title>Variasi baris ganjil genap</title>
<style type=”text/css”>
table
{
border: 1px solid #000;
}
thead
{
background-color:#c0bc03;
}
tbody tr:nth-child(even)
{
background-color:#ddd;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>Kolom 1</td>
<td>Kolom 2</td>
<td>Kolom 3</td>
<td>Kolom 4</td>
</tr>
</thead>
<tbody
<tr>
<td>Baris 1</td>
<td>ini</td>
<td>juga</td>
<td>ya</td>
</tr>
<tr>
<td>Baris 2</td>
<td>ini</td>
<td>juga</td>
<td>ya</td>
</tr>
<tr>
<td>Baris 3</td>
<td>ini</td>
<td>juga</td>
<td>ya</td>
</tr>
<tr>
<td>Baris 4</td>
<td>ini</td>
<td>juga</td>
<td>ya</td>
</tr>
<tr>
<td>Baris 5</td>
<td>ini</td>
<td>juga</td>
<td>ya</td>
</tr>
</tbody>
</body>
</html>
Tampilan bisa dilihat di http://aris.proweb.asia/variasi_ganjil_genap.html dengan tampilan seperti di bawah ini
Kunjungi www.proweb.co.id untuk menambah wawasan anda.