berikut HTML code dan CSS code
1. HTML
<head>
<title>Tabel CSS</title>
<link rel="stylesheet" href="tugas4.css" type="text/css">
</head>
<body>
<table border="1">
<th>no</th>
<th>Nama Sniper Rifle</th>
<th>Produsen</th>
<th>Negara</th>
<tr class="Ganjil">
<td class="nomor">1</td>
<td>PDSHP</td>
<td>STC DELTA</td>
<td> Georgia</td>
</tr>
<tr class="Genap">
<td class="nomor">2</td>
<td>Yalguzag sniper rifle</td>
<td>Azerbaijani Defense Industry</td>
<td> Azerbaijan</td>
</tr>
<tr class="Ganjil">
<td class="nomor">3</td>
<td>Steyr HS .50</td>
<td>Steyr Mannlicher</td>
<td> Austria</td>
</tr>
<tr class="Genap">
<td class="nomor">4</td>
<td>DSR-Precision GmbH DSR-1</td>
<td>DSR-precision GmbH</td>
<td>Germany</td>
</tr>
<tr class="Ganjil">
<td class="nomor">5</td>
<td>ČZW-127</td>
<td>Czka moskow</td>
<td> Czech Republic</td>
</tr>
<tr class="Genap">
<td class="nomor">6</td>
<td>Pindad SPR</td>
<td>Pindad</td>
<td>Indonesia</td>
</tr>
<tr class="Ganjil">
<td class="nomor">7</td>
<td>Steyr HS .50</td>
<td>Steyr Mannlicher</td>
<td> Austria</td>
</tr>
<tr class="Genap">
<td class="nomor">8</td>
<td>FN Tactical Sport Rifle</td>
<td>FN Herstal</td>
<td> Belgium/United States </td>
</tr>
<tr class="Ganjil">
<td class="nomor">9</td>
<td>S&T Motiv K14</td>
<td>S&T Motiv</td>
<td> South Korea</td>
</tr>
<tr class="Genap">
<td class="nomor">10</td>
<td>Howa M1500</td>
<td>Howa</td>
<td> Japan</td>
</tr>
</table>
</body>
</html>
2. CSS
@charset "utf-8";
/* CSS Document */
table {
border-color:#FFF;
border-style:none
}
th{
background-color:#00FFFF;
border-radius:10px 10px 0px 0px;
padding:5px 25px;
border-style:none
}
tr{
border-style:none;
}
tr:hover{
background-color:#0F0;
transition:2s
}
td{
border-style:none;
padding:5px 10px 5px 5px;
}
td.nomor {
text-align:center
}
tr.Genap{
background-color:#999
}
tr.Genap:hover{
background-color:#060
}
hasil akhirnya akan seperti berikut ini
Tidak ada komentar:
Posting Komentar