Front-end 개발
[멋쟁이사자처럼] 실습 - 수능표 만들기 (table)
로그 생성기
2023. 7. 13. 15:52
목차
1. 주제
2. 사용된 주요 태그와 속성들
3. 코드
1. 주제: 수능표 만들기
html/css 의 <table> 를 활용해서 수능표 만들기를 해본다.
단순히 아래 수능성적표를 만들면 된다.
2. 사용된 주요 태그와 속성들
(1) <table>
- border-collapse: clollapse;
- table-layout: fixed;
(2) <caption>
- caption-side: bottom;
(3) <thead>
(4) <tbody>
(5) <tr>, <th>
- rowspan="2"
- colspan="2"
(6) <tfoot>
3. 코드
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>수능표 만들기</title>
<style>
table {
width: 90%;
margin: 30px auto;
border-collapse: collapse;
table-layout: fixed;
border: 2px solid black;
font-size: 15px;
line-height: 160%;
}
caption {
caption-side: bottom;
margin-top: 30px;
font-weight: bold;
}
th,
td {
border: 1px solid black;
text-align: center;
}
th {
background-color: #eee;
}
tfoot {
font-weight: bold;
}
</style>
</head>
<body>
<!-- <h2>수능표 만들기</h2> -->
<table>
<caption>2023 학년도 대학수능능력시험 성적통지표</caption>
<thead>
<tr>
<th>구분</th>
<th rowspan="2">한국사 영역</th>
<th>국어 영역</th>
<th>수학 영역</th>
<th rowspan="2">영어 영역</th>
<th colspan="2">탐구영역</th>
<th style="width: 10%;">제 2 외국어<br>/한문 영역</th>
</tr>
<tr>
<th>선택과목</th>
<th>화문과 작문</th>
<th>확률과 통계</th>
<th>생활과 윤리</th>
<th>지구과학1</th>
<th>독일어</th>
</tr>
</thead>
<tbody>
<tr>
<th>표준점수</th>
<td rowspan="2"></td>
<td>131</td>
<td>137</td>
<td rowspan="2"></td>
<td>53</td>
<td>64</td>
<td rowspan="2"></td>
</tr>
<tr>
<th>백분위</th>
<td>93</td>
<td>95</td>
<td>75</td>
<td>93</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>등급</th>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</tfoot>
</table>
</body>
</html>
Github 링크