HTML에서 특정 데이터 셀이 어떤 헤더 셀과 연관되어 있는지 명시하려면 headers 속성을 사용하면 됩니다. 이 속성에는 해당 테이블 헤더(<th>) 요소에 부여된 id 값을 공백으로 구분하여 하나 이상 나열할 수 있습니다.
headers 속성의 역할
headers 속성은 화면상의 시각적 변화를 만들지는 않지만, 스크린 리더와 같은 보조 기술(Assistive Technology)이 복잡한 테이블을 읽을 때 각 셀이 어떤 헤더에 속하는지 정확히 파악하도록 도와줍니다. 따라서 접근성(accessibility)을 높이고 싶은 테이블에서 유용하게 활용됩니다.
예제
아래 코드를 실행하면 headers 속성이 실제로 어떻게 적용되는지 확인할 수 있습니다. 첫 번째 행의 <th> 요소에 id를 지정하고, 두 번째 행의 <td> 셀들이 이 id를 참조하도록 작성했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid blue;
}
</style>
</head>
<body>
<table style = "width:100%">
<tr>
<th id = "name">Subject ID</th>
<th id = "email">Subject Name</th>
</tr>
<tr>
<td headers = "name">001</td>
<td headers = "email">Mathematics</td>
</tr>
</table>
</body>
</html>코드 설명
위 예제에서 첫 번째 행의 두 헤더 셀에는 각각 id="name"과 id="email"이 지정되어 있습니다. 그리고 아래 행의 데이터 셀들은 headers="name", headers="email"처럼 자신과 관련된 헤더의 id를 참조합니다. 이렇게 하면 스크린 리더가 "001"이라는 셀을 읽을 때 "Subject ID"라는 헤더 정보를 함께 전달할 수 있습니다.
참고로 여러 헤더를 동시에 참조해야 하는 경우에는 headers="id1 id2" 형태처럼 id 값을 공백으로 구분하여 나열하면 됩니다.