Merubah Warna Row Pada Table Gunakan CSS

Berawal dari keingin tahuan saya terhadap CSS dan apa saja yang dapat di implementasikan kedalamnya. Dengan cara mencari menggunakan mbah google akhirnya saya dapat ilmu tambahan, yaitu membuat table dengan warna pada 1 rownya (mungkin memang telat untuk memberikan tutorial ini).Tapi sekedar memberikan info aja buat yang mungkin diluar sana banyak yang belum tahu.langkah-langkah bikinnya :

1. Memiliki keinginan yang besar
2. buka editor (notepad juga cukup)

Ok kita mulai, pertama adalah masukkan code seperti ini :

JUDUL SPOILER

<table class="myTable" border="0" cellspacing="1" cellpadding="0">
<tr class="trow1" onmouseover="this.className='trow2';" onmouseout="this.className='trow1';" align="center">
<td width="60">1</td>
<td width="169" align="center">wow, its works!!!</td>
</tr>
<tr class="trow1" onmouseover="this.className='trow2';" onmouseout="this.className='trow1';" align="center">
<td width="60">2</td>
<td width="169" align="center">wow, its works!!!</td>
</tr>
<tr class="trow1" onmouseover="this.className='trow2';" onmouseout="this.className='trow1';" align="center">
<td width="60">3</td>
<td width="169" align="center">wow, its works!!!</td>
</tr>
<tr class="trow1" onmouseover="this.className='trow2';" onmouseout="this.className='trow1';" align="center">
<td width="60">4</td>
<td width="169" align="center">wow, its works!!!</td>
</tr>
<tr class="trow1" onmouseover="this.className='trow2';" onmouseout="this.className='trow1';" align="center">
<td width="60">5</td>
<td width="169" align="center">wow, its works!!!</td>
</tr>
</table>

hasilnya :
1 wow, its works!!!
2 wow, its works!!!
3 wow, its works!!!
4 wow, its works!!!
5 wow, its works!!!

Anda pasti kaget, katanya ada tabelnya . Tapi mana, sabar dulu. karna itu belum diimplementasikan pada CSS nya. Kita akan lanjut ke langkah ke dua

JUDUL SPOILER

<style>
.trow1{
background:#00CCFF; /*or other color*/
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#666666;
}
.trow2:hover{
background:#0099CC; /*or other color*/
cursor:pointer;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#FFFFFF;
}
.myTable{
border:groove;
border-width:thin;
}

</style>

1. Masukkan pada 1 halaman .html

Kalau yang kita kerjakan berhasil maka hasilnya akan seperti ini :


1	wow, its works!!!
2	wow, its works!!!
3	wow, its works!!!
4	wow, its works!!!
5	wow, its works!!!

Semoga berhasil yah teman - teman