Membuat Tabel Zebra dengan CSS

Pada kesempatan kali ini saya akan memberikan anda trik HTML+CSS untuk mempercantik tampilan tabel. Tabel ini berikan nama tabel zebra karena tampilannya sama dengan zebra yang memiliki tubuh berwarna selang-seling. Untuk mengetahui cara pembuatannya silakan simak langkah-langkahnya di bawah ini.

Berikut ini langkah pembuatannya.

1. Tambahkan sebuah kode CSS seperti di bawah ini.

<style type="text/css">
table tr{
background:#CCC;
color:#000;
}
table tr:nth-child(even){
background:#999;
color:#FFF;
}
</style>

2. Untuk menerapkannya lihat kode di bawah ini.

<table>
<th>
<td>No.</td>
<td>Nama<td>
</th>
<tbody>
<tr> 
<td>1.</td> 
<td>Test 1</td> 
</tr>
<tr> 
<td>2.</td> 
<td>Test 2</td> 
</tr><tr> 
<td>3.</td> 
<td>Test 3</td> 
</tr>
<tr> 
<td>4.</td> 
<td>Test 4</td> 
</tr>
<tr> 
<td>5.</td>
<td>Test 5</td>
</tr> 
</tbody> 
</table>

3. Selesai dan hasilnya seperti di bawah ini.

No.	Nama
1.	Test 1
2.	Test 2
3.	Test 3
4.	Test 4
5.	Test 5