1학기 성적

이름HTMLCSS
루피 80 70
조로 95 99
나미 85 90
초파 50 40
합 310 249
"> 09-02_Quiz_CSS-table

1학기 성적

이름HTMLCSS
루피 80 70
조로 95 99
나미 85 90
초파 50 40
합 310 249
"> 09-02_Quiz_CSS-table

1학기 성적

이름HTMLCSS
루피 80 70
조로 95 99
나미 85 90
초파 50 40
합 310 249
"> 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>09-02_Quiz_CSS-table</title>
<style type="text/css">
*{margin: 0; padding: 0;}
body {
	margin: 10px;
}
h3 {
	margin-bottom: 15px;
}
.Quiz {
	width: 350px;
	height: 200px;
	border-collapse: collapse;
	margin-top: 5px;
}

.Quiz tr:nth-child(2n+1){
	background-color: rgb(240 248 255);
}

.Quiz tr:first-child, .Quiz tr:last-child {
	background-color: rgb(169 169 169);
	color: yellow;
	font-weight: bold;
	text-align: left;
}

.Quiz th:first-child {
	left: 5px;
	width: 110px;
}
.Quiz th:last-child {
	width: 120px;
}

</style>
</head>
<body>
	<h3>1학기 성적</h3>
	<hr>
	<table class="Quiz">
		<tr>
			<th>이름</th><th>HTML</th><th>CSS</th>
		</tr>
		<tr>
			<td> 루피</td><td> 80 </td><td> 70 </td>
		</tr>
		<tr>
			<td> 조로 </td><td> 95 </td><td> 99 </td>
		</tr>
		<tr>
			<td> 나미 </td><td> 85 </td><td> 90 </td>
		</tr>
		<tr>
			<td> 초파 </td><td> 50 </td><td> 40 </td>
		</tr>
		<tr>
			<td> 합 </td><td> 310 </td><td> 249 </td>
		</tr>
	</table>
</body>
</html>