CSS의 empty-cells 속성은 표(table)에서 내용이 없는 빈 셀을 어떻게 표시할지 지정하는 데 사용됩니다. 이 속성을 활용하면 빈 셀의 테두리와 배경을 그대로 보여주거나, 반대로 화면에서 숨길 수 있어 표 디자인을 더 깔끔하게 다듬을 수 있습니다.
문법(Syntax)
CSS empty-cells 속성의 기본 문법은 다음과 같습니다 −
Selector {
empty-cells: /*값*/
}empty-cells 속성에 사용할 수 있는 값은 다음 두 가지입니다.
- show (기본값): 빈 셀도 일반 셀과 동일하게 테두리와 배경을 포함하여 표시합니다.
- hide: 빈 셀의 테두리와 배경을 표시하지 않아 마치 셀이 없는 것처럼 보이게 합니다.
예제 1
다음 예제는 CSS empty-cells 속성의 동작 방식을 보여줍니다 −
<!DOCTYPE html>
<html>
<head>
<style>
table, table * {
border: groove;
}
table {
display: inline-block;
}
#demo1 {
empty-cells: show;
}
#demo2 {
empty-cells: hide;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<table id="demo1">
<tr>
<th colspan="3">Demo</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Six</td>
</tr>
<tr>
<td></td>
<td>Eight</td>
<td></td>
</tr>
</table>
<table id="demo2">
<tr>
<th colspan="3">Demo</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Six</td>
</tr>
<tr>
<td></td>
<td>Eight</td>
<td></td>
</tr>
</table>
</body>
</html>
출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다 −
왼쪽 표(show)는 빈 셀의 테두리가 그대로 유지되는 반면, 오른쪽 표(hide)는 빈 셀 부분의 테두리가 사라지는 것을 확인할 수 있습니다.
예제 2
이번에는 시각적 효과를 추가한 또 다른 예제를 살펴보겠습니다 −
<!DOCTYPE html>
<html>
<head>
<style>
table * {
border: ridge skyblue;
padding: 0.5rem;
}
table {
margin: 20px;
display: inline-block;
box-shadow: 0 0 6px 3px green;
}
#demo1 {
empty-cells: hide;
}
#demo2 {
empty-cells: show;
}
</style>
</head>
<body>
<table id="demo1">
<tr>
<th colspan="3">Hide</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<table id="demo2">
<tr>
<th colspan="3">Show</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다 −
이처럼 empty-cells 속성의 hide 값은 데이터가 없는 셀을 시각적으로 감추어 표를 간결하게 만들고, show 값은 빈 셀의 영역을 명확히 유지하여 레이아웃의 일관성을 지켜 줍니다. 상황에 맞게 값을 선택하면 더욱 가독성 높은 표를 만들 수 있습니다.