표 제목은 <caption> 태그를 이용해 캡션으로 표시합니다. 기본적으로 캡션은 표의 위쪽에 표시되지만 caption-side 속성을 이용하면 캡션의 위치를 표 아래쪽으로 옮길 수 있습니다.
caption-side
caption-side는 요소의 캡션의 위치를 정하는 속성입니다.
기본형
caption-side : top | bottom
- top : 요소의 위에 캡션을 위치시킵니다. 기본값입니다.
- bottom : 요소의 아래에 캡션을 위치시킵니다.
예제
top
- 요소의 위쪽에 캡션을 위치시킵니다.
<table>
<caption class="top">Table Caption</caption>
<tr>
<td>Lorem</td>
<td>Ipsum</td>
<td>Dolor</td>
</tr>
<tr>
<td>Sit</td>
<td>Amet</td>
<td>Elit</td>
</tr>
</table>
table {
width: 100%;
}
table, td {
border: 1px solid #444444;
}
.top {
caption-side: top;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
bottom
- 요소의 아래쪽에 캡션을 위치시킵니다.
<table>
<caption class="bottom">Table Caption</caption>
<tr>
<td>Lorem</td>
<td>Ipsum</td>
<td>Dolor</td>
</tr>
<tr>
<td>Sit</td>
<td>Amet</td>
<td>Elit</td>
</tr>
</table>
table {
width: 100%;
margin-top: 20px;
}
table, td {
border: 1px solid #444444;
}
.bottom {
caption-side: bottom;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.