차림

2006년 11월 12일

표에서 caption 위치 바꾸기

표에서 <caption> 태그는 표를 설명하는 제목 (영어로 caption)을 나타내기 위한 것으로, <table> 태그 바로 뒤에 오게 되어 있다.

기본 설정에 따르면 표의 제목은 다음 예에서 보듯이 표 위쪽에 온다.

표 1. 과일값 (단위 : 원)
가게 사과 복숭아
금마트 500 2,000 600
은마트 700 1,500 600
동마트 400 3,000 500

하지만 때론 표 아래에 제목이 오게 하고 싶을 때도 있다. 표에서 <caption> 태그의 내용이 나오는 위치는 caption-side로 바꿀 수 있다.


caption { caption-side: bottom; }

CSS에서 설정을 위와 같이 해 두면 아래 표에서 보듯이, 표의 제목은 표 아래쪽에 오게 된다. 표의 제목을 표 위에 오게 하고 싶으면 bottom 대신 top을 써 주면 된다.

표 1. 과일값 (단위 : 원)
가게 사과 복숭아
금마트 500 2,000 600
은마트 700 1,500 600
동마트 400 3,000 500
목록