HTML 테이블 구조 — thead · tbody · tfoot 완전 정리

 

 

Web Development · HTML Table

HTML 테이블 구조 분리 —
thead · tbody · tfoot 완전 정리

표를 머리·몸통·발 세 영역으로 나누는 표준 방식과 width 제어

시작 오늘 분석할 코드

표를 3개 영역(머리·몸통·발)으로 명확히 구분하는 코드다. 데이터가 많은 통계표나 합계가 있는 표에서 표준이 되는 구조다.

<style> table, th, td { border: 1px solid #ccc; } th, td { width: 80px; padding: 10px; } thead, tfoot { background: #eeeeee; } </style> <table> <caption>제주특별자치도 학교현황(2015.4.1 기준)</caption> <thead> <tr> <th>구분</th> <th>학교수</th> <th>학급수</th> <th>학생수</th> <th>교원수</th> </tr> </thead> <tbody> <tr> <th>유치원</th> <td>117</td> ... </tr> ... </tbody> <tfoot> <tr> <th>합계</th> <td>300</td> ... </tr> </tfoot> </table>

실제 출력 결과

제주특별자치도 학교현황(2015.4.1 기준)

구분	학교수	학급수	학생수	교원수
유치원	117	252	5,547	474
초등학교	111	1,720	37,686	2,632
중학교	44	699	21,274	1,412
고등학교	29	676	22,019	1,433
특수학교	3	90	428	160
합계	300	3,437	86,954	6,111

용어 용어 정리

theadTable Head — 표의 머리(필드명)

tbodyTable Body — 표의 몸통(데이터)

tfootTable Foot — 표의 발(합계 등)

width셀의 가로 크기

background배경색 지정

caption표의 제목 (table 첫 자식)

---

1 표를 왜 3등분하는가?

머리 · 몸통 · 발의 의미

표 안에 데이터가 많아지면 "이게 제목인가, 데이터인가, 합계인가" 구분이 어려워진다. <thead> · <tbody> · <tfoot>는 표의 영역을 명시적으로 나누는 표준 구조다.

<thead> — 머리

↓ 필드명 (구분, 학교수, 학급수...)

<tbody> — 몸통

↓ 실제 데이터 (유치원, 초등학교...)

<tfoot> — 발

영역	들어가는 내용	예시
<thead>	필드명·열 제목	구분 / 학교수 / 학급수 ...
<tbody>	실제 데이터 행들	유치원 117 252 ... / 초등학교 111 ...
<tfoot>	합계·요약·통계 결과	합계 300 3,437 ...

---

2 왜 굳이 나누는가? — 4가지 이점

이점	설명
의미 전달	스크린 리더가 "여긴 머리, 여긴 몸통"으로 구분해 읽음
스타일 분리	thead, tfoot 묶어 한 번에 배경색 지정 가능
인쇄 시 머리 반복	여러 페이지로 인쇄될 때 thead가 매 페이지 위쪽에 자동 반복
스크롤 고정	긴 표를 만들 때 thead만 고정(sticky)하기 쉬움

※ 짧은 2~3행짜리 단순 표는 thead/tbody 안 써도 되지만, 5행 이상 데이터 표나 합계가 있는 표는 거의 항상 분리하는 게 정석.

---

3 thead, tfoot { background: #eeeeee }

콤마 셀렉터로 두 영역에 한 번에

표의 위쪽(머리)과 아래쪽(발)에만 회색 배경을 줘서 데이터 영역과 시각적으로 구분한다. 이게 가능한 이유는 thead·tfoot가 별도 태그로 묶여 있기 때문이다. tbody는 자동으로 흰색이 유지된다.

┌──────────────────────┐ │ 구분 │ 학교수 │ 학급수 │ ← 회색 (thead) ├──────────────────────┤ │ 유치원 │ 117 │ 252 │ │ 초등학교│ 111 │ 1,720 │ ← 흰색 (tbody) │ 중학교 │ 44 │ 699 │ ├──────────────────────┤ │ 합계 │ 300 │ 3,437 │ ← 회색 (tfoot) └──────────────────────┘

분리 안 함 (어려움)

머리·발 행에 일일이 클래스 부여
tr.header { ... }
tr.summary { ... }
→ 행마다 class 추가 필요

분리함 (쉬움)

영역 단위로 한 줄에 끝
thead, tfoot { ... }

→ 새 행 추가해도 자동 적용

---

4 width: 80px — 셀 너비 제어

왜 셀 너비를 정해주는가?

width가 없으면 셀 안의 내용 길이에 따라 가로 크기가 들쭉날쭉해진다. <th>는 짧고 <td>는 긴 숫자이면 줄이 어긋나 보인다. th, td { width: 80px; }로 모든 셀을 같은 폭으로 만들면 깔끔한 격자가 된다.

※ 셀 width를 합한 값보다 표 안 내용이 더 길면 자동으로 늘어난다. width는 "최소 권장치"에 가깝다.

※ 실무 width 패턴

• 고정 폭: width: 80px; — 정확한 크기 (이번 코드)
• 유연한 폭: width: 25%; — 표 전체 폭의 비율
• 자동: width 안 줌 — 내용 길이에 맞춰 자동 조절

---

반응형

5 tfoot 위치의 흥미로운 사실

HTML 코드상에서는 <tfoot>이 항상 tbody 뒤에 와야 한다. 그런데 화면에 표시되는 위치도 자연히 맨 아래다. 둘이 같다면 왜 명시적으로 영역을 나눌까?

코드 순서: thead → tbody → tfoot 화면 순서: 머리 → 몸통 → 발 (자연 순서) 인쇄 시: 머리 → (몸통 분할) → 발 (각 페이지 머리 자동 반복)

※ 옛 HTML4에서는 tfoot을 tbody 앞에 둘 수 있었으나 표시는 아래 — 코드와 화면이 달라 혼란. HTML5는 자연 순서로 통일했다.

---

6 콤마(쉼표) 사용법 — 숫자 표기

이번 코드에는 숫자에 쉼표가 들어가 있다 (37,686 / 86,954). 단순 텍스트지만 숫자 표시 관행이다.

표기	의미	예시
1,000자리 콤마	천 단위 구분	37,686 → 3만 7천
콤마 없음	코드·ID 등	학번 20240001

※ HTML 표 안에서는 직접 숫자를 적지만, 실제 웹 앱에서는 JavaScript의 toLocaleString()이나 PHP의 number_format()으로 자동 변환하는 것이 일반적이다.

---

7 브라우저가 표를 그리는 흐름

1

<style> 분석th·td는 80px 너비 + 10px 패딩, thead·tfoot는 회색 배경

2

<caption> 그리기표 위에 "제주특별자치도 학교현황..." 표시

3

<thead> 영역 진입회색 배경 적용 → 5개 th 한 줄 (구분/학교수/학급수/학생수/교원수)

4

<tbody> 영역 진입흰색 유지 → 5개 행 그리기 (유치원~특수학교)

5

각 행 내부학교 종류는 th(행 라벨), 숫자는 td → 모두 너비 80px, 패딩 10px

6

<tfoot> 영역 진입회색 배경 적용 → 합계 행 1개 (합계/300/3,437/86,954/6,111)

7

</table>표 종료. 머리(회색) - 몸통(흰색) - 발(회색) 시각적으로 구분 완성

---

8 자주 하는 실수

실수	증상	해결
tfoot을 tbody 앞에 둠	구형 브라우저에서 위치 꼬임	HTML5 표준: thead → tbody → tfoot
thead 안에 td 사용	의미 부정확, 디자인도 어색	thead 안은 th로
tbody 생략	브라우저가 자동 추가하지만 명시 권장	tbody 명시
thead·tfoot가 여러 개	HTML 검증 오류	각 1개씩만 (tbody는 여러 개 가능)
합계 행을 그냥 tr로	의미상 합계인지 데이터인지 불분명	합계는 tfoot로 묶기
caption 안에 caption	오류	caption은 한 표에 1개만

---

9 진화 과정 — 4단계 비교

이번 시리즈에서 만든 표들이 어떻게 발전했는지 한눈에.

단계	추가된 것	이점
basic.html	기본 HTML 골격	문서 구조 시작
table-1	table·tr·th·td + 테두리	기본 격자 표
table-3	caption·strong	제목 라벨로 의미 명확
table-6 (지금)	thead·tbody·tfoot·width	대용량 통계표 표준 구조

---

핵심 한 줄 요약

<thead>표의 머리 — 필드명·열 제목

<tbody>표의 몸통 — 실제 데이터

<tfoot>표의 발 — 합계·요약

코드 순서thead → tbody → tfoot (HTML5)

thead, tfoot콤마 셀렉터로 한 번에 같은 스타일

width셀 너비 통일 — 격자가 깔끔

행 라벨도 th유치원·초등학교 등 행 제목도 th

접근성영역 분리 → 스크린 리더가 구조 인식

인쇄 시thead가 매 페이지 자동 반복