By GokiSoft.com|
21:11 18/10/2023|
Học HTML5 - CSS3
Thiết kế calendar page bằng HTML5/CSS - Tạo website calendar HTML5/CSS
Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
![nguyễn Sử [T2008A]](https://www.gravatar.com/avatar/47487be2776ac2ec915b0936ef7ab5ae.jpg?s=80&d=mm&r=g){kind=avatar}
nguyễn Sử
2020-10-09 15:27:08
#week 3.html
<!DOCTYPE html>
<html>
<head>
<title>Weekly Attendance Sheet</title>
<style type="text/css">
body{
background-color: #FFFFCC;
}
<h2>{
text-decoration: underline;
}
#navigation{
position: relative;
margin left: 25%;
text-align: center;
}
#tablesectionOne{
table-layout: fixed;
text-align: center;
background-color: #FFFFDD;
position: relative;
top:7px;
}
#tablesectionTwo{
table-layout: fixed;
text-align: center;
background-color: #FFFFDD;
position: relative;
top:7px;
}
#tablesectionThree{
table-layout: fixed;
text-align: center;
background-color: #FFFFDD;
position: relative;
top:7px;
}
#tablesectionFour{
table-layout: fixed;
text-align: center;
background-color: #FFFFDD;
position: relative;
top:7px;
}
.CAPTION{
background-color: rgb(255,185,115);
font-family: arial;
font-size: 1em;
}
td{
border-style: solid;
border-color: #D0D0D0;
border-width: thin;
empty-cells: show;
}
th{
border-style: solid;
border-color: #D0D0D0;
border-width: thin;
empty-cells: show;
}
.ww{
border-style: solid;
border-width: thin;
border-color: black;
border-left: 25px;
border-right:25px;
border-radius: 10px;
display:inline-block;
padding-left: 15px;
padding-right: 15px;
font-size: 20px;
}
</style>
</head>
<body>
<h2><center><ins>Attendance Sheet<ins></center></h2><br>
<li class="ww"><b> Week 3 <b></li>
<div id="show">
<table class="table">
<tr>
<th></th>
<th>Mon</th>
<th>Tus</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Total</th>
</tr>
<tr>
<th>John</th>
<th>P</th>
<th>p</th>
<th>p</th>
<th>p</th>
<th>p</th>
<th>P</th>
<th>6</th>
</tr>
<tr>
<th>Smith</th>
<th>p</th>
<th>P</th>
<th>P</th>
<th></th>
<th>p</th>
<th>P</th>
<th>5</th>
</tr>
<tr>
<th>David</th>
<th>P</th>
<th></th>
<th>P</th>
<th></th>
<th>P</th>
<th>p</th>
<th>4</th>
</tr>
<tr>
<th>Mark</th>
<th>p</th>
<th></th>
<th>P</th>
<th></th>
<th>P</th>
<th></th>
<th>3</th>
</tr>
</body>
</html>nguyễn Sử
2020-10-09 15:23:21
#week 2.html
<!DOCTYPE html>
<html>
<head>
<title>Weekly Attendance Sheet</title>
<style type="text/css">
body{
background-color: #FFFFCC;
}
<h2>{
text-decoration: underline;
}
#navigation{
position: relative;
margin left: 25%;
text-align: center;
}
#tablesectionOne{
table-layout: fixed;
text-align: center;
background-color: #FFFFDD;
position: relative;
top:7px;
}
#tablesectionTwo{
table-layout: fixed;
text-align: center;
background-color: #FFFFDD;
position: relative;
top:7px;
}
#tablesectionThree{
table-layout: fixed;
text-align: center;
background-color: #FFFFDD;
position: relative;
top:7px;
}
#tablesectionFour{
table-layout: fixed;
text-align: center;
background-color: #FFFFDD;
position: relative;
top:7px;
}
.CAPTION{
background-color: rgb(255,185,115);
font-family: arial;
font-size: 1em;
}
td{
border-style: solid;
border-color: #D0D0D0;
border-width: thin;
empty-cells: show;
}
th{
border-style: solid;
border-color: #D0D0D0;
border-width: thin;
empty-cells: show;
}
.ww{
border-style: solid;
border-width: thin;
border-color: black;
border-left: 25px;
border-right:25px;
border-radius: 10px;
display:inline-block;
padding-left: 15px;
padding-right: 15px;
font-size: 20px;
}
</style>
</head>
<body>
<h2><center><ins>Attendance Sheet<ins></center></h2><br>
<li class="ww"><b> Week 2 <b></li>
<div id="show">
<table class="table">
<tr>
<th></th>
<th>Mon</th>
<th>Tus</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Total</th>
</tr>
<tr>
<th>John</th>
<th>P</th>
<th>p</th>
<th>p</th>
<th></th>
<th>p</th>
<th>P</th>
<th>5</th>
</tr>
<tr>
<th>Smith</th>
<th></th>
<th>P</th>
<th>P</th>
<th></th>
<th>p</th>
<th>P</th>
<th>4</th>
</tr>
<tr>
<th>David</th>
<th>P</th>
<th></th>
<th>P</th>
<th></th>
<th>P</th>
<th></th>
<th>3</th>
</tr>
<tr>
<th>Mark</th>
<th></th>
<th></th>
<th>P</th>
<th></th>
<th>P</th>
<th></th>
<th>2</th>
</tr>
</body>
</html>nguyễn Sử
2020-10-09 14:52:33
#week 1.html
<!DOCTYPE html>
<html>
<head>
<title>Weekly Attendance Sheet</title>
<style type="text/css">
body{
background-color: #FFFFCC;
}
<h2>{
text-decoration: underline;
}
#navigation{
position: relative;
margin left: 25%;
text-align: center;
}
#tablesectionOne{
table-layout: fixed;
text-align: center;
background-color: #FFFFDD;
position: relative;
top:7px;
}
#tablesectionTwo{
table-layout: fixed;
text-align: center;
background-color: #FFFFDD;
position: relative;
top:7px;
}
#tablesectionThree{
table-layout: fixed;
text-align: center;
background-color: #FFFFDD;
position: relative;
top:7px;
}
#tablesectionFour{
table-layout: fixed;
text-align: center;
background-color: #FFFFDD;
position: relative;
top:7px;
}
.CAPTION{
background-color: rgb(255,185,115);
font-family: arial;
font-size: 1em;
}
td{
border-style: solid;
border-color: #D0D0D0;
border-width: thin;
empty-cells: show;
}
th{
border-style: solid;
border-color: #D0D0D0;
border-width: thin;
empty-cells: show;
}
.ww{
border-style: solid;
border-width: thin;
border-color: black;
border-left: 25px;
border-right:25px;
border-radius: 10px;
display:inline-block;
padding-left: 15px;
padding-right: 15px;
font-size: 20px;
}
</style>
</head>
<body>
<h2><center><ins>Attendance Sheet<ins></center></h2><br>
<li class="ww"><b> week 1 <b></li>
<div id="show">
<table class="table">
<tr>
<th></th>
<th>Mon</th>
<th>Tus</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Total</th>
</tr>
<tr>
<th>John</th>
<th>P</th>
<th>P</th>
<th>p</th>
<th>p</th>
<th></th>
<th>P</th>
<th>5</th>
</tr>
<tr>
<th>Smith</th>
<th></th>
<th>P</th>
<th>P</th>
<th>p</th>
<th></th>
<th>P</th>
<th>4</th>
</tr>
<tr>
<th>David</th>
<th>P</th>
<th>P</th>
<th>P</th>
<th>p</th>
<th>P</th>
<th>p</th>
<th>6</th>
</tr>
<tr>
<th>Mark</th>
<th>P</th>
<th></th>
<th>P</th>
<th></th>
<th>P</th>
<th></th>
<th>3</th>
</tr>
</body>
</html>![Nguyễn Tiến Đạt [T2008A]](https://www.gravatar.com/avatar/b5819cd0adc95c727c7ad0c2bcf6098b.jpg?s=80&d=mm&r=g){kind=avatar}
Nguyễn Tiến Đạt
2020-10-09 13:20:00
https://gokisoft09.herokuapp.com/Lesson%203/Calendar%20Page/Attendance.html![Nguyễn Hữu Hiếu [T2008A]](https://www.gravatar.com/avatar/ca2884508b617fee77f000c7d99c219d.jpg?s=80&d=mm&r=g){kind=avatar}
Nguyễn Hữu Hiếu
2020-10-09 12:55:52
#Attendance.html
<!DOCTYPE html>
<html>
<head>
<title>Weekly Attendance Sheet</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="style.css">
<h2>Attendance Sheet</h2>
<center>
<div id="show">
<div class="text"><a href="week1.html">Week1</a></div>
<div class="text"><a href="week2.html">Week2</a></div>
<div class="text"><a href="week3.html">Week3</a></div>
<div class="text"><a href="week4.html">Week4</a></div>
</div>
</center>
</body>
</html>#style.css
body {
background-color: #FFFFCC;
}
h2 {
text-align: center;
text-decoration-line: underline;
}
#navigation {
text-align: center;
margin-left: 25%;
position: absolute;
}
#tablesectionOne {
table-layout: fixed;
text-align: center;
background-color: #FFFFDD;
position: absolute;
margin-top: 7e;
}
#tablesectionTwo {
table-layout: fixed;
text-align: center;
background-color: #FFFFDD;
position: absolute;
margin-top: 7e;
}
#tablesectionThree {
table-layout: fixed;
text-align: center;
background-color: #FFFFDD;
position: absolute;
margin-top: 7e;
}
#tablesectionFour {
table-layout: fixed;
text-align: center;
background-color: #FFFFDD;
position: absolute;
margin-top: 7e;
}
.caption {
background-color: rgb(255,185,115);
font: arial;
size: 1em;
}
table, th, td {
border: thin solid #D0D0D0;
empty-cells: show;
}
#show {
display: flex;
text-align: center;
height: 100px;
align-items: center;
padding-left: 25%;
}
.text {
width: 150px;
height: 20px;
text-align: center;
border: 1px solid black;
background-color: #8beb73;
border-radius: 15px;
}
#week1.html
<!DOCTYPE html>
<html>
<head>
<title>Weekly Attendance Sheet</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Attendance Sheet</h2>
<div id="show">
<div class="text"><a href="week1.html">Week1</a></div>
<div class="text"><a href="week2.html">Week2</a></div>
<div class="text"><a href="week3.html">Week3</a></div>
<div class="text"><a href="week4.html">Week4</a></div>
</div>
<table class="table">
<tr>
<th></th>
<th>Mon</th>
<th>Tus</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Total</th>
</tr>
<tr>
<th>John</th>
<th>P</th>
<th>P</th>
<th>P</th>
<th></th>
<th>P</th>
<th>P</th>
<th>3</th>
</tr>
<tr>
<th>Smith</th>
<th>P</th>
<th>P</th>
<th>P</th>
<th></th>
<th>P</th>
<th>P</th>
<th>3</th>
</tr>
<tr>
<th>David</th>
<th>P</th>
<th>P</th>
<th>P</th>
<th></th>
<th>P</th>
<th>P</th>
<th>3</th>
</tr>
<tr>
<th>Mark</th>
<th>P</th>
<th>P</th>
<th>P</th>
<th></th>
<th>P</th>
<th>P</th>
<th>3</th>
</tr>
</table>
</body>
</html>#week2.html
<!DOCTYPE html>
<html>
<head>
<title>Weekly Attendance Sheet</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Attendance Sheet</h2>
<div id="show">
<div class="text"><a href="week1.html">Week1</a></div>
<div class="text"><a href="week2.html">Week2</a></div>
<div class="text"><a href="week3.html">Week3</a></div>
<div class="text"><a href="week4.html">Week4</a></div>
</div>
<table class="table">
<tr>
<th></th>
<th>Mon</th>
<th>Tus</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Total</th>
</tr>
<tr>
<th>John</th>
<th>P</th>
<th>P</th>
<th></th>
<th></th>
<th>P</th>
<th>P</th>
<th>2</th>
</tr>
<tr>
<th>Smith</th>
<th>P</th>
<th>P</th>
<th>P</th>
<th></th>
<th></th>
<th>P</th>
<th>2</th>
</tr>
<tr>
<th>David</th>
<th>P</th>
<th>P</th>
<th>P</th>
<th></th>
<th>P</th>
<th></th>
<th>2</th>
</tr>
<tr>
<th>Mark</th>
<th>P</th>
<th>P</th>
<th>P</th>
<th></th>
<th>P</th>
<th>P</th>
<th>1</th>
</tr>
</table>
</body>
</html>#week3.html
<!DOCTYPE html>
<html>
<head>
<title>Weekly Attendance Sheet</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Attendance Sheet</h2>
<div id="show">
<div class="text"><a href="week1.html">Week1</a></div>
<div class="text"><a href="week2.html">Week2</a></div>
<div class="text"><a href="week3.html">Week3</a></div>
<div class="text"><a href="week4.html">Week4</a></div>
</div>
<table class="table">
<tr>
<th></th>
<th>Mon</th>
<th>Tus</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Total</th>
</tr>
<tr>
<th>John</th>
<th></th>
<th>P</th>
<th>P</th>
<th></th>
<th>P</th>
<th>P</th>
<th>2</th>
</tr>
<tr>
<th>Smith</th>
<th>P</th>
<th>P</th>
<th>P</th>
<th></th>
<th>P</th>
<th>P</th>
<th>3</th>
</tr>
<tr>
<th>David</th>
<th>P</th>
<th>P</th>
<th>P</th>
<th></th>
<th></th>
<th>P</th>
<th>2</th>
</tr>
<tr>
<th>Mark</th>
<th></th>
<th>P</th>
<th>P</th>
<th></th>
<th>P</th>
<th>P</th>
<th>3</th>
</tr>
</table>
</body>
</html>#week4.html
<!DOCTYPE html>
<html>
<head>
<title>Weekly Attendance Sheet</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Attendance Sheet</h2>
<div id="show">
<div class="text"><a href="week1.html">Week1</a></div>
<div class="text"><a href="week2.html">Week2</a></div>
<div class="text"><a href="week3.html">Week3</a></div>
<div class="text"><a href="week4.html">Week4</a></div>
</div>
<table class="table">
<tr>
<th></th>
<th>Mon</th>
<th>Tus</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
<th>Total</th>
</tr>
<tr>
<th>John</th>
<th>P</th>
<th>P</th>
<th>P</th>
<th></th>
<th>P</th>
<th>P</th>
<th>3</th>
</tr>
<tr>
<th>Smith</th>
<th>P</th>
<th>P</th>
<th>P</th>
<th></th>
<th>P</th>
<th>P</th>
<th>3</th>
</tr>
<tr>
<th>David</th>
<th>P</th>
<th>P</th>
<th>P</th>
<th></th>
<th>P</th>
<th>P</th>
<th>3</th>
</tr>
<tr>
<th>Mark</th>
<th>P</th>
<th>P</th>
<th>P</th>
<th></th>
<th>P</th>
<th>P</th>
<th>3</th>
</tr>
</table>
</body>
</html>![Nguyên Phấn Đông [community]](https://www.gravatar.com/avatar/c9c4f8f79ce35b9224637b6cc5fbe5c4.jpg?s=80&d=mm&r=g){kind=avatar}
Nguyên Phấn Đông
2020-10-09 10:21:31
bảng tuần 1
week1.html
<!DOCTYPE html>
<html>
<head>
<title>week1</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table border="1" align="center">
<caption class="caption">Week1</caption>
<tr>
<th class="th"></th>
<th class="th">Mon</th>
<th class="th">Tue</th>
<th class="th">Wed</th>
<th class="th">Thu</th>
<th class="th">Fri</th>
<th class="th">Sat</th>
<th class="th" >Total</th>
</tr>
<tr>
<th class="th">John</th>
<td class="td">p</td>
<td class="td">p</td>
<td class="td">p</td>
<td class="td">p</td>
<td class="td"></td>
<td class="td">p</td>
<td class="td">5</td>
</tr>
<tr>
<th class="th">Smith</th>
<td class="td"></td>
<td class="td">p</td>
<td class="td">p</td>
<td class="td">p</td>
<td class="td"></td>
<td class="td">p</td>
<td class="td">4</td>
</tr>
<tr>
<th class="th">David</th>
<td class="td">p</td>
<td class="td">p</td>
<td class="td">p</td>
<td class="td">p</td>
<td class="td">p</td>
<td class="td">p</td>
<td class="td">6</td>
</tr>
<tr>
<th class="th">Mark</th>
<td class="td">p</td>
<td class="td"></td>
<td class="td">p</td>
<td class="td"></td>
<td class="td">p</td>
<td class="td"></td>
<td class="td">3</td>
</tr>
</table>
</body>
</html>Nguyên Phấn Đông
2020-10-09 10:21:00
style.css
body{
background-color: #FFFFCC;
}
#head {
display: flex;
width: 100%;
padding-left: 20%;
}
.navigation {
background-color:#78d428;
border: 3px solid #000000;
padding-right: 1em;
padding-left: 1em;
margin-left: 10px;
text-align: center;
border-radius: 20px;
font-size: 20px;
float: left;
}
#id-tablesectionOne{
table-layout: fixed;
text-align: center;
color: #FFFFDD;
position:absolute;
margin-top: 7ex;
}
#id-tablesectionTow{
table-layout: fixed;
text-align: center;
color: #FFFFDD;
position:absolute;
margin-top: 7ex;
}
#id-tablesectionThree{
table-layout: fixed;
text-align: center;
color: #FFFFDD;
position:absolute;
margin-top: 7ex;
}
#id-tablesectionFour{
table-layout: fixed;
text-align: center;
color: #FFFFDD;
position:absolute;
margin-top: 7ex;
}
.caption{
background-color: rgb(255,185,115);
font-family: arial;
font-size: 1em;
}
.th{
border: solid;
empty-cells: show;
background-color: #fffff0;
}
.td{
border: solid ;
empty-cells: show;
background-color: #fffff0;
}
a:hover {
property : value;
}Nguyên Phấn Đông
2020-10-09 10:20:35
Attendance.htm
<!DOCTYPE html>
<html>
<head>
<title>Weekly attendance</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 style="text-decoration: underline; text-align: center;">Attendance Sheet</h1>
<div id="head">
<a href="file:///C:/Users/dong/Desktop/C2002L/bai%202/week1.html" class="navigation">Week1</a>
<a href="#" class="navigation">Week2</a>
<a href="#" class="navigation">Week3</a>
<a href="#" class="navigation">Week4</a>
</div>
</body>
</html>