<html>
<head>
<title>TABLE DATA MAHASISWA</title>
<link rel="stylesheet" type="text/css" href="style table mergina.css">
</head>
<body>
<table border="2">
<th>No</th>
<th>Nama Lengkap</th>
<th>NIM</th>
<th>Prodi</th>
<th>Kota Asal</th>
<tr class="no">
<td>1</td>
<td class="yes">Kurnia</td>
<td>201512064</td>
<td>Teknik Informatika</td>
<td>Dubai</td>
</tr>
<tr>
<td>2</td>
<td class="yes">Lina Annisa</td>
<td>201512048</td>
<td>Teknik Informatika</td>
<td>Beijing</td>
</tr>
<tr class="no">
<td>3</td>
<td class="yes">Mergina Larasati</td>
<td>201512034</td>
<td>Teknik Informatika</td>
<td>Bontang</td>
</tr>
<tr>
<td>4</td>
<td class="yes">Nur Aeni</td>
<td>201512059</td>
<td>Teknik Informatika</td>
<td>Busang</td>
</tr>
<tr class="no">
<td>5</td>
<td class="yes">Ummul Khair</td>
<td>201512019</td>
<td>Teknik Informatika</td>
<td>Santan</td>
</tr>
<tr>
<td>6</td>
<td class="yes">Jihan Halifah Z</td>
<td>201512001</td>
<td>Teknik Informatika</td>
<td>Washington DC</td>
</tr>
<tr class="no">
<td>7</td>
<td class="yes">Muhammad Alif A.R</td>
<td>201512007</td>
<td>Teknik Sipil</td>
<td>New Delhi</td>
</tr>
</table>
</body>
</html>
Berikut adalah kode css untuk di-linkkan antara html dan css:
table{
border-collapse: collapse;
border:1px solid white;
width: 750px;
height: 350px;
}
th{
font-size: 20px;
font-family: courier;
text-align: center;
background-color: purple;
color: white;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
td.yes{
text-align: left;
}
td{text-align: center;
}
tr.no{
text-align: left;
font-family: trebuchet;
font-size: 18px;
background-color: skyblue;
font-weight: bold;
}
tr.no:hover{
background-color: white;
color:pink;
}
tr{
text-align: left;
font-family: trebuchet;
font-size: 18px;
background-color: skyblue;
font-weight: bold;
background-color: yellow;
}
tr:hover{
background-color: pink;
color:white;
}
Berikut adalah hasil print outnya :
Tidak ada komentar:
Posting Komentar