IMG-LOGO
×

Tài Liệu Môn Học

Khoá học lập trình HTML/CSS

Nhập Môn HTML

[Video] Giới thiệu về lập trình web - HTML/CSS [Video] Hướng dẫn tạo ra 1 trang web đơn giản nhất - HTML/CSS [Video] Hướng dẫn debug/test/develop trên trình duyệt web -HTML/CSS

Tìm Hiểu Thẻ HTML5

[Video] Formatting Text using Tags - html tags [Video] Creating Hyperlinks and Anchors (phần 1) - html tags [Video] Creating Hyperlinks and Anchors (phần 2) - html tags [Video] Cách dùng thẻ img và map để hiển thị hình ảnh html - HTML/CSS [Video] Tìm hiểu về đường dẫn file (path file) trong HTML/CSS

CSS

[Video] Tìm hiểu thuộc tính trong thẻ html [Video] Giới thiệu CSS & Sử dụng các thuộc tính cơ bản [Video] Hướng dẫn tách biệt CSS và HTML [Video] Xử lý Event trong CSS (:hover, :active, :link, ...) - Lập trinh HTML/CSS

Table & CSS

[Video] Tìm hiểu table trong HTML/CSS - HTML/CSS

Form & CSS

[Video] Thiết kế form trong HTML/CSS/JS [Video] Tìm hiểu tag videos, audio trong HTML/CSS/JS [Video] Bài tập - Thiết kế form gửi email - Lập trình HTML/CSS/JS

Thiết Kế Layout

[Video] Tìm hiểu Frame qua ví dụ quản lý khách sạn HTML/CSS [Video] Hướng dẫn tạo layout bằng thẻ Div căn bản [Video] Hướng dẫn thiết kế layout bằng thẻ div nâng cao (Thiết kế giao diện web gokisoft)




Trang Chủ Học HTML5 - CSS3 [Video] Thiết kế calendar page bằng HTML5/CSS - Tạo website calendar HTML5/CSS - C2110L

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

by GokiSoft.com - 20:25 22/01/2022 1,302 Lượt Xem

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>


Bình luận



Chia sẻ từ lớp học

Tài Liệu Tham Khảo

Đã sao chép!!!