[html 태그] caption 태그 (table 태그, summary 속성)

2020/12/29 - [Frontend/HTML] - [html 태그] table 태그 (tr, th, td태그)

 

table태그를 사용하면서

해당 table 영역이 어떤 내용을 담고 있는지를 설명해줄 수 있는 태그가

바로 caption 태그이다.

 

1. summary 속성

caption 태그에 대해 설명을 하기 전에 먼저 알아야할 속성이 있다.

table 태그에 적용하는 속성인데,

해당 table이 어떤 내용을 담고 있는지 요약해주는 속성이다.

<table summary="1학년 3반 학생들의 과학, 수학 성적을 보여줍니다.">
  <caption>성적표</caption>
  <thead>
    <tr>
      <th>이름</th>
      <th>과목</th>
      <th>성적</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="2" scope="col">철수</th>
      <td>과학</td>
      <td>60점</td>
    </tr>
    <tr>
      <td>수학</td>
      <td>90점</td>
    </tr>
    <tr>
      <th rowspan="2" scope="col">영희</th>
      <td>과학</td>
      <td>100점</td>
    </tr>
    <tr>
      <td>수학</td>
      <td>80점</td>
    </tr>
  </tbody>
</table>

위와 같이 해당 table이 1학년 3반 학생들의 성적을 담고 있다고

table 내의 내용을 요약해서 보여준다.

 

이처럼 유용하게 사용할 수 있는 속성이지만,

summary 속성은 html5에 들어서는 표준이 아닌 속성이 되었다.

 

2. caption 태그

caption 태그는 table 태그의 첫번째 자식 요소로 위치해야한다.

<table>
  <tr>
    <th>이름</th>
    <td>철수</td>
  </tr>
  <caption>학생 이름</caption>
</table>

*위와 같이 tr태그나 기타 다른 태그 뒤가 아닌 table태그 바로 아래에 위치해야한다.

 

 

caption 태그는 html5 이전에는

table의 제목만 간단하게 나타내는 태그였다.

 

하지만 html5 부터는 summary 속성이 비표준이 되면서

caption 태그가 table 내용의 간단한 요약 및 제목을 나타내는 태그가 되었다.

<table>
  <caption>성적표, 1학년 3반 학생들의 수학, 과학 성적을 보여줍니다.</caption>
  <thead>
    <tr>
      <th>이름</th>
      <th>과목</th>
      <th>성적</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="2" scope="col">철수</th>
      <td>과학</td>
      <td>60점</td>
    </tr>
    <tr>
      <td>수학</td>
      <td>90점</td>
    </tr>
    <tr>
      <th rowspan="2" scope="col">영희</th>
      <td>과학</td>
      <td>100점</td>
    </tr>
    <tr>
      <td>수학</td>
      <td>80점</td>
    </tr>
  </tbody>
</table>