[HTML] 03_테이블 제목 지정하기(caption tag)

1. caption

: 테이블의 제목을 표현하기 위해 사용한다.
: caption태그는 table 태그 안에서 사용되며, 테이블의 제목을 표현한다.

• caption의 기본 속성: 테이블 위쪽, 가운데 정렬

<table border="1">
  <caption>나라와 수도</caption>
  <tr>
    <th>나라</th>
    <th>수도</th>
  </tr>
  <tr>
    <td>미국</td>
    <td>워싱턴D.C</td>
  </tr>
  <tr>
    <td>영국</td>
    <td>런던</td>
  </tr>
  </table>

나라와 수도

나라	수도
미국	워싱턴D.C
영국	런던

2. caption의 위치를 옮기고 싶다면 : CSS활용 추천

방법1) caption 태그 안에 align 속성을 지정한다.(하지만 비추)

<table border="1">
  <caption align="right">나라와 수도</caption>
  ...
</table>

-> 위처럼 사용할 수 있지만 지원하지 않는 브라우저가 많지 않아 실행이 잘 되지 않는다.
-> 그럼에도 불구하고 사용할 경우,

• 속성값 : left, right, top, bottom (4ea)

방법2) CSS를 활용한다.

-> text-align / caption-side 두가지 속성 이용

caption{
  caption-side: bottom;
  text-align: right;
}

🎈속성값

- caption-side : top / bottom / initial / inherit;
- text-align : left / right / center / justify / initial / inherit;