Membuat Tabel Zebra Sederhana

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. Untuk menerapkannya lihat kode di bawah ini.

<table style="width: 200px;"><tbody>
<tr bgcolor="#ccc">
<td width="50">No.</td>
<td width="150">Nama</td>
</tr>
<tr bgcolor="#999">
<td width="50">1.</td>
<td width="150">Test 1</td>
</tr>
<tr bgcolor="#ccc">
<td width="50">2.</td>
<td width="150">Test 2</td>
</tr>
<tr bgcolor="#999">
<td width="50">3.</td>
<td width="150">Test 3</td>
</tr>
<tr bgcolor="#ccc">
<td width="50">4.</td>
<td width="150">Test 4</td>
</tr>
<tr bgcolor="#999">
<td width="50">5.</td>
<td width="150">Test 5</td>
</tr>
</tbody></table>

2. Selesai dan hasilnya seperti di bawah ini.

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