[HTML] caption 태그

목 차

• HTML <caption> 태그란?
• 기본 문법
• CSS를 활용한 스타일 변경
  • caption-side 속성값
• <caption>태그와 <legend>태그의 차이점
• 내용 요약

 

HTML <caption> 태그란?

<caption> 태그는 HTML 테이블(<table>)의 제목을 추가할 때 사용하는 태그입니다. 테이블의 내용이 무엇인지 설명하는 역할을 하며, <table> 태그의 가장 첫 번째 자식 요소로 작성해야 합니다.

 

---

 

기본 문법

예제 코드:

<table>
  <caption>학생 성적표</caption>
  <tr>
    <th>이름</th>
    <th>수학</th>
    <th>영어</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>90</td>
    <td>85</td>
  </tr>
</table>

• caption 태그는 테이블 제목을 의미하므로, 테이블의 가장 첫 번째 요소로 위치해야 합니다.
• 기본적으로 caption은 테이블 위쪽 중앙 정렬로 표시됩니다.

 

---

 

CSS를 활용한 스타일 변경

caption의 위치나 스타일을 변경하려면 CSS를 사용하면 됩니다.

caption {
  font-weight: bold; /* 글씨 굵게 */
  font-size: 18px; /* 글자 크기 */
  color: #333; /* 글자 색 */
  caption-side: bottom; /* 테이블 아래쪽으로 이동 */
  text-align: left; /* 왼쪽 정렬 */
}

• caption-side: bottom; → 기본적으로 테이블 위에 위치하지만 아래쪽으로 이동 가능
• text-align: left; → 기본적으로 중앙 정렬이지만 왼쪽 정렬 가능

 

💡 caption-side 속성값

• top (기본값): 테이블 위쪽에 표시
• bottom: 테이블 아래쪽에 표시 

 

---

 

<caption>태그와 <legend>태그의 차이점

태그	사용 위치	역할
<caption>	<table> 내부	테이블 제목
<legend>	<fieldset> 내부	폼 그룹 제목

 

---

 

내용 요약

• <caption> 태그는 테이블의 제목을 표시하는 태그
• 반드시 <table>의 첫 번째 자식 요소로 위치해야 함
• 기본적으로 중앙 정렬되며 테이블 위쪽에 표시됨
• caption-side 속성을 사용하면 위치 변경 가능 (top, bottom)

 

---

 

관련글

• [HTML] em 태그 (텍스트 의미 강조&검색엔진최적화)
• [HTML] strong 태그 - 검색엔진 최적화(SEO) 태그
• [HTML] canvas 태그 (그래픽 이미지 그리기)