HTML - table,tbody,tfoot,caption

yeong ·2022년 11월 9일

HTML5에서 구조적으로 표현하기 위해 thead 태그, tbody 태그, tfoot 태그 사용

summary 속성 : 표에 대한 설명을 속성값으로 설정

caption 태그 : 표 제목을 출력하기 위한 태그

rowspan 속성 : 병합할 행의 갯수를 속성값으로 설정

colspan 속성 : 병합할 열의 갯수를 속성값으로 설정


<body>
	<h1>tbody 태그</h1>
	<hr>
	<!-- HTML5에서는 표를 구조적으로 표현하기 위해 thead 태그, tbody 태그, tfoot 태그 사용 -->
	
	<!-- summary 속성 : 표에 대한 설명을 속성값으로 설정 -->
	<table summary="객실 안내">
		<!-- caption 태그 : 표 제목을 출력하기 위한 태그 -->
		<caption>객실표</caption>
		<thead>
			<tr>
				<th>건물명</th><th>방이름</th><th>크기</th><th>가격</th>
			</tr>
		</thead>
		
		<tfoot>
			<tr>
				<td colspan="4">바깥채 전체를 독채로 대여합니다.</td>
			</tr>
		</tfoot>
		
		<tbody>
			<tr>
				<!-- rowspan 속성 : 병합할 행의 갯수를 속성값으로 설정 -->
				<td rowspan="3">요안도라</td><td>유채방</td><td>4인실</td><td rowspan="2">20,000원</td>
			</tr>
			<tr>
				<td>동백방</td><td>2인실</td>
			</tr>
			<tr>
				<!-- colspan 속성 : 병합할 열의 갯수를 속성값으로 설정 -->
				<td>가족실</td><td colspan="2">60,000원(최대 4인)</td>
			</tr>
		</tbody>
		
		<!--  
		<tfoot>
			<tr>
				<td colspan="4">바깥채 전체를 독채로 대여합니다.</td>
			</tr>
		</tfoot>
		-->
	</table>
</body>

0개의 댓글