📊
EPISODE 04
table · thead/tbody/tfoot · colspan · rowspan
테이블
데이터를 행과 열로 구조화하는 테이블의 문법(table, thead/tbody/tfoot, tr/th/td)과 셀 병합(colspan, rowspan), 접근성을 위한 scope/caption을 익힙니다.
HTMLtablecolspanrowspan
소요 시간
⏱ 30~60분
난이도
📊 초보
선수 조건
🎯 html-03
결과물
병합 셀과 접근성을 갖춘 표 작성
이 강의에서 배우는 것
- 1thead/tbody/tfoot 구조를 이해한다
- 2tr/th/td를 적절히 사용한다
- 3colspan/rowspan으로 셀을 병합한다
- 4scope와 caption으로 접근성을 높인다
1. 테이블이란
행(row)과 열(column)로 이루어진 격자에 데이터를 정렬해 표시합니다. 엑셀 표를 HTML로 표현한다고 생각하면 됩니다.
⚠️
테이블은 데이터 표현용입니다. 페이지 레이아웃에는 절대 사용하지 마세요 — Flexbox/Grid가 올바른 도구입니다.
2. 기본 테이블 구조
html
<table>
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>직업</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>25</td>
<td>학생</td>
</tr>
<tr>
<td>김철수</td>
<td>30</td>
<td>개발자</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">총 2명</td>
</tr>
</tfoot>
</table>3. thead / tbody / tfoot
| 태그 | 역할 |
|---|---|
| <thead> | 머리글 행 — 열 제목 |
| <tbody> | 본문 데이터 행 |
| <tfoot> | 바닥글 — 합계·요약 |
4. colspan — 열 병합
html
<tr>
<td>수학</td>
<td colspan="2">영어 (2시간)</td> <!-- 가로 2칸 병합 -->
</tr>5. rowspan — 행 병합
html
<tr>
<td rowspan="2">홍길동</td> <!-- 세로 2칸 병합 -->
<td>수학</td>
<td>90</td>
</tr>
<tr>
<td>영어</td>
<td>85</td>
</tr>6. scope 속성 (접근성)
html
<th scope="col">이름</th> <!-- 열 제목 -->
<th scope="row">1반</th> <!-- 행 제목 -->스크린리더가 테이블을 올바르게 읽도록 th에 scope를 지정합니다.
7. caption — 테이블 제목
html
<table>
<caption>2026년 1분기 판매 실적</caption>
<thead>...</thead>
</table>