[HTML] 테이블 제목 지정하기, caption tag

테이블의 제목을 지정하기 위해서 HTML에서는 <caption>이라는 태그를 사용한다.

이번에는 이 <caption> 태그를 사용하는 방법을 알아보도록 하겠다.

<caption>

<caption> 태그는 테이블의 제목을 표현하기 위해 사용한다.

See the Pen 테이블2 by anna (@hianna) on CodePen.

위와 같이 <caption> 태그는 <table> 태그 안에서 사용되며, 테이블의 제목을 표현한다.

아무런 속성을 지정하지 않고 <caption> 태그를 사용할 경우, 

테이블의 caption 정보는 테이블의 위쪽에, 가운데 정렬되어 표현된다.

caption의 위치를 옮기고 싶다면?

1. <caption> 태그 안에 align 속성을 지정하는 것이다. 하지만 비추!

See the Pen 테이블3 by anna (@hianna) on CodePen.

위의 예제에서는 caption이 오른쪽으로 정렬되도록 지정하였다.

이와 같이 <caption> 태그 안에 align 속성을 지정하면 되지만,

이 속성은 html5에서는 지원하지 않기 때문에 다른 방법을 사용하는 것이 좋다.

실제로, 속성을 지정하였지만, 이 속성을 지원하지 않는 브라우저에서는 잘 실행되지도 않는다.

아마 대부분의 브라우저들에서는 위 예제가 잘 실행되지 않을 것이고, 

여전히 caption이 가운데 정렬되어 있을 것이다.

그럼에도 불구하고 align 속성을 사용해야 한다면

속성값으로는 'left', 'right', 'top', 'bottom' 네 가지를 사용할 수 있다.

2. CSS를 활용한다.

캡션의 위치와 정렬 방법을 지정하기 위해서 

css의 'text-align', 'caption-side' 이 두가지 속성을 지정할 수 있다.

See the Pen 테이블4 by anna (@hianna) on CodePen.

위의 예제에서는

caption-side 속성을 사용하여 캡션이 테이블의 아래쪽에 위치하도록 지정하였고,

text-align 속성을 사용하여 캡션이 오른쪽 정렬될 수 있도록 하였다.

각 속성에 사용가능한 값은 아래와 같다.

caption-side: top|bottom|initial|inherit;

text-align: left|right|center|justify|initial|inherit;