개발자 미니민의 개발스터디

[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 : 테이블의 꼬리말 부분

 

 

 

 

블로그의 정보

개발자 미니민의 개발로그

mini_min

활동하기