HTML 기초 정리(19) - <caption> 테이블 캡션

정의 및 사용법

태그 <caption>는 테이블 캡션을 정의합니다.
<table> 태그 바로 뒤에 태그 <caption>를 삽입해야 합니다 .

 

팁: 기본적으로 테이블 캡션은 테이블 위에 가운데 정렬됩니다.

그러나 CSS 속성 text-align 및 caption-side를 사용하여 캡션을 정렬하고 배치할 수 있습니다.

 

예시

<table>
  <caption style="text-align:right">My savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
<br>

<table>
  <caption style="caption-side:bottom">My savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>