테이블 기본 — table border + td border (이중선) 완전 정리

 

 

Web Development · HTML Table

테이블 기본 스타일 —
table border + td border

테이블과 셀 각각에 border를 줬을 때 생기는 이중선 현상

시작 오늘 분석할 코드

표 바깥쪽은 검은 실선, 셀 사이는 검은 점선으로 꾸민 코드. 이 형태에서는 표 바깥선과 셀 외곽선이 붙어 이중선처럼 보이는 점이 핵심 학습 포인트다.

.table1 { border: 1px solid black; /* 표 바깥 테두리 */ } .table1 td { border: 1px dotted black; /* 셀 테두리 (점선) */ padding: 10px; text-align: center; } <table class="table1"> <caption>프로축구 경기 일정</caption> <tr><td>울산</td><td>울산 vs 인천</td></tr> … </table>

실제 출력 미리보기 (이중선 현상)

프로축구 경기 일정

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

※ 표 바깥은 실선인데, 셀 외곽선(점선)이 그 안쪽에 살짝 떨어져서 그려진다. 이게 border-collapse 기본값(separate) 때문에 생기는 현상.

용어 용어 정리

caption표의 제목 — table 바로 아래 첫 자식

table border표 바깥 둘레 테두리

td border셀 각각의 테두리

border-collapse셀 테두리들을 합칠지(collapse) 분리할지(separate)

기본값separate — 셀들이 떨어져 있고 가운데에 빈 공간

text-align: center셀 안 텍스트 가운데 정렬

---

1 왜 이중선이 보이나?

HTML 테이블의 셀은 기본적으로 각자의 박스를 가진다. 별도 설정이 없으면 셀과 셀, 셀과 표 외곽선 사이에 약간의 빈 공간(border-spacing)이 생긴다.

기본 (border-collapse: separate): ┌───────────────────────────┐ ← table border (실선) │ ┌──┐ ┌──┐ │ │ │셀│ │셀│ ← td border (점선) │ └──┘ └──┘ │ │ ↑ 셀과 표 사이에 빈 공간 │ └───────────────────────────┘ border-collapse: collapse: ┌──┬──┐ ← 표 외곽 + 셀 외곽이 한 줄로 합쳐짐 │셀│셀│ └──┴──┘

---

반응형

2 해결법 — border-collapse: collapse

.table1 { border: 1px solid black; border-collapse: collapse; /* 추가 */ }

한 줄 추가하면 표 외곽선과 셀 외곽선이 겹쳐져서 한 줄짜리 깔끔한 격자가 된다.

---

3 caption — 표 제목

caption은 표의 의미 있는 제목이다. 시각장애인 보조 기술이 표를 읽기 전 caption을 먼저 읽어준다. 접근성에서 매우 중요하지만 자주 빠뜨리는 요소.

위치	설명
<table> 바로 아래 첫 자식	HTML 표준 위치 (필수)
caption-side: bottom	CSS로 표 아래에 배치 가능
caption은 한 표에 1개	여러 개 못 씀

---

4 자주 하는 실수

실수	증상	해결
border-collapse 누락	이중선 현상	collapse 추가
caption 누락	접근성·SEO 점수 하락	모든 의미 있는 표에 caption
th 대신 td 남발	제목 행이 의미 정보 없음	제목 행은 th
점선 1px이 안 보임	두께가 작으면 점선이 안 그려짐	2px 이상으로

---

핵심 한 줄 요약

table + td border기본 separate 모드 → 이중선처럼 보임

해결border-collapse: collapse 한 줄 추가

caption표 제목 — 접근성 필수, table 첫 자식

text-align: center셀 안 텍스트 가운데 정렬

Tags

#border #table #td #th #이중선 #border-collapse #collapse #기본테이블 #테두리 #caption #text-align #CSS테이블 #박스모델 #웹개발 #HTML #티스토리

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

border, table, td, th, 이중선, border-collapse, collapse, 기본테이블, 테두리, caption, text-align, CSS테이블, 박스모델, 웹개발, HTML, 티스토리