scope 속성의 정의 및 사용법

테이블의 헤더 셀(<th> 태그)에 사용되는 scope 속성은
헤더 셀이 어떤 범위의 셀과 관련이 있는지 명확하게 지정하는 속성입니다.

이 속성의 사용 목적은
복잡한 테이블 헤더 구조의 헤더 셀과 데이터 셀을 쉽게 이해할 수 있도록 연결(associate, 연관짓다)하는 것입니다. 이는 접근성 향상에 중요한 역할을 하며, 스크린 리더와 같은 접근성 도구가 테이블의 데이터 구조를 더 잘 이해하도록 도와줍니다.

scope 속성을 헤더 셀에 추가하면 스크린 리더에 헤더가 정확히 어떤 셀의 헤더인지 알려줄 수 있습니다.
예를 들어, 헤더가 있는 행(가로 방향, table row)에 포함된 셀의 헤더인지, 아니면 열(세로 방향, table column)에 포함된 셀의 헤더인지 말입니다.

값

이 속성은 범위를 나타내는 네 가지 키워드 값이 있으며, 이러한 연결 범위를 지정할 수 있습니다.

th 태그의 scope 속성의 값
row 헤더 셀이 동일한 행(가로 방향, table row) 범위 내의 모든 셀과 열결합니다.
col 헤더 셀이 동일한 열(세로 방향, table column) 범위 내의 모든 셀과 열결합니다.
rowgroup 헤더 셀이 동일한 행(가로 방향, table row) 그룹(헤더 셀이 속한 모든 행)에 속하며, 해당 그룹 범위 내의 모든 셀과 열결합니다.
colgroup 헤더 셀이 동일한 열(세로 방향, table column) 그룹(헤더 셀이 속한 모든 열)에 속하며, 해당 그룹 범위 내의 모든 셀과 열결합니다.

scope 속성을 지정하지 않았거나, scope 속성 값이 유효하지 않으면 브라우저가 헤더 셀이 적용되는 범위의 데이터 셀을 테이블 구조 맥락에 따라 자동으로 선택합니다.

예제

아래는 scope 속성의 네 가지 키워드 값(row, col, rowgroup, colgroup)에 대한 실제적인 HTML 테이블 예제입니다.

row

헤더 셀이 동일한 행(가로 방향, table row) 범위 내의 모든 셀과 열결합니다.

HTML 
<table>
    <caption>국가별 수도</caption>
    <tr>
        <th scope="row">프랑스</th> <!-- row -->
        <td>파리</td>
    </tr>
    <tr>
        <th scope="row">대한민국</th> <!-- row -->
        <td>서울</td>
    </tr>
    <tr>
        <th scope="row">일본</th> <!-- row -->
        <td>도쿄</td>
    </tr>
</table>
CSS 
th, td {
    padding: 0.5em 1em;
    border: 1px solid gray;
}
th {
    background-color: #e6e6e6;
}
실제 적용된 모습
설명

예제에서는 scope="row"로 <th> 태그의 프랑스은 동일한 행(가로 방향, table row)의 범위에 있는 셀(<td> 태그)인 파리와 연결된 헤더임을 명확히 지정하며, 대한민국은 워싱턴과, 일본은 도쿄와 연결된 헤더임을 명확히 지정합니다.

col

헤더 셀이 동일한 열(세로 방향, table column) 범위 내의 모든 셀과 열결합니다.

HTML 
<table>
    <caption>분식점 메뉴</caption>
    <tr>
        <th scope="col">메뉴</th> <!-- col -->
        <th scope="col">가격</th> <!-- col -->
    </tr>
    <tr>
        <td>라면</td>
        <td>5,000</td>
    </tr>
    <tr>
        <td>김밥</td>
        <td>4,000</td>
    </tr>
</table>
CSS 
th, td {
    padding: 0.5em 1em;
    border: 1px solid gray;
}
th {
    background-color: #e6e6e6;
}
실제 적용된 모습
설명

예제에서는 scope="col"로 <th> 태그의 메뉴는 동일한 열(세로 방향, table column)의 범위에 있는 셀(<td> 태그)인 라면와 김밥에 연결된 헤더임을 명확히 지정하며, 가격은 5,000과 4,000에 연결된 헤더임을 명확히 지정합니다.

rowgroup

헤더 셀이 동일한 행(가로 방향, table row) 그룹(헤더 셀이 속한 모든 행)에 속하며, 해당 그룹 범위 내의 모든 셀과 열결합니다.

HTML 
<table>
    <tr>
        <th rowspan="3" scope="rowgroup">주간 운동 시간</th> <!-- rowgroup -->
        <th scope="row">월요일</th>
        <td>1시간</td>
    </tr>
    <tr>
        <th scope="row">화요일</th>
        <td>1.5시간</td>
    </tr>
    <tr>
        <th scope="row">수요일</th>
        <td>2시간</td>
    </tr>
</table>
CSS 
th, td {
    padding: 0.5em 1em;
    border: 1px solid gray;
}
th {
    background-color: #e6e6e6;
}
실제 적용된 모습
설명

예제에서는 scope="rowgroup"으로 <th> 태그의 주간 운동 시간은은 이 헤더 셀이 속한 모든 행(가로 방향, table row) 그룹의 범위에 있는 셀(<th> 태그)인 월요일, 화요일, 수요일와 연결된 헤더임을 명확히 지정합니다.

헤더 셀을 다른 헤더 셀과 연결합니다.

이 예제를 보면 알 수 있듯이, scope는 '헤더 셀이 어떤 범위의 셀과 관련이 있는지 명확하게 지정하는 속성'으로
헤더 셀과 연결되는 셀은 데이터 셀( <td> 태그)뿐만 아니라, 헤더 셀( <th> 태그) 간의 관계도 지정할 수 있습니다.

colgroup

헤더 셀이 동일한 열(세로 방향, table column) 그룹(헤더 셀이 속한 모든 열)에 속하며, 해당 그룹 범위 내의 모든 셀과 열결합니다.

HTML 
<table>
    <tr>
        <th colspan="2" scope="colgroup">주간 운동 시간</th> <!-- colgroup -->
    </tr>
    <tr>
        <th scope="row">월요일</th>
        <td>1시간</td>
    </tr>
    <tr>
        <th scope="row">화요일</th>
        <td>1.5시간</td>
    </tr>
    <tr>
        <th scope="row">수요일</th>
        <td>2시간</td>
    </tr>
</table>
CSS 
th, td {
    padding: 0.5em 1em;
    border: 1px solid gray;
}
th {
    background-color: #e6e6e6;
}
실제 적용된 모습
설명

예제에서는 scope="colgroup"으로 <th> 태그의 주간 운동 시간은은 이 헤더 셀이 속한 열(세로 방향, table column)은 두 개가 있습니다. 왼쪽의 요일을 나타내는 열과 그 다음 시간을 나타내는 열입니다. 이 두 열의 범위에 있는 셀들(왼쪽의 요일을 나타내는 열의 월요일, 화요일, 수요일과 그 다음 시간을 나타내는 1시간, 1.5시간, 2시간)에 연결된 헤더임을 명확히 지정합니다.

참고사항

  • 첫 번째 행이나 첫 번째 열에 헤더가 있는 간단한 표의 경우에는
    scope 속성을 사용하지 않고 단순히 헤더 셀( <th> 태그) 사용하더라도 브라우저가 헤더 셀이 적용되는 범위의 데이터 셀을 자동으로 인식하므로, scope 속성을 꼭 사용해야 하는 것은 아닙니다.
  • 간단한 테이블이 접근성 측면에서 좋습니다. 복잡한 헤더 구조의 테이블보다 여러 개의 간단한 테이블로 작성할 수 있는지 고려해 보세요.

브라우저 호환성

scope 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
scope 1 12 1 1

명세서

scope 속성의 명세서 사양
명세서 사양
scope HTML Standard
#attr-th-scope

참고문헌

같이 보기