Cara Membuat Absen Dengan HTML Dan CSS
Membuat Absen Dengan HTML & CSS
Pasti kalian sudah tau bentuk absen pada umunya itu seperti apa. Kali ini saya akan memberikan tutorial bagaimana cara membuat Absen dengan HTML dan CSS.
waktu di HTML Part 4 kalian sudah belajar bagaimana cara membuat tabel. Dan berikut adalah Codingnya :
<!DOCTYPE html>
<html>
<head>
<style>
div.a {text-align: center;}
body {background-color:gray;}
td { font-weight: bold;
text-shadow: 1px 1px 3px;
color: red;
background-color: deepskyblue;}
table {border: 7px solid red;}
</style>
</head>
<body>
<div class="a">
<table border="10"cellpadding="5">
<tr>
<th colspan="3" style="color:red; background-color: yellow;"> Masukan Nama Jurusan </th>
<th rowspan="2" bgcolor="orange"> Check </th>
</tr>
<tr>
<th style="color:red; background-color:lime;"> Nama </th>
<th style="color:red; background-color:lime;"> Kelas </th>
<th style="color:red; background-color:lime;"> Jurusan </th>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"><b> ? </td>
<td><b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td> <b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td> <b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<th colspan="3" style="color:red; background-color: yellow;"> Masukan Nama Jurusan </th>
<th rowspan="2" bgcolor="orange"> Check </th>
</tr>
<tr>
<th style="color:red; background-color:lime;"> Nama </th>
<th style="color:red; background-color:lime;"> Kelas </th>
<th style="color:red; background-color:lime;"> Jurusan </th>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"><b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"><b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b>? </td>
<td align="center"> <b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <b> ?</td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"><b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
<tr>
<td> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <b> ? </td>
<td align="center"> <input type="checkbox"> </td>
</tr>
</table>
</body>
</html>
Hasil :
Kalian bisa mengubah tanda tanya menjadi nama kalian atau teman kalian dan nama jurusan bisa di ubah sesuai dengan jurusan kalian masing - masing.
Comments
Post a Comment