표에 제목이나 설명을 추가하는 방법 - caption, figcaption
표(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>data-editable="true"
data-preview="true"
data-height="441"
data-theme-id="light"
data-default-tab="html,result"
data-user="LiveBlogger"
data-slug-hash="JjXxEQW"
style="height: 441px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
data-pen-title="HTML caption 표에 캡션, 제목 붙이는 방법 예제"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
figcaption
표에 제목을 붙이는 두 번째 방법으로
<figcaption>
태그를 사용할 수 있습니다.
<figcaption> 태그는 figure와
caption의 합성어로 설명 글을 붙이고 싶은 대상을
<figure> 태그로 감싼 후 그 다음에 제목이나 설명 글을
입력합니다. 이 경우 제목이 중앙 정렬되지 않습니다. 간단한 예시는 다음과
같습니다.
Modern Browser
국내에서 자주 사용하는 모던 브라우저
| 브라우저 | 다운로드 |
|---|---|
| 크롬(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>data-editable="true"
data-preview="true"
data-height="441"
data-theme-id="light"
data-default-tab="html,result"
data-user="LiveBlogger"
data-slug-hash="qBqmjoW"
style="height: 441px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
data-pen-title="HTML figcaption 표에 캡션, 제목 붙이는 방법 예제"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제 2
이미지에도 <table> 태그를 사용하여 제목을 추가할 수
있습니다.
다음은 간단한 예시입니다.
<figure>
<img src="//bit.ly/2GrygUe">
<figcaption>
Image Caption
</figcaption>
</figure>data-editable="true"
data-preview="true"
data-height="441"
data-theme-id="light"
data-default-tab="html,result"
data-user="LiveBlogger"
data-slug-hash="RwGQrZj"
style="height: 441px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
data-pen-title="HTML caption 이미지에 캡션, 제목 붙이는 방법 예제"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
기타 HTML 참조
>제목 >
>문단 >
>줄바꿈 >
>공백 >
>목록 >
>이미지 >
>동영상 >
>오디오 >
>링크 >
>표 >
>양식 >
>인용구 >
>기초 >