HTML DOM의 tFoot 속성은 HTML 문서 내 테이블에서 <tfoot> 요소를 반환하는 기능입니다. 이 속성을 활용하면 자바스크립트만으로 테이블의 바닥글(footer) 영역에 동적으로 접근하거나 내용을 조작할 수 있습니다.
tFoot 속성이란?
HTML 테이블은 구조적으로 <thead>(헤더), <tbody>(본문), <tfoot>(푸터) 세 가지 영역으로 나눌 수 있습니다. 그중 tFoot 속성은 테이블 객체에서 <tfoot> 요소를 직접 참조할 수 있게 해주며, 만약 테이블에 <tfoot>이 존재하지 않으면 null을 반환합니다.
문법(Syntax)
사용 방법은 매우 간단합니다.
object.tFoot
테이블 요소를 선택한 뒤 .tFoot을 붙여주면 해당 테이블의 푸터 요소에 접근할 수 있습니다.
예제 코드
아래 예제는 버튼을 클릭하면 테이블의 <tfoot> 내용을 화면에 출력하는 간단한 데모입니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
text-align: center;
}
table {
margin: 2rem auto;
}
.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 Table tFoot Property Demo</h1>
<table border="2">
<thead>
<tr>
<th>Name</th>
<th>Roll No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>071717</td>
</tr>
<tr>
<td>Jane</td>
<td>031717</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Table Footer</td>
</tr>
</tfoot>
</table>
<button onclick="get()" class="btn">Show tFoot</button>
<div class="show"></div>
<script>
function get() {
var tableFooter = document.querySelector('table').tFoot;
document.querySelector(".show").innerHTML = tableFooter.innerHTML;
}
</script>
</body>
</html>
실행 결과
코드를 실행하면 학생 이름과 학번이 담긴 테이블과 함께 빨간색 [Show tFoot] 버튼이 화면에 표시됩니다.
버튼을 클릭하면 자바스크립트의 get() 함수가 실행되어, querySelector로 선택한 테이블의 tFoot 속성 값을 읽어온 후 그 내부 HTML이 아래 영역에 출력됩니다.
정리
tFoot 속성은 테이블의 하단 요약 행이나 합계 행을 다룰 때 특히 유용합니다. 참고로 원본 예제 코드에는 <thead> 태그가 잘못 닫히는 오타가 있었는데, 위 예제에서는 올바르게 수정했습니다. 또한 유사한 속성으로 헤더를 반환하는 tHead, 본문 컬렉션을 반환하는 tBodies가 있으니 함께 활용하면 테이블 전체를 유연하게 제어할 수 있습니다.