caption-side 속성

caption-side 속성은 <caption> 태그로 생성된 테이블 캡션의 위치를 지정합니다. 이 속성은 두 가지 값을 가질 수 있습니다: top (테이블 상단, 기본값) 또는 bottom (테이블 하단).

구문

선택자 {
	caption-side: top | bottom;
}

예제

캡션을 테이블 위쪽에 배치해 봅시다:

<table border="1" width="300">
	<caption>Table</caption>
	<tr>
		<th>Head</th>
		<th>Description</th>
	</tr>
	<tr>
		<td>text1</td>
		<td>text2</td>
	</tr>
</table>

table {
	width: 100%;
	border-collapse: collapse;
}
td {
	width: 200px;
	height: 100px;
	text-align: center;
}
caption {
	caption-side: top;
	font-weight: bold;
}

예제

이번에는 캡션을 테이블 아래쪽으로 옮겨 봅시다:

<table border="1" width="300">
	<caption>Table</caption>
	<tr>
		<th>Head</th>
		<th>Description</th>
	</tr>
	<tr>
		<td>text1</td>
		<td>text2</td>
	</tr>
</table>

table {
	width: 100%;
	border-collapse: collapse;
}
td {
	width: 200px;
	height: 100px;
	text-align: center;
}
caption {
	caption-side: bottom;
	font-weight: bold;
}

함께 보기

요소의 하단 가장자리 위치를 지정하는 bottom 속성
요소의 상단 가장자리 위치를 지정하는 top 속성
요소의 왼쪽 가장자리 위치를 지정하는 left 속성
요소의 오른쪽 가장자리 위치를 지정하는 right 속성
첫 번째 요소 뒤의 위치를 지정하는 ::backdrop 의사 요소