This will be the first time in my website that I push a work that is not related on computer programming rather than more on user interface I called this design layout daily time record form using HTML and CSS in this example I based my layout in Civil Service Form 48 a standard daily time record form used by government employees here in the Philippines. I hope this short article can help others in understanding how to design and create their our web layouts using HTML and CSS.
If you have some questions please send me an email at jake.r.pomperada@gmail.com and jakerpomperada@yahoo.com. My mobile number here in the Philippines is 09173084360.
Sample Program Output
Program Listing
<html>
<body>
<style>
table,td,tr,th {
border-collapse: collapse;
text-align:center;
font-family:arial;
font-size: 15px;
}
div{
padding-left: 230px;
}
p {
text-align:left;
font-family:arial;
font-size: 12px;
}
p.civil_service_title {
text-align:left;
font-family:arial;
font-size: 10px;
}
p.civil_service_title2 {
padding-left: 10px;
font-family:arial;
font-size: 12px;
}
p.name {
padding-left: 170px;
font-family:arial;
font-size: 12px;
}
p.dtr {
padding-left: 140px;
font-family:arial;
font-weight:bold;
font-size: 16px;
}
p.circles {
padding-left: 180px;
font-family:arial;
font-size: 12px;
}
p.line1 {
padding-left: 40px;
font-family:arial;
font-size: 16px;
}
</style>
<CAPTION><EM>
<p class="civil_service_title">Civil Service Form No. 48</p>
<p class="dtr">DAILY TIME RECORD </p>
<p class="circles">-----o0o-----</p>
<p class="line1">_____________________________________</p>
<p class="name"> (Name)</p>
<p class="civil_service_title2"> For the month of______________________________________<br>
Official hours for arrival <br>and departure
Regular days________________<br><br>
Saturdays___________________ </p>
</EM></CAPTION>
<TABLE border="1">
<tr><th rowspan="2">Day<th colspan="2">A.M.
<th colspan="2">P.M.<th colspan="2">Undertime
<TR><th>Arrival<th>Departure
<th>Arrival<th>Departure
<th>Hours<th>Minutes
<tr><th>1<td><td><td><td><td><td>
<tr><th>2<td><td><td><td><td><td>
<tr><th>3<td><td><td><td><td><td>
<tr><th>4<td><td><td><td><td><td>
<tr><th>5<td><td><td><td><td><td>
<tr><th>6<td><td><td><td><td><td>
<tr><th>7<td><td><td><td><td><td>
<tr><th>8<td><td><td><td><td><td>
<tr><th>9<td><td><td><td><td><td>
<tr><th>10<td><td><td><td><td><td>
<tr><th>11<td><td><td><td><td><td>
<tr><th>12<td><td><td><td><td><td>
<tr><th>13<td><td><td><td><td><td>
<tr><th>14<td><td><td><td><td><td>
<tr><th>15<td><td><td><td><td><td>
<tr><th>16<td><td><td><td><td><td>
<tr><th>17<td><td><td><td><td><td>
<tr><th>18<td><td><td><td><td><td>
<tr><th>19<td><td><td><td><td><td>
<tr><th>20<td><td><td><td><td><td>
<tr><th>21<td><td><td><td><td><td>
<tr><th>22<td><td><td><td><td><td>
<tr><th>23<td><td><td><td><td><td>
<tr><th>24<td><td><td><td><td><td>
<tr><th>25<td><td><td><td><td><td>
<tr><th>26<td><td><td><td><td><td>
<tr><th>27<td><td><td><td><td><td>
<tr><th>28<td><td><td><td><td><td>
<tr><th>29<td><td><td><td><td><td>
<tr><th>30<td><td><td><td><td><td>
<tr><th>31<td><td><td><td><td><td>
<tr><th colspan="5">
<div> Total </div> <td><td>
</table>
<p>I certify on my honor that the above is a true and correct report of the <br>
hours of work performed, record of which was made daily at the time <br>
of arrival and departure from office. </p><br>
___________________________________________<br>
<p> VERIFIED as to the prescribed office hours:</p><br>
___________________________________________<br>
<p>
In Charge </p>
</body>
</html>
