HTML/ex5-09.html at master · 0420yun/HTML · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>표 응용</title>
<style>
table {  /* 이중 테두리 제거 */
	border-collapse : collapse;
}
td, th {  /* 모든 셀에 적용 */
	text-align: left;
	padding: 5px;
	height: 15px;
	width: 100px;
}
thead, tfoot {  /* <thead>의 모든 셀에 적용 */
	background: darkgray;
	color: yellow;
}
tbody tr:nth-child(even) {  /* 짝수 <tr>에 적용 */
	background: aliceblue;
}
tbody tr:hover {  /* 마우스가 올라오면 pink 배경 */
	background: pink;
}
</style>
</head>
<body>
<h3>1학기 성적</h3>
<hr>
<table>
	<thead>
		<tr><th>이름</th><th>HTML</th><th>CSS</th></tr>
	</thead>
	<tfoot>
		<tr><th>합</th><th>310</th><th>249</th></tr>
	</tfoot>
	<tbody>
		<tr><th>황기태</th><th>80</th><th>70</th></tr>
		<tr><th>이재훈</th><th>95</th><th>99</th></tr>
		<tr><th>이병은</th><th>85</th><th>90</th></tr>
		<tr><th>김남윤</th><th>50</th><th>40</th></tr>
	</tbody>
</table>
</body>
</html>