테이블 — border-collapse:separate + border-spacing 완전 정리

 

 

Web Development · HTML Table

테이블 — border-collapse:separate +
border-spacing으로 셀 간격 만들기

셀들을 일부러 떨어뜨려서 카드처럼 보이게 만드는 표

시작 오늘 분석할 코드

데이터 표의 표준은 collapse지만, 일부러 셀들을 띄워서 카드처럼 보이는 디자인 표가 필요할 때가 있다. 이때 separate와 border-spacing을 함께 쓴다.

.table1 { border: 1px solid black; border-collapse: separate; border-spacing: 20px 10px; /* 가로 20 / 세로 10 */ } .table2 { border-collapse: separate; border-spacing: 20px 10px; /* table 외곽선 없음 → 셀들만 떨어진 카드 형태 */ } td { border: 1px solid black; padding: 10px; text-align: center; }

실제 출력 미리보기

.table1 — 표 외곽선 + 셀 외곽선 + 간격:

프로축구 경기 일정

울산	울산 vs 인천
부산	부산 vs 대전
서울	서울 vs 강원

.table2 — 표 외곽선 없이, 셀들이 떨어진 카드 형태:

프로축구 경기 일정

울산	울산 vs 인천
부산	부산 vs 대전
서울	서울 vs 강원

용어 용어 정리

border-spacingseparate일 때만 동작 — 셀 사이 간격

한 값가로·세로 모두 같은 간격

두 값첫 값 가로, 둘째 값 세로

collapse와 동시 사용불가 — collapse면 spacing 무시

셀 카드 디자인표 외곽선 빼고 spacing 늘리면 카드처럼 보임

---

1 border-spacing 값 해석

border-spacing은 한 값 또는 두 값으로 적는다.

border-spacing: 10px → 가로 10, 세로 10 border-spacing: 20px 10px → 가로 20, 세로 10 ─┬─ ─┬─ │ └─ 행과 행 사이 (세로) └─ 셀과 셀 사이 (가로)

---

2 collapse vs separate 언제 무엇을?

collapse

• 일반 데이터 표 (가격표, 기록표)
• 셀 사이 간격 0, 한 줄짜리 격자
• border-spacing 무시

separate + spacing

• 카드 그리드 같은 디자인 표
• 셀들이 떨어져 있는 시각
• border-radius 사용 가능

※ 셀에 border-radius 주려면

• collapse 모드에서는 border-radius가 깨짐
• separate + spacing 조합으로 셀마다 둥근 모서리 가능
• 각 td에 border-radius: 6px 추가

반응형

---

3 자주 하는 실수

실수	증상	해결
collapse + border-spacing	spacing 적용 안 됨	둘 중 하나만 (보통 collapse 빼고 separate)
spacing 너무 큼	표가 흩어져 보임	5~15px 권장
표 외곽 + 큰 spacing	외곽선 안에 셀 그룹이 떠 있는 어색함	외곽 빼거나 spacing 줄이기
모든 표에 separate 적용	일반 데이터 표가 답답해 보임	데이터 표는 collapse, 디자인은 separate

---

핵심 한 줄 요약

separate셀 분리 모드 — border-spacing과 짝

border-spacing셀 사이 간격 — 한 값 또는 가로/세로 두 값

vs collapsecollapse면 spacing 무시

활용카드 그리드, 디자인 표, border-radius 표

데이터는 collapse일반 표는 collapse가 표준

Tags

#border-spacing #border-collapse #separate #테이블 #table #td #셀간격 #카드그리드 #디자인표 #CSS테이블 #border-radius #박스모델 #웹개발 #HTML #티스토리

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

border-spacing, border-collapse, separate, 테이블, table, td, 셀간격, 카드그리드, 디자인표, CSS테이블, border-radius, 박스모델, 웹개발, HTML, 티스토리