Berikut ini kode CSS yang bisa Anda gunakan untuk membuat tabel melayang-layang:
<style>
table {
border-collapse: collapse;
border-spacing: 1;
width: 99%;
}
th, td {
padding: 3px;
text-align: left;
border-bottom: 0.5px solid #f2f2f2;
}
tr:hover{background-color:#f1f1f1}
</style>
Sedangkan untuk kode HTML nya seperti ini:
<!DOCTYPE html> <head> <title>Membuat tabel melayang-layang dengan menggunakan CSS</title> </head> <body> <center> <h1>TABEL MELAYANG-LAYANG</h1> <p>created by w3codez</p> </center> <table> <tr> <th>NOMOR URUT</th> <th>NAMA LENGKAP</th> <th>NILAI UJIAN</th> </tr> <tr> <td>1</td> <td>Agung Purno</td> <td>75</td> </tr> <tr> <td>2</td> <td>Nisa Anjani</td> <td>80</td> </tr> <tr> <td>3</td> <td>Tika Malika</td> <td>65</td> </tr> <tr> <td>4</td> <td>Fajar Utama</td> <td>85</td> </tr> <tr> <td>5</td> <td>Andika Jayanika</td> <td>90</td> </tr> </table> </body> </html>
Setelah kedua kode diatas digabungkan, jadinya seperti ini:
<!DOCTYPE html>
<head>
<title>Membuat tabel melayang-layang dengan menggunakan CSS</title>
<style>
table {
border-collapse: collapse;
border-spacing: 1;
width: 99%;
}
th, td {
padding: 3px;
text-align: left;
border-bottom: 0.5px solid #f2f2f2;
}
tr:hover{background-color:#f1f1f1}
</style>
</head>
<body>
<center>
<h1>TABEL MELAYANG-LAYANG</h1>
created by w3codez<br />
</center>
<table>
<tr>
<th>NOMOR URUT</th>
<th>NAMA LENGKAP</th>
<th>NILAI UJIAN</th>
</tr>
<tr>
<td>1</td>
<td>Agung Purno</td>
<td>75</td>
</tr>
<tr>
<td>2</td>
<td>Nisa Anjani</td>
<td>80</td>
</tr>
<tr>
<td>3</td>
<td>Tika Malika</td>
<td>65</td>
</tr>
<tr>
<td>4</td>
<td>Fajar Utama</td>
<td>85</td>
</tr>
<tr>
<td>5</td>
<td>Andika Jayanika</td>
<td>90</td>
</tr>
</table>
</body>
</html>
Nanti hasilnya akan seperti ini:
TABEL MELAYANG-LAYANG
created by w3codez| NOMOR URUT | NAMA LENGKAP | NILAI UJIAN |
|---|---|---|
| 1 | Agung Purno | 75 |
| 2 | Nisa Anjani | 80 |
| 3 | Tika Malika | 65 |
| 4 | Fajar Utama | 85 |
| 5 | Andika Jayanika | 90 |
Untuk melihat hasilnya, silahkan Anda sorot beberapa baris tabel tersebut dengan menggunakan kursor mouse Anda.
Sekian, semoga bermanfaat. Mohon maaf bila ada kesalahan.
No comments:
Post a Comment