시멘틱 테이블


[ 시멘틱 테이블 ]
태그 명칭설 명사용여부
thead표 머리말 가능
tbody표 본문 가능
tfoot표 꼬리말 가능
www.w3schools.com
"> semantic table

시멘틱 테이블


[ 시멘틱 테이블 ]
태그 명칭설 명사용여부
thead표 머리말 가능
tbody표 본문 가능
tfoot표 꼬리말 가능
www.w3schools.com
"> semantic table

시멘틱 테이블


[ 시멘틱 테이블 ]
태그 명칭설 명사용여부
thead표 머리말 가능
tbody표 본문 가능
tfoot표 꼬리말 가능
www.w3schools.com
"> 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>semantic table</title>
<style>
	table{
		border: 1px solid black; border-collapse: collapse; width: 600px; height: 150px;
		text-align: center;
	}
	tr,td,th {
		border: 1px solid black;
	}
</style>
</head>
<body>
<!--
	# 표 시멘틱 테이블
	- 표의 구조를 제목, 본문, 요약 부분으로 나눔.
	- 시각 장애인도 환면 판독기를 사용해서 표의 구조를 쉽게 이해할 수 있음.
	- thead : 표의 머리말
	  tbody : 표의 본문
	  tfoot : 표의 꼬리말
-->
	<h2>시멘틱 테이블</h2>
	<br>
	<table>
		<caption>[ 시멘틱 테이블 ]</caption>
		<thead>
			<tr>
				<th>태그 명칭</th><th>설 명</th><th>사용여부</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>thead</td><td>표 머리말</td><td> 가능 </td>
			</tr>
			<tr>
				<td>tbody</td><td>표 본문</td><td> 가능 </td>
			</tr>
			<tr>
				<td>tfoot</td><td>표 꼬리말</td><td> 가능 </td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3"><a href="<https://www.w3schools.com>">www.w3schools.com</a></td>
			</tr>
		</tfoot>
	</table>
	
</body>
</html>