[HTML] table 태그로 성적표 만들기
by mini_min[HTML]
table 태그로 성적표 만들기
✔️ table 태그로 성적표 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.score tr>td {
padding: 5px; text-align: right;
}
/*첫번째꺼는 center 정렬을 한다는 말이다*/
.score tr>td:nth-child(1) {
padding: 5px; text-align: center;
}
/*태그선택자~ table 태그 모두 적용!*/
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<h4>※ table 예제</h4>
<table class="score" border="1" style="width: 600px; height:150px; border-collapse: collapse;">
<caption style="font-weight: 600;">성적처리</caption>
<tr style="background: lightgray;">
<th width="100">이름</th>
<th width="100">국어</th>
<th width="100">영어</th>
<th width="100">수학</th>
<th width="100">총점</th>
<th width="100">평균</th>
</tr>
<tr align="right" >
<td align="center">홍길동</td>
<td >80</td>
<td >70</td>
<td >80</td>
<td >230</td>
<td >76.7</td>
</tr>
<tr align="right">
<td align="center">이순신</td>
<td >90</td>
<td >90</td>
<td >90</td>
<td >270</td>
<td >90.0</td>
</tr>
<tr align="right">
<td align="center">서대한</td>
<td >70</td>
<td >80</td>
<td >80</td>
<td >230</td>
<td >76.7</td>
</tr >
<tr align="right" style="background: lightblue;">
<td align="center">총계</td>
<td style="padding-right: 5px;">240</td>
<td style="padding-right: 5px;">240</td>
<td style="padding-right: 5px;">250</td>
<td style="padding-right: 5px;">730</td>
<td style="padding-right: 5px;">81.1</td>
</tr>
</table>
<br><hr>
</body>
</html>
✔️ table 태그로 성적표 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>table 태그</h3>
<table border="1" style="width: 500px; margin: 10px auto; border-collapse: collapse; ">
<caption>성적처리</caption>
<thead>
<tr height="30" bgcolor="#e4e4e4">
<th width="100">이름</th>
<th>생년월일</th>
<th width="90">국어</th>
<th width="90">영어</th>
<th width="90">수학</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>홍길동</td>
<td>2000-10-10</td>
<td>100</td>
<td>90</td>
<td>95</td>
</tr>
<tr align="center">
<td>너자바</td>
<td>2000-10-10</td>
<td>100</td>
<td>90</td>
<td>95</td>
</tr>
<tr align="center">
<td>우자바</td>
<td>2000-10-10</td>
<td>100</td>
<td>90</td>
<td>95</td>
</tr>
</tbody>
<tfoot>
<tr height="30" align="center">
<td colspan="2">평균</td>
<td >100</td>
<td >90</td>
<td >95</td>
</tr>
</tfoot>
</table>
</body>
</html>
💡 - caption : 표의 제목 정의
- thead : 테이블의 머리말 부분
- tbody : 테이블의 본문 thead, tbody, tfoot 요소가 포함되지 않는 tr 은 기본적으로 tbody 태그에 포함된다.
- tfoot : 테이블의 꼬리말 부분
'HTML' 카테고리의 다른 글
| [HTML] border-spacing 태그 (0) | 2022.09.09 |
|---|---|
| [HTML] col / colgroup 태그 (0) | 2022.09.08 |
| [HTML] table 태그 (colspan / rowspan / border-collapse) (0) | 2022.09.08 |
| [HTML] semantic 시멘틱 태그 (main, article, section, nav 등) (0) | 2022.09.08 |
| [HTML] vertical-align 태그 (0) | 2022.09.08 |
블로그의 정보
개발자 미니민의 개발로그
mini_min