CSS의 caption-side 속성은 테이블 캡션 박스를 수직 방향으로 배치할 때 사용합니다. 이 속성에는 top과 bottom 두 가지 값을 지정할 수 있으며, 별도로 설정하지 않으면 캡션은 기본적으로 테이블 상단에 배치됩니다.
구문
CSS caption-side 속성의 기본 구문은 다음과 같습니다.
Selector {
caption-side: /*값*/
}예제 1
다음 예제는 caption-side 속성을 활용해 캡션을 테이블 하단에 배치하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
table * {
border: ridge skyblue;
padding: 0.5rem;
}
table {
margin: 20px;
box-shadow: 0 0 6px 3px indianred;
empty-cells: show;
}
caption {
border-top-style: none;
caption-side: bottom;
border-color: darkkhaki;
border-radius: 50%;
}
</style>
</head>
<body>
<table id="demo">
<caption>Demo</caption>
<tr>
<th colspan="3">Table</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
예제 2
두 번째 예제에서는 캡션에 배경색과 둥근 모서리 스타일을 적용한 뒤 하단에 배치하여, 캡션이 더욱 돋보이도록 꾸미는 방법을 살펴봅니다.
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: auto;
border: double black 13px;
border-radius: 6px;
}
td, th {
border-left: 1px solid black;
border-top: 1px solid black;
}
th {
background-color: lightblue;
border-top: none;
}
td:first-child, th:first-child {
border-left: none;
}
caption {
margin-top: 3px;
background-color: purple;
caption-side: bottom;
color: white;
border-radius: 20%;
}
</style>
</head>
<body>
<h2>Demo Table</h2>
<table>
<caption>Demo</caption>
<tr>
<th colspan="4">Table</th>
</tr>
<tr>
<td>One...</td>
<td>Two...</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
</tr>
</table>
</body>
</html>
출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
