HTML DOM TableData headers 속성 – 사용법과 예제 총정리

HTML DOM의 TableData headers 속성은 HTML 문서에서 테이블 셀(<td> 요소)의 headers 속성값을 가져오거나 수정하는 데 사용됩니다.

headers 속성은 데이터 셀이 어떤 헤더 셀(<th>)에 속하는지를 지정하며, 주로 스크린 리더 같은 보조 기술이 테이블 구조를 올바르게 해석하도록 돕는 역할을 합니다.

문법(Syntax)

headers 속성의 기본 문법은 다음과 같습니다.

1. headers 값 반환하기

object.headers

2. headers 값 설정하기

object.headers = "header_ids"

이제 실제 예제를 통해 headers 속성이 어떻게 동작하는지 살펴보겠습니다.

예제(Example)

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
        text-align: center;
    }
    table {
        margin: 2rem auto;
        width: 400px;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
    .show {
        font-size: 1.2rem;
    }
</style>
<body>
<h1>DOM TableData headers 속성 데모</h1>
<table border="2">
<thead>
<tr>
<th>이름</th>
<th>학번</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="Name">John</td>
<td headers="Rollno">071717</td>
</tr>
<tr>
<td headers="Name: Jane" id="jane-data">Jane</td>
<td headers="Rollno">031717</td>
</tr>
</tbody>
</table>
<button onclick="get()" class="btn">headers 값 확인하기</button>
<div class="show"></div>
<script>
    function get() {
        document.querySelector(".show").innerHTML = document.querySelector('#jane-data').headers;
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM TableData headers 속성 – 사용법과 예제 총정리

여기서 “headers 값 확인하기” 버튼을 클릭하면, Jane 행의 headers 속성값이 아래와 같이 화면에 표시됩니다.

HTML DOM TableData headers 속성 – 사용법과 예제 총정리

정리

TableData의 headers 속성은 자바스크립트로 테이블 셀과 헤더 셀 간의 연관 관계를 동적으로 읽거나 변경할 수 있게 해줍니다. 접근성(accessibility)을 고려한 테이블 마크업을 작성할 때 특히 유용하게 활용할 수 있습니다.