HTML scope 속성으로 헤더 셀의 범위(열·행)를 지정하는 방법

scope 속성으로 헤더 셀의 범위 지정하기

HTML에서 scope 속성을 사용하면 테이블의 헤더 셀(<th>)이 어떤 대상에 대한 헤더인지 명확하게 지정할 수 있습니다. 즉, 해당 헤더가 하나의 열(column), 행(row), 또는 열 그룹(colgroup), 행 그룹(rowgroup) 중 어느 것에 해당하는지 정의할 수 있습니다.

scope 속성의 주요 값

col — 현재 헤더 셀이 같은 열에 있는 셀들의 헤더임을 나타냅니다.
row — 현재 헤더 셀이 같은 행에 있는 셀들의 헤더임을 나타냅니다.
colgroup — 현재 헤더 셀이 열 그룹 전체의 헤더임을 나타냅니다.
rowgroup — 현재 헤더 셀이 행 그룹 전체의 헤더임을 나타냅니다.

scope 속성은 특히 스크린 리더와 같은 보조 기술이 테이블 구조를 올바르게 해석하도록 도와주기 때문에, 웹 접근성(accessibility) 측면에서 매우 중요합니다.

예제 코드

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, th, td {
            border: 1px solid black;
         }
      </style>
   </head>
   
   <body>
      <h2>크리켓 선수</h2>

      <table style = "width:100%">
         <caption>인도 크리켓 선수</caption>
         <th></th>
         <th scope = "col">이름</th>
         <tr>
            <td>1</td>
            <td>사친 텐둘카</td>
         </tr>
         <tr>
            <td>2</td>
            <td>비랏 코리</td>
         </tr>
      </table>
   </body>
   
</html>

코드 설명

위 예제에서 <th scope = "col">이름</th> 부분은 이 헤더 셀이 세로 방향(열)의 데이터 셀들, 즉 '사친 텐둘카'와 '비랏 코리'에 대한 헤더임을 의미합니다. 이처럼 scope = "col"을 지정하면 브라우저와 보조 기기가 테이블의 구조를 더 정확하게 이해할 수 있습니다.