 |
| Tabel Zebra |
1. copy kode javascript dibawah ini, letakkan di atas tag </head> :
<script src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".stripeMe tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");});
$(".stripeMe tr:even").addClass("alt");
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".stripeMe tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");});
$(".stripeMe tr:even").addClass("alt");
});
</script>
2. Copy kode css ini masih di atas tag </head>:
<style type="text/css">
body {
background: #fff;
}
table {
border-collapse: collapse;
width: 900px;
margin: 0px;
}
th {
background: #3e83c9;
color: #fff;
font-weight: bold;
padding: 2px 11px;
text-align: left;
border-right: 1px solid #000;
line-height: 2.2;
width:auto;
}
td {
padding: 6px 11px;
border-bottom: 1px solid #95bce2;
vertical-align: top;
}
td * {
padding: 6px 11px;
}
tr.alt td {
background: #ecf6fc;
}
tr.over td, tr:hover td {
background: #bcd4ec;
}
</style>
body {
background: #fff;
}
table {
border-collapse: collapse;
width: 900px;
margin: 0px;
}
th {
background: #3e83c9;
color: #fff;
font-weight: bold;
padding: 2px 11px;
text-align: left;
border-right: 1px solid #000;
line-height: 2.2;
width:auto;
}
td {
padding: 6px 11px;
border-bottom: 1px solid #95bce2;
vertical-align: top;
}
td * {
padding: 6px 11px;
}
tr.alt td {
background: #ecf6fc;
}
tr.over td, tr:hover td {
background: #bcd4ec;
}
</style>
3. Membuat tabelnya di dalam tag <body>, contoh seperti ini :
<table width="200" border="1">
<tr bgcolor="#66FFCC">
<th>Nis</th>
<th>Nama </th>
<th>Kelas</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<tr bgcolor="#66FFCC">
<th>Nis</th>
<th>Nama </th>
<th>Kelas</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
4. Simpan kawan............dan selesai.!!!!!
Semoga bermanfaat, salam longlife..........
