Tutorial Cara membuat tabel menjadi menarik dengan CSS
Copy script html di bawah ini dan kemudian copy juga script css di bawah nya script html.
<!DOCTYPE>
<html>
<head>
<title>Styling Table</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table width="1000" cellpadding="5">
<tr class="head">
<th width="44">No</th><th width="200">Nama</th><th width="152">TempatTinggal</th><th width="118">Status</th>
</tr>
<tr class="satu">
<td align="center">1</td>
<td>Alsaskar Mirando</td>
<td>Manado</td><td align="center">Jomblo</td>
</tr>
<tr class="dua">
<td align="center">2</td>
<td>Bintang Algaza</td><td>Manado</td><td align="center">Jomblo</td>
</tr>
<tr class="satu">
<td align="center">3</td>
<td>Irsyad Assegaf</td>
<td>Manado</td>
<td align="center">Jomblo</td>
</tr>
<tr class="dua">
<td align="center">4</td>
<td>Diin Fach Rudin</td>
<td>Manado</td>
<td align="center">Kawin</td>
</tr>
<tr class="satu">
<td align="center">5</td>
<td>Alan Rian</td>
<td>Manado</td>
<td align="center">Jomblo</td>
</tr>
<tr class="dua">
<td align="center">6</td>
<td>Fikri Doka</td>
<td>Manado</td><td align="center">Jomblo</td>
</tr>
<tr class="satu">
<td align="center">7</td>
<td>Wahyu Saputra</td>
<td>Manado</td>
<td align="center">Jomblo</td>
</tr>
<tr class="dua">
<td align="center">8</td>
<td>Jhun Matoka</td>
<td>Manado</td>
<td align="center">Jomblo</td>
</tr>
<tr class="satu">
<td align="center">9</td>
<td>David Sambenthiro</td>
<td>Manado</td>
<td align="center">Jomblo</td>
</tr>
<tr class="dua">
<td align="center">10</td>
<td>Haryono</td>
<td>Manado</td>
<td align="center">Jomblo</td>
</tr>
</table>
</body>
</html>
table, th, td {
border-collapse:collapse;
border:3px solid #f25170;
font-size:20px;
}
.head {
background: #202020;
}
.head th {
padding:5px;
color:#376180;
font-size:30px;
font-family:Techno, Impact, sans-serif;
}
.satu {
background-color:#f66414;
}
.dua {
background-color:#c39797;
}
.satu:hover, .dua:hover {
background-color:#eae23e;
font-weight:bold;
cursor:pointer;
}
Catatan : pada kode html di atas terdapat <link rel="stylesheet" type="text/css" href="style.css"> jika kalian memberikan nama lain bukan style.css maka gantilah style.css itu dengan nama file yang kalian berikan nama lain.Style.css itu hanyalah sebagai contoh.
Dan hasilnya akan seperti pada gambar di bawah ini.
Script di atas bisa kalian edit sesuka kalian.
Dan akhir kata, Semoga Bermanfaat.
