HTML DOM TableData 객체 완벽 정리 – 생성 방법과 주요 속성

HTML DOM TableData 객체란?

HTML DOM의 TableData 객체는 HTML 문서에서 <td> 요소를 나타냅니다. 이 객체를 활용하면 자바스크립트만으로 테이블의 셀을 동적으로 생성하거나 조작할 수 있어, 데이터 목록을 화면에 렌더링할 때 매우 유용하게 사용됩니다.

TableData 객체 생성 방법

새로운 TableData 객체를 만들려면 document.createElement() 메서드를 사용합니다.

문법

document.createElement("TD");

TableData 객체의 주요 속성

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

그럼 실제 예제를 통해 TableData 객체가 어떻게 동작하는지 살펴보겠습니다.

예제

아래 예제에서는 버튼을 클릭하면 두 개의 <td> 요소를 동적으로 생성하여 기존 테이블의 빈 행에 추가합니다.

<!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 TableData 객체 데모</h1>
<table border="2">
<thead>
<tr>
<th>이름</th>
<th>언어</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>English</td>
</tr>
<tr>
<td>Elon</td>
<td>Germany</td>
</tr>
<tr class="new-row">
</tr>
</tbody>
</table>
<button onclick="get()" class="btn">TableData 생성</button>
<script>
    function get() {
        var td1 = document.createElement("TD");
        var td2 = document.createElement("TD");
        td1.innerHTML = "Mario";
        td2.innerHTML = "French";
        document.querySelector('.new-row').appendChild(td1);
        document.querySelector('.new-row').appendChild(td2);
    }
</script>
</body>
</html>

실행 결과

HTML DOM TableData 객체 완벽 정리 – 생성 방법과 주요 속성

위와 같은 초기 화면이 나타납니다. 여기서 “TableData 생성” 버튼을 클릭해 보세요.

HTML DOM TableData 객체 완벽 정리 – 생성 방법과 주요 속성

버튼을 클릭하면 createElement("TD")를 통해 새로운 셀 두 개가 생성되고, 빈 행(<tr class="new-row">)에 “Mario”와 “French”라는 내용의 셀이 추가되어 테이블에 새로운 데이터 행이 표시되는 것을 확인할 수 있습니다.

정리

HTML DOM TableData 객체는 <td> 요소를 프로그래밍 방식으로 다룰 수 있게 해주는 핵심 인터페이스입니다. document.createElement("TD")로 셀을 생성하고, appendChild()로 테이블에 추가하는 패턴은 동적 테이블 구현의 기본이 되므로 꼭 익혀두시기 바랍니다.