By GokiSoft.com|
20:25 22/01/2022|
Học HTML5 - CSS3
[Video] Thiết kế calendar page bằng HTML5/CSS - Tạo website calendar HTML5/CSS - C2110L
Thiết kế calendar page bằng HTML5/CSS - Tạo website calendar HTML5/CSS
#vidu.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calendar - Week Page</title>
<style type="text/css">
body {
background-color: #FFFFCC;
}
h2 {
text-decoration: underline;
text-align: center;
}
p {
text-align: center;
}
label {
background-color: #41a2e8;
font-size: 26px;
padding: 10px 30px;
border-radius: 50px;
}
label:hover {
background-color: orange;
}
.caption {
background-color: rgb(255,185,115);
font-size: 1em;
}
th, td {
border: solid #D0D0D0 thin;
empty-cells: show;
}
#tablesectionOne, #tablesectionTwo, #tablesectionThree, #tablesectionFour {
table-layout: fixed;
text-align: center;
background-color: #FFFFDD;
/*position: absolute;
top: 7e;*/
}
</style>
</head>
<body>
<h2>Attendence Sheet</h2>
<p>
<label>Week 1</label>
<label>Week 2</label>
<label>Week 3</label>
<label>Week 4</label>
</p>
<table border="1" cellpadding="5" id="tablesectionOne">
<tr class="caption">
<th colspan="8">Week 1</th>
</tr>
<tr>
<th></th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Total</th>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td></td>
<td></td>
<td>P</td>
<td>P</td>
<td>4</td>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td></td>
<td></td>
<td>P</td>
<td>P</td>
<td>4</td>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td></td>
<td></td>
<td>P</td>
<td>P</td>
<td>4</td>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td></td>
<td></td>
<td>P</td>
<td>P</td>
<td>4</td>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td></td>
<td></td>
<td>P</td>
<td>P</td>
<td>4</td>
</tr>
</table>
<table border="1" cellpadding="5" id="tablesectionTwo">
<tr class="caption">
<th colspan="8">Week 2</th>
</tr>
<tr>
<th></th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Total</th>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td></td>
<td></td>
<td>P</td>
<td>P</td>
<td>4</td>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td></td>
<td></td>
<td>P</td>
<td>P</td>
<td>4</td>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td></td>
<td></td>
<td>P</td>
<td>P</td>
<td>4</td>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td></td>
<td></td>
<td>P</td>
<td>P</td>
<td>4</td>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td></td>
<td></td>
<td>P</td>
<td>P</td>
<td>4</td>
</tr>
</table>
<table border="1" cellpadding="5" id="tablesectionThree">
<tr class="caption">
<th colspan="8">Week 3</th>
</tr>
<tr>
<th></th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Total</th>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td></td>
<td></td>
<td>P</td>
<td>P</td>
<td>4</td>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td></td>
<td></td>
<td>P</td>
<td>P</td>
<td>4</td>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td></td>
<td></td>
<td>P</td>
<td>P</td>
<td>4</td>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td></td>
<td></td>
<td>P</td>
<td>P</td>
<td>4</td>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td></td>
<td></td>
<td>P</td>
<td>P</td>
<td>4</td>
</tr>
</table>
<table border="1" cellpadding="5" id="tablesectionFour">
<tr class="caption">
<th colspan="8">Week 4</th>
</tr>
<tr>
<th></th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Total</th>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td></td>
<td></td>
<td>P</td>
<td>P</td>
<td>4</td>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td></td>
<td></td>
<td>P</td>
<td>P</td>
<td>4</td>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td></td>
<td></td>
<td>P</td>
<td>P</td>
<td>4</td>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td></td>
<td></td>
<td>P</td>
<td>P</td>
<td>4</td>
</tr>
<tr>
<th>John</th>
<td>P</td>
<td>P</td>
<td></td>
<td></td>
<td>P</td>
<td>P</td>
<td>4</td>
</tr>
</table>
</body>
</html>Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
