연습 — table + col + thead/tbody + caption-side 완전 정리

 

 

Web Development · HTML Table

연습 문제 풀이 —
table 구조 + col + thead/tbody + caption-side

표를 의미 단위로 나누고, 컬럼별 스타일을 한 번에 적용하는 패턴

시작 연습 문제 해답 코드

국민 독서실태 표를 만들면서 쓰인 4가지 핵심 요소: thead/tbody 분리, col로 첫 열만 회색, caption-side로 제목 아래로, th 사용.

table { border: 1px solid black; border-collapse: collapse; caption-side: bottom; /* 제목을 표 아래로 */ } td, th { border: 1px solid black; padding: 10px; } .heading { background: #eee; } <table> <caption>2015 국민 독서실태</caption> <col class="heading"> /* 첫 열에 회색 배경 */ <col> <col> <thead> <tr class="heading"> <th>구분</th><th>성인</th><th>학생</th> </tr> </thead> <tbody> <tr><th>독서율</th><td>65.3%</td><td>94.9%</td></tr> … </tbody> </table>

실제 출력 미리보기

2015 국민 독서실태

구분	성인	학생
독서율	65.3%	94.9%
연평균 독서량	9.1권	29.8권
공공도서관 이용률	28.2%	64.9%

※ 첫 열(독서율, 연평균 독서량…) 회색 + 제목이 표 아래로.

용어 용어 정리

thead표의 머리 영역 (제목 행)

tbody표의 본문 영역 (데이터 행)

tfoot표의 꼬리 영역 (합계 등)

col컬럼 정보 — 컬럼별 스타일을 한 번에

colgroupcol들을 묶는 부모 (선택적)

caption-sidecaption을 표의 위/아래

th제목 셀 — 행/열 헤더에 사용

scopeth가 어느 방향(row/col)의 제목인지 명시

---

1 thead / tbody / tfoot — 표 영역 분리

표를 머리·몸·꼬리로 나누면 의미가 명확해지고 CSS·인쇄·접근성에 유리하다. 큰 표는 인쇄 시 thead가 매 페이지 위에 반복되는 등 추가 효과도 있음.

<thead> <tr><th>구분</th>...</tr> </thead> <tbody> <tr><td>데이터1</td>...</tr> </tbody> <tfoot> <tr><td>합계</td>...</tr> </tfoot>

---

2 col — 컬럼 단위 스타일

col은 "이 컬럼에 이런 속성을 적용해라"는 표시. 표 안 모든 td마다 클래스를 붙이는 대신 col 한 번이면 끝.

<col class="heading"> ← 첫 열에 heading 클래스 <col> ← 둘째 열은 일반 <col> ← 셋째 열도 일반 → CSS: .heading { background: #eee } → 결과: 첫 열의 모든 셀이 자동으로 회색 배경

※ col로 가능한 것 / 불가능한 것

• 가능: background, width, visibility, border
• 불가능: padding, color(텍스트 색), font-* 등 — 셀에 적용되지 않음
• 그래서 col은 주로 너비·배경색에 사용

---

3 caption-side — 제목 위치 변경

caption은 기본적으로 표 위에 그려진다. caption-side: bottom으로 아래로 내릴 수 있다.

top (기본)

제목 → 표
일반적인 위치, 가독성 좋음

bottom

표 → 제목
출처·설명에 적합 ("표: 통계청 자료")

---

반응형

4 th로 행 헤더 만들기

흔히 th를 첫 행에만 쓰지만, 각 행의 첫 셀을 th로 만들면 그 행의 헤더 의미가 살아난다. 이 코드의 "독서율", "연평균 독서량" 등이 그렇게 쓰임.

<tr> <th scope="row">독서율</th> ← 행의 헤더 <td>65.3%</td> <td>94.9%</td> </tr>

※ scope 속성

• scope="col": 컬럼의 헤더 (위쪽 행 th)
• scope="row": 행의 헤더 (왼쪽 열 th)
• 스크린 리더가 셀을 읽을 때 어떤 헤더와 연결할지 알려줌

---

5 자주 하는 실수

실수	증상	해결
col에 padding 적용 시도	적용 안 됨	td에 직접 또는 nth-child 사용
thead·tbody 안 씀	의미 정보 부족	최소 thead, tbody 분리
모든 td를 th로	접근성 혼동	실제 헤더만 th
scope 누락	스크린 리더 동작 모호	scope="row" 또는 "col"
col을 thead 안에 둠	에러	col은 caption 다음, thead 이전 위치

---

핵심 한 줄 요약

thead/tbody/tfoot표의 머리·몸·꼬리 분리 — 의미·인쇄·CSS 활용

col컬럼별 스타일 한 번에 — width·background

caption-side제목 위/아래 위치 결정

th + scope행/열 헤더 명시 — 접근성 향상

표 작성 순서caption → col → thead → tbody → tfoot

Tags

#table #thead #tbody #tfoot #col #colgroup #caption #caption-side #scope #th #테이블구조 #시맨틱테이블 #접근성 #CSS테이블 #웹개발 #HTML #티스토리

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

table, thead, tbody, tfoot, col, colgroup, caption, caption-side, scope, th, 테이블구조, 시맨틱테이블, 접근성, CSS테이블, 웹개발, HTML, 티스토리