표(table)에 제목이나 설명을 덧붙일 때
<caption> 태그를 사용하지만
<figcaption> 태그를 사용할 수도
있습니다. 두 가지 방법 모두 알아보겠습니다.
caption
먼저
<caption>
태그는
<table>
태그 바로 아래 사용합니다. 기본 위치는 표 위쪽 중앙이고, 태그 안 쪽에 다른
태그를 사용해서 제목을 여러 줄로 표시하거나 텍스트를 꾸밀 수 도 있습니다.
아래 표처럼 표 위에 제목을 덧붙일 수 있습니다.
| 브라우저 | 다운로드 |
|---|---|
| 크롬(Chrome) | www.google.com / chrome |
| 파이어폭스(Firefox) | www.mozilla.org / ko / firefox |
| 엣지(Edge) | www.microsoft.com / ko-kr / windows / microsoft-edge |
| 오페라(Opera) | www.opera.com/ ko / download |
예제
아래 예제는 <caption> 태그로 표 제목을 여러 줄로 표시한
것입니다.
제목의 위치를 파악하기 위해 표의 가로 크기를 100%로 했고, 테두리를 넣었습니다.
<table>
<caption>
<strong>Table Caption</strong>
<p>표에 제목이나 설명 추가하기</p>
</caption>
<tr>
<th>Lorem</th><th>Ipsum</th>
</tr>
<tr>
<td>Dolor</td><td>Amet</td>
</tr>
</table>
figcaption
표에 제목을 붙이는 두 번째 방법으로
<figcaption>
태그를 사용할 수 있습니다.
<figcaption> 태그는 figure와
caption의 합성어로 설명 글을 붙이고 싶은 대상을
<figure> 태그로 감싼 후 그 다음에 제목이나 설명 글을
입력합니다. 이 경우 제목이 중앙 정렬되지 않습니다. 간단한 예시는 다음과
같습니다.
국내에서 자주 사용하는 모던 브라우저
| 브라우저 | 다운로드 |
|---|---|
| 크롬(Chrome) | www.google.com / chrome |
| 파이어폭스(Firefox) | www.mozilla.org / ko / firefox |
| 엣지(Edge) | www.microsoft.com / ko-kr / windows / microsoft-edge |
| 오페라(Opera) | www.opera.com/ ko / download |
예제 1
아래 예제는 <figure> 태그를 이용해 표 전체를 감싼 후
<figcaption> 태그를 이용해 표에 제목을 붙인 것입니다.
<figure>
<figcaption>
<strong>Table Caption</strong>
<p>표에 제목이나 설명 추가하기</p>
</figcaption>
<table>
<tr>
<th>Lorem</th><th>Ipsum</th>
</tr>
<tr>
<td>Dolor</td><td>Amet</td>
</tr>
</table>
</figure>
예제 2
이미지에도 <table> 태그를 사용하여 제목을 추가할 수
있습니다.
다음은 간단한 예시입니다.
<figure>
<img src="//bit.ly/2GrygUe">
<figcaption>
Image Caption
</figcaption>
</figure>