1학기 성적
| 이름 |
HTML |
CSS |
| 합 |
310 |
249 |
| 유수봉 |
80 |
70 |
| 유별란 |
95 |
99 |
| 유명한 |
85 |
90 |
| 유리한 |
50 |
40 |
<![CDATA[
<!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>
<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>
</tbody>
</table>
<hr>
</body>
</html>
]]>