HTML DOM emptyCells 속성 – 테이블 빈 셀 표시 방법 제어하기

HTML DOM의 emptyCells 속성은 테이블에서 내용이 없는 빈 셀(empty cell)을 어떻게 표시할지 지정하는 데 사용됩니다. 이 속성은 CSS의 empty-cells 속성과 대응되며, 기본값은 show로 설정되어 있습니다.

emptyCells 속성 문법

속성값을 설정하는 기본 문법은 다음과 같습니다.

object.style.emptyCells = "show|hide|initial|inherit";

속성값 설명

show – 빈 셀에도 테두리와 배경을 표시합니다. (기본값)
hide – 빈 셀의 테두리와 배경을 숨깁니다.
initial – 속성을 브라우저의 기본값으로 되돌립니다.
inherit – 부모 요소의 속성값을 그대로 상속받습니다.

즉, show로 설정하면 내용이 없는 셀에도 테두리가 나타나고, hide로 설정하면 빈 셀의 테두리가 화면에서 사라지게 됩니다.

emptyCells 속성 예제

다음 예제는 버튼을 클릭하면 숨겨져 있던 테이블의 빈 셀이 다시 보이도록 emptyCells 속성을 변경하는 코드입니다.

<!DOCTYPE html>
<html>
<head>
<style>
    #TABLE1 {
        font-style: italic;
        empty-cells: hide;
    }
    table,td {
        margin: 5px;
        padding: 3px;
        border: 1px solid black;
    }
</style>
<script>
    function showEmptyCells() {
        document.getElementById("TABLE1").style.emptyCells = "show";
        document.getElementById("Sample").innerHTML = "이제 테이블의 빈 셀들이 화면에 표시됩니다.";
    }
</script>
</head>
<body>
    <table id="TABLE1">
        <tr>
            <td>demo</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>demo</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>demo</td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <p>아래 버튼을 클릭하면 위 테이블에서 숨겨진 빈 셀들이 나타납니다.</p>
    <button onclick="showEmptyCells()">셀 표시하기</button>
    <p id="Sample"></p>
</body>
</html>

실행 결과

페이지를 처음 열면 CSS에서 empty-cells: hide;가 적용되어 있기 때문에, 각 행의 두 번째와 세 번째 빈 셀에는 테두리가 보이지 않습니다.

HTML DOM emptyCells 속성 – 테이블 빈 셀 표시 방법 제어하기

[셀 표시하기] 버튼을 클릭하면 자바스크립트 함수 showEmptyCells()가 실행되어 emptyCells 속성이 show로 변경되고, 숨겨졌던 빈 셀들의 테두리가 모두 나타납니다.

HTML DOM emptyCells 속성 – 테이블 빈 셀 표시 방법 제어하기

정리

emptyCells 속성은 테이블 디자인에서 시각적 일관성을 유지하거나, 반대로 빈 영역을 깔끔하게 숨기고 싶을 때 유용하게 활용할 수 있습니다. 특히 데이터가 동적으로 채워지는 테이블에서 빈 셀 처리 방식을 손쉽게 제어할 수 있다는 점이 큰 장점입니다.