테이블 태그

• <table> 표를 만드는 태그, 표 전체를 감싸는 용도
• <caption> 표의 제목 또는 설명 작성
• <tr> 표의 행(가로, row)
• <td> 표의 열(세로, column)
• <th> 표의 제목 열(column)

<style>
		table, td, th { 
			border: 1px solid #000;
		}
		td, th {
			padding: 10px 20px;
		}		
</style>
		
<table>
	<caption>성적표</caption>
	<tr>
		<th>반</th>
		<th>이름</th>
		<th>국어</th>
		<th>영어</th>
		<th>수학</th>
		<th>과학</th>
	</tr>
	<tr>
		<td>1반</td>
		<td>홍길동</td>
		<td>90점</td>
		<td>80점</td>
		<td>50점</td>
		<td>60점</td>
	</tr>
</table>

테이블 구조 지정 태그

• 테이블의 구조를 좀 더 명확하게 하기위해 사용하는 태그
• <thead> 표의 제목 열들을 묶는 그룹 태그
• <tbody> 표의 일반적인 데이터들을 묶는 그룹 태그
• <tfoot> 표의 하단 영역을 묶는 그룹 태그

<style>
		table, td, th { 
			border: 1px solid #000;
		}
		td, th {
			padding: 10px 20px;
		}
</style>

<table>
		<caption>성적표</caption>
		<thead>
			<tr>
				<th>반</th>
				<th>이름</th>
				<th>국어</th>
				<th>영어</th>
				<th>수학</th>
				<th>과학</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1반</td>
				<td>홍길동</td>
				<td>90점</td>
				<td>80점</td>
				<td>50점</td>
				<td>60점</td>
			</tr>
			<tr>
				<td>1반</td>
				<td>김영희</td>
				<td>50점</td>
				<td>60점</td>
				<td>90점</td>
				<td>100점</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<th>평균</th>
				<td></td>
				<td>70점</td>
				<td>70점</td>
				<td>70점</td>
				<td>80점</td>
			</tr>
		</tfoot>
	 </table>

행이나 열 합치기

• <td rowspan=”n"> 행을 병합하는 속성
• <th colspan="n"> 열을 병합하는 속성

<table>
		<caption>성적표</caption>
		<thead>
			<tr>
				<th>반</th>
				<th>이름</th>
				<th>국어</th>
				<th>영어</th>
				<th>수학</th>
				<th>과학</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td rowspan="2">1반</td>
				<td>홍길동</td>
				<td>90점</td>
				<td>80점</td>
				<td>50점</td>
				<td>60점</td>
			</tr>
			<tr>
				<!-- 두 행을 합치기위해 td태그 하나 주석 -->
				<!-- <td>1반</td> -->
				<td>김영희</td>
				<td>50점</td>
				<td>60점</td>
				<td>90점</td>
				<td>100점</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<!-- 두 열을 합치기위해 td태그 하나 주석 -->
				<th colspan="2">평균</th>
				<!-- <td></td> -->
				<td>70점</td>
				<td>70점</td>
				<td>70점</td>
				<td>80점</td>
			</tr>
		</tfoot>
	 </table>