[css3] caption-side - 표에서 제목 위치 선정

1. 개념

caption-side - 표에서 제목 위치 선정

table 속성으로 표를 만들고 제목을 정해 줄 때 제목의 위치를 정하고자 할 경우에 caption 태그 안에 caption-side 속성을 사용함

속성	설명
top	표의 윗부분에 표시(기본값)
bottom	표의 아래부분에 표시

2. 태그

caption-side

html5 코드

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

< ! DOCTYPE html> < html lang = "kr" > < head > < meta charset = "utf-8" > < title > 키보드와 하루 < /title > < /head > < body > < table > 1 < caption > 제목(위 표시) < /caption > 2 < caption style =' caption-side : bottom ' > 제목(아래 표시) < /caption > < tr > < td > 테스트1 < /td > < td > 값1 < /td > < td > 값2 < /td > < /tr > < tr > < td > 테스트2 < /td > < td > 값3 < /td > < td > 값4 < /td > < /tr > < /table > < /body > < /html >

결과 화면

caption-side 사용 예제

코드 설명

1

<

caption

> ........ <

/caption

>

caption에서 style을 지정하여 caption-side의 값을 bottom으로 설정하였습니다.
이렇게 지정을 하게 되면 2번에서처럼 제목이 아래쪽으로 표시되는 것을 확인하실 수 있습니다.
표의 제목을 지정하고자 할 경우에는 위에 지정하는 경우도 있지만, 경우에 따라서는 지금 보시는 것처럼 아래로 표시 하기도 합니다.
자신이 어떻게 표기할 것인지에 결정이 되면 cpation-side 속성을 사용하여 제목의 위치를 정해주시면 됩니다.
개인적으로 예전에는 표 위에 제목을 표시하는 경우가 대부분이었지만 아래에 표기해 주는 경우도 늘어나고 있습니다.
보는 사람마다 차이가 있겠지만 선호에 따라서 여러분들이 결정해 사용해 주시면 됩니다.

2

caption-side : bottom

caption의 역할은 표 제목을 표시하는 태그입니다.
table 태그로 표를 만든 후에 표에 해당하는 제목을 표시해주고자 사용하는 것에 사용되는 태그입니다.
그래서 caption이라는 태그는 따로 쓰지 않고 table 태그 내에서 사용이 됩니다.
그렇게 작성을 해야 표준을 따라 작성이 되게 됩니다.
표에서 제목을 표시하기 위해서 caption을 사용할 때 해당하는 내용입니다.
지금 1번에서 보는 것처럼 caption 이라는 태그를 사용하고 style로 아무런 속성값을 설정하지 않았습니다.
그렇게 되면 caption-side는 기본값에 해당하는 top으로 인식하여 제목을 표 위로 표시하게 됩니다.
그래서 입력한 '제목(위 표시)'라는 텍스트는 표의 위쪽으로 표시되어 있음을 확인할 수 있습니다.