테이블 — empty-cells 빈 셀 처리 완전 정리

 

 

Web Development · HTML Table

테이블 빈 셀 처리 —
empty-cells: show vs hide

데이터가 비어있는 셀의 테두리를 그릴지 말지 결정

시작 오늘 분석할 코드

같은 표 두 개에 각각 empty-cells: show와 hide를 적용해서 빈 td의 테두리·배경이 어떻게 달라지는지 비교한다.

.schedule { border-collapse: separate; /* empty-cells는 separate일 때만! */ } #tb1 td { empty-cells: show; } /* 기본값 — 빈 셀도 그림 */ #tb2 td { empty-cells: hide; } /* 빈 셀은 보이지 않음 */ <tr> <td>서울</td> <td>서울 vs 강원</td> <td></td> /* 빈 셀 */ </tr>

실제 출력 미리보기

.tb1 — empty-cells: show (기본값)

프로축구 경기 일정

울산	울산 vs 인천	TV 중계
부산	부산 vs 대전
서울	서울 vs 강원

.tb2 — empty-cells: hide

프로축구 경기 일정

울산	울산 vs 인천	TV 중계
부산	부산 vs 대전
서울	서울 vs 강원

※ 두 표의 차이: tb2의 빈 셀에는 테두리와 배경이 그려지지 않음.

용어 용어 정리

empty-cells빈 td의 시각적 처리

show (기본)빈 셀도 일반 셀처럼 그림

hide빈 셀은 테두리·배경 없이 투명

separate 필수border-collapse가 separate일 때만 동작

정말 빈 셀텍스트, 공백, 자식 요소 없을 때만 적용

&nbsp;도 비어있지 않음&nbsp; 한 글자도 있으면 "내용 있음"

---

1 "빈 셀"의 정의

empty-cells가 적용되려면 td 안에 정말 아무것도 없어야 한다. 다음은 "빈 셀이 아니다".

<td></td> ← 진짜 빈 셀 (적용 ✓) <td> </td> ← 공백 한 칸 — 비었다고 봐줌 (적용 ✓) <td>&nbsp;</td> ← 비공백 공백 — 내용 있음 (적용 ✗) <td><span></span></td> ← 자식 요소 있음 (적용 ✗)

---

2 border-collapse: collapse일 때는?

중요한 제약: border-collapse: collapse 모드에서는 empty-cells가 무시된다. 셀 테두리가 합쳐졌기 때문에 "이 셀만 빼기"가 불가능.

separate

셀들이 분리됨 → 빈 셀만 따로 숨길 수 있음 → empty-cells 동작

collapse

셀 테두리 통합 → 일부만 떼낼 수 없음 → empty-cells 무시

---

3 실무에서는 자주 쓰나?

솔직히 자주 쓰이진 않는다. 대부분의 데이터 표는 border-collapse: collapse를 쓰고, 빈 셀에는 "—" 같은 placeholder를 넣는다.

※ 더 흔한 실무 패턴

• 빈 셀에 — 또는 N/A 표시
• JS로 빈 td에 클래스 자동 부여 후 CSS로 스타일
• 접근성: 빈 셀이라도 의미를 명확히 하려면 sr-only 텍스트 추가

---

반응형

4 자주 하는 실수

실수	증상	해결
collapse 모드에 empty-cells	전혀 동작 안 함	border-collapse: separate로
td에   넣고 hide	"비어있지 않은" 셀로 인식	td 안 정말 비워두기
empty-cells: hide만으로 처리	접근성에 문제	의미 있는 빈 셀이면 — 또는 sr-only
표 디자인이 깔끔하지 않음	show된 빈 셀에 제목 행 줄무늬	nth-child + empty 선택자로 별도 처리

---

핵심 한 줄 요약

empty-cells빈 td의 테두리·배경 표시 여부

show (기본)빈 셀도 일반 셀처럼 그림

hide빈 셀 투명 처리

조건border-collapse: separate 필수

실무자주 안 씀 — placeholder("—") 패턴이 더 흔함

Tags

#empty-cells #show #hide #빈셀 #테이블 #table #td #border-collapse #separate #placeholder #CSS테이블 #박스모델 #시각화 #웹개발 #HTML #티스토리

▼ 티스토리 태그 입력란 복사용

empty-cells, show, hide, 빈셀, 테이블, table, td, border-collapse, separate, placeholder, CSS테이블, 박스모델, 시각화, 웹개발, HTML, 티스토리