By GokiSoft.com| 10:04 15/12/2021|
Học HTML5 - CSS3

[Video] Thiết kế calendar page bằng HTML5/CSS - Tạo website calendar HTML5/CSS - C2108G3

Thiết kế calendar page bằng HTML5/CSS - Tạo website calendar HTML5/CSS


#calendar.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Calendar Page</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Attendence Sheet</h2>
<div id="navigation">
	<span id="week1" onclick="showWeek1()">Week 1</span>
	<span id="week2" onclick="showWeek2()">Week 2</span>
	<span id="week3" onclick="showWeek3()">Week 3</span>
	<span id="week4" onclick="showWeek4()">Week 4</span>
</div>
<table border="1" cellpadding="5" id="tablesectionOne">
	<tr>
		<th colspan="8" class="CAPTION">Week 1</th>
	</tr>
	<tr>
		<th></th>
		<th>Mon</th>
		<th>Tue</th>
		<th>Web</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>P</td>
		<td>P</td>
		<td>P</td>
		<td></td>
		<td>5</td>
	</tr>
	<tr>
		<th>John</th>
		<td>P</td>
		<td>P</td>
		<td>P</td>
		<td>P</td>
		<td>P</td>
		<td></td>
		<td>5</td>
	</tr>
	<tr>
		<th>John</th>
		<td>P</td>
		<td>P</td>
		<td>P</td>
		<td>P</td>
		<td>P</td>
		<td></td>
		<td>5</td>
	</tr>
</table>


<table border="1" cellpadding="5" id="tablesectionTwo">
	<tr>
		<th colspan="8" class="CAPTION">Week 2</th>
	</tr>
	<tr>
		<th></th>
		<th>Mon</th>
		<th>Tue</th>
		<th>Web</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>P</td>
		<td>P</td>
		<td>P</td>
		<td></td>
		<td>5</td>
	</tr>
	<tr>
		<th>John</th>
		<td>P</td>
		<td>P</td>
		<td>P</td>
		<td>P</td>
		<td>P</td>
		<td></td>
		<td>5</td>
	</tr>
	<tr>
		<th>John</th>
		<td>P</td>
		<td>P</td>
		<td>P</td>
		<td>P</td>
		<td>P</td>
		<td></td>
		<td>5</td>
	</tr>
</table>


<table border="1" cellpadding="5" id="tablesectionThree">
	<tr>
		<th colspan="8" class="CAPTION">Week 3</th>
	</tr>
	<tr>
		<th></th>
		<th>Mon</th>
		<th>Tue</th>
		<th>Web</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>P</td>
		<td>P</td>
		<td>P</td>
		<td></td>
		<td>5</td>
	</tr>
	<tr>
		<th>John</th>
		<td>P</td>
		<td>P</td>
		<td>P</td>
		<td>P</td>
		<td>P</td>
		<td></td>
		<td>5</td>
	</tr>
	<tr>
		<th>John</th>
		<td>P</td>
		<td>P</td>
		<td>P</td>
		<td>P</td>
		<td>P</td>
		<td></td>
		<td>5</td>
	</tr>
</table>


<table border="1" cellpadding="5" id="tablesectionFour">
	<tr>
		<th colspan="8" class="CAPTION">Week 4</th>
	</tr>
	<tr>
		<th></th>
		<th>Mon</th>
		<th>Tue</th>
		<th>Web</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>P</td>
		<td>P</td>
		<td>P</td>
		<td></td>
		<td>5</td>
	</tr>
	<tr>
		<th>John</th>
		<td>P</td>
		<td>P</td>
		<td>P</td>
		<td></td>
		<td></td>
		<td></td>
		<td>3</td>
	</tr>
	<tr>
		<th>John</th>
		<td>P</td>
		<td></td>
		<td>P</td>
		<td></td>
		<td>P</td>
		<td></td>
		<td>3</td>
	</tr>
</table>

<script type="text/javascript">
	function showWeek1() {
		week1 = document.getElementById('tablesectionOne')
		week2 = document.getElementById('tablesectionTwo')
		week3 = document.getElementById('tablesectionThree')
		week4 = document.getElementById('tablesectionFour')

		week1.style.display = 'block'
		week2.style.display = 'none'
		week3.style.display = 'none'
		week4.style.display = 'none'
	}

	function showWeek2() {
		week1 = document.getElementById('tablesectionOne')
		week2 = document.getElementById('tablesectionTwo')
		week3 = document.getElementById('tablesectionThree')
		week4 = document.getElementById('tablesectionFour')

		week1.style.display = 'none'
		week2.style.display = 'block'
		week3.style.display = 'none'
		week4.style.display = 'none'
	}

	function showWeek3() {
		week1 = document.getElementById('tablesectionOne')
		week2 = document.getElementById('tablesectionTwo')
		week3 = document.getElementById('tablesectionThree')
		week4 = document.getElementById('tablesectionFour')

		week1.style.display = 'none'
		week2.style.display = 'none'
		week3.style.display = 'block'
		week4.style.display = 'none'
	}

	function showWeek4() {
		week1 = document.getElementById('tablesectionOne')
		week2 = document.getElementById('tablesectionTwo')
		week3 = document.getElementById('tablesectionThree')
		week4 = document.getElementById('tablesectionFour')

		week1.style.display = 'none'
		week2.style.display = 'none'
		week3.style.display = 'none'
		week4.style.display = 'block'
	}
</script>
</body>
</html>


#style.css


body {
	background-color:  #FFFFCC;
}

h2 {
	text-align: center;
	text-decoration: underline;
}

#navigation {
	text-align: center;
	width: 600px;
	margin: 0px auto;
}

#navigation span {
	background-color: #65fca4;
	padding: 10px;
	padding-left: 30px;
	padding-right: 30px;
	font-weight: bold;
	border-radius: 20px;
	cursor: pointer;
}

#navigation span:hover {
	background-color: orange;
}

#tablesectionOne, #tablesectionTwo, #tablesectionThree, #tablesectionFour {
	table-layout: fixed;
	text-align: center;
	background-color: #FFFFDD;
	position: absolute;
	top: 10em;
}

/*#week1:active ~#tablesectionOne {
	display: block;
}*/

.CAPTION {
	background-color: rgb(255,185,115);
	font-family: arial;
	font-size: 1em;
}

th, td {
	border: solid thin #D0D0D0;
	empty-cells: show;
}


Tags:

Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)