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)