[Html] Table 태그 Summary 속성 알아보기

출처 : https://webisfree.com/2016-04-11/[html]-table-%ED%83%9C%EA%B7%B8-summary-%EC%86%8D%EC%84%B1-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0 

[html] table 태그 summary 속성 알아보기

 

테이블을 만들기 위해 사용하는 테이블 태그(table)에는 다양한 속성들이 사용된다. 그 중에서도 우리는 다음과 같이 summary 속성을 속성을 사용한 태그를 볼 수 있다. 과연 이 속성은 어떤 역할을 하는 태그인지 알아보겠다.

summary 속성은 현재 테이블이 갖고 있는 내용을 요약한 부분으로 어떤 내용이 담겨있는지 간략하게 알려줄 수 있다. 이 태그를 사용하는 목적 중 가장 큰 이유는 웹접근성에 해당하는 이유이다. 시각 장애인의 경우를 예로 들면 리더기를 통해 테이블을 읽는 경우가 생길 수 있다. 이 경우 테이블이 어떻게 구성되었고 무엇을 보여주는지에 대하여 간략한 요약을 나타낸다.

우선 이 속성의 쓰임을 아래의 예제를 통해 상세하게 알아보자. 만약 행사에 대한 스케쥴표가 아래와 같이 있는 경우를 예로 들어보자.


! Summary 태그의 예제소스 코드보기

<table summary="첫째줄은 시간을 나타내며 다른 컬럼들은 행사에 대한 장소 및 설명이다.">
<tbody>
   <tr>
      <td></td>
         <td>장소</td>
         <td>설명</td>
      </tr>
      <tr>
         <td>13:00 ~ 14:00</td>
         <td>강의실 A</td>
         <td>커뮤니케이션 강화</td>
      </tr>
      <tr>
         <td>14:00 ~ 15:00</td>
         <td>강의실 B</td>
         <td>컴퓨터 사이언스</td>
      </tr>
   </tbody>
</table>

# 테이블의 모습

	장소	설명
13:00 ~ 14:00	강의실 A	커뮤니케이션 강화
14:00 ~ 15:00	강의실 B	컴퓨터 사이언스

참고로, 이 태그는 아래와 같이 caption 태그와 함께 사용되기도 하니 참고하기 바란다. 이 경우 캡션태그는 요약이라기 보다 중요 핵심 키워드만 가지는 것이 보통이다.

<table>
   <caption>13시부터 15시까지 수업</caption>
</table>

참고로, summary 속성은 모든 브라우저에서 지원되나 html 5에서는 축소된 속성임을 알아두자.