HTML DOM TableHeader 객체 완벽 가이드 - 생성 방법과 주요 속성

HTML DOM의 TableHeader 객체는 HTML 문서에서 <th> 요소를 나타냅니다. 이 객체를 활용하면 자바스크립트를 통해 동적으로 테이블의 헤더 셀을 생성하고 제어할 수 있습니다.

TableHeader 객체 생성 방법

문법

TableHeader 객체는 다음과 같은 문법으로 생성합니다.

document.createElement("TH");

TableHeader 객체의 주요 속성

TableHeader 객체에서 사용할 수 있는 주요 속성은 다음과 같습니다.

속성	설명
cellIndex	테이블 행(row)의 셀 컬렉션 내에서 해당 셀이 위치한 인덱스(순서)를 반환합니다.
colSpan	테이블 셀의 colspan 속성 값을 반환하거나 변경합니다.
headers	테이블 셀의 headers 속성 값을 반환하거나 변경합니다.
abbr	테이블 헤더 셀의 abbr 속성 값을 반환하거나 변경합니다.
rowSpan	테이블 셀의 rowspan 속성 값을 반환하거나 변경합니다.

TableHeader 객체 예제

아래 예제는 버튼을 클릭하면 <th> 요소를 동적으로 생성하여 테이블 헤더에 추가하는 코드입니다.

<!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;
    }
</style>
<body>
<h1>DOM TableHeader Object Demo</h1>
<table border="2">
<thead>
<tr class="table-header">
</tr>
<thead>
<tbody>
<tr>
<td>John</td>
<td>English</td>
</tr>
<tr>
<td>Elon</td>
<td>Germany</td>
</tr>
</tbody>
</table>
<button onclick="get()" class="btn">Create a TableHeader</button>
<script>
    function get() {
        var th1 = document.createElement("TH");
        var th2 = document.createElement("TH");
        th1.innerHTML = "Name";
        th2.innerHTML = "Language";
        document.querySelector('.table-header').appendChild(th1);
        document.querySelector('.table-header').appendChild(th2);
    }
</script>
</body>
</html>

실행 결과

HTML DOM TableHeader 객체 완벽 가이드 - 생성 방법과 주요 속성

위 화면에서 “Create a TableHeader” 버튼을 클릭해 보세요. 그러면 document.createElement("TH") 메서드를 통해 두 개의 TableHeader 객체가 생성되고, 각각 “Name”과 “Language”라는 텍스트가 담긴 헤더 셀이 테이블 상단에 추가됩니다.

HTML DOM TableHeader 객체 완벽 가이드 - 생성 방법과 주요 속성

이처럼 TableHeader 객체를 사용하면 페이지 새로고침 없이 자바스크립트만으로 테이블의 헤더 구조를 유연하게 구성할 수 있습니다.