HTML 테이블에서 빈 셀(empty cell)의 테두리와 배경이 표시되는지 아니면 숨겨져 있는지 확인하려면 JavaScript의 emptyCells 속성을 사용하면 됩니다.
emptyCells 속성이란?
emptyCells 속성은 CSS의 empty-cells 스타일 속성에 대응하며, 테이블에서 내용이 없는 셀의 테두리와 배경을 표시할지 여부를 결정합니다. 이 속성은 다음과 같은 값을 가질 수 있습니다.
- show — 빈 셀의 테두리와 배경을 표시합니다(기본값).
- hide — 빈 셀의 테두리와 배경을 숨깁니다.
예제
아래 코드는 empty-cells: hide;가 적용된 테이블에서 버튼을 클릭하면 현재 설정값을 화면에 출력하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border:1px solid;
}
</style>
</head>
<body>
<table id="myID" style="empty-cells:hide;">
<tr>
<td>One</td>
<td>111</td>
</tr>
<tr>
<td>Two</td>
<td>222</td>
</tr>
<tr>
<td>Three</td>
<td></td>
</tr>
</table>
<br>
<button type="button" onclick="display()">Return</button>
<script>
function display() {
document.write(document.getElementById("myID").style.emptyCells);
}
</script>
</body>
</html>코드 설명
위 예제에서 세 번째 행의 마지막 셀은 비어 있습니다. 테이블에는 empty-cells: hide; 인라인 스타일이 적용되어 있으므로, 이 빈 셀의 테두리와 배경은 화면에 나타나지 않습니다.
버튼을 클릭하면 display() 함수가 실행되어 document.getElementById("myID").style.emptyCells를 통해 현재 설정된 값을 반환하며, 이 경우 hide가 출력됩니다.
참고 사항
emptyCells 속성은 Internet Explorer 8 이상 및 주요 최신 브라우저에서 지원됩니다. 또한 border-collapse: collapse;가 적용된 테이블에서는 빈 셀이 항상 표시되므로, 이 속성이 의도대로 동작하려면 테두리 병합 모드가 separate(기본값)여야 한다는 점에 유의하세요.