HTML 테이블 caption — 표에 제목 붙이기 완전 정리

 

 

Web Development · HTML Table

HTML 테이블에 제목 붙이기 —
caption · strong · b 태그 완전 정리

표 위에 제목 붙이는 정석과 강조 태그의 의미 차이

시작 오늘 분석할 코드

앞서 만든 기본 테이블에 caption(표 제목)을 추가한 코드다. 표 위쪽에 큰 제목과 부연 설명을 붙이는 표준 방법을 다룬다.

<style> table, th, td { border: 1px solid #ccc; } td, th { padding: 10px; } </style> <table> <caption> <strong>Modern Browser</strong> <p>국내에서 자주 사용하는 모던 브라우저</p> </caption> <tr> <th>브라우저</th> <th>제조업체</th> <th>다운로드</th> </tr> <tr> <th>크롬(Chrome)</th> <td>Google</td> <td>https://www.google.com/chrome/</td> </tr> ... </table>

실제 출력 결과

Modern Browser

국내에서 자주 사용하는 모던 브라우저

브라우저	제조업체	다운로드
크롬(Chrome)	Google	https://www.google.com/chrome/
파이어폭스(Firefox)	Mozilla	https://www.mozilla.org/ko/firefox/
엣지(Edge)	Microsoft	https://www.microsoft.com/ko-kr/windows/microsoft-edge

용어 용어 정리

caption표의 제목·설명을 다는 태그

strong의미상 강조 (자동 굵게)

b시각적 강조만 (자동 굵게)

em의미상 강조 (자동 기울임)

i시각적 기울임만

th, td 묶기셀렉터 콤마로 같은 padding 적용

---

1 <caption> — 표의 제목

caption은 어디에 들어가야 하는가?

<caption>은 반드시 <table>의 첫 번째 자식이어야 한다. <tr>이나 다른 태그 뒤에 놓으면 정상 동작하지 않거나 브라우저가 무시한다.

✓ 올바른 위치 <table> <caption>...</caption> ← 가장 위! <tr> ... </tr> </table> ✗ 잘못된 위치 <table> <tr> ... </tr> <caption>...</caption> ← 제대로 안 보임 </table>

caption은 화면에 어떻게 표시되는가?

기본적으로 표 위쪽에 가운데 정렬로 표시된다. 별도 스타일을 주지 않아도 굵게 표시되거나 크게 보이지는 않지만 브라우저가 자동으로 표와 묶어서 인식한다.

※ 왜 굳이 caption을 쓰는가?

• 표 위에 그냥 <h3>나 <p>를 써도 시각적으로 비슷하게 보임
• 하지만 스크린 리더는 <caption>을 "이 표의 제목"으로 인식해서 함께 읽어줌
• 접근성 + SEO 점수에서 차이가 큼
• 표가 페이지에 여러 개일 때 각 표를 구분하는 라벨 역할

---

2 caption 안에 다른 태그를 넣을 수 있는가?

이 코드처럼 <caption> 안에 <strong>과 <p>를 넣어 제목 + 부연 설명 구조를 만들 수 있다. 단순 텍스트만 넣어도 되고, 인라인/블록 태그도 넣을 수 있다.

<caption> <strong>Modern Browser</strong> ← 큰 제목 (자동 굵게) <p>국내에서 자주 사용하는 모던 브라우저</p> ← 부연 설명 </caption>

---

3 <strong> vs <b> — 똑같이 굵은데 왜 둘 다 있나?

시각적으로는 같지만 의미가 다르다

두 태그 모두 화면에는 굵은 글씨로 표시된다. 그래서 처음 보면 "왜 두 개씩이나 있지?" 싶다. 차이는 의미(semantic)에 있다.

<strong> — 의미상 중요

• "이 부분은 중요하다"
• 스크린 리더가 강세를 넣어 읽음
• 검색엔진이 가중치 부여
• 대부분의 강조에 사용

<b> — 단순 시각 강조

• "굵게만 보이게 해줘"
• 의미적 가중치 없음
• 책 제목·키워드 등에 사용
• 접근성 효과 없음

※ 헷갈리면 <strong>을 쓰는 게 안전하다. 의미와 시각 둘 다 챙김. <b>는 "정말로 의미는 없고 굵게만"인 경우에만.

태그	시각	의미	스크린 리더
<strong>	굵게	중요	강세 넣어 읽음
<b>	굵게	없음	일반적으로 읽음
<em>	기울임	강조	강세 넣어 읽음
<i>	기울임	없음	일반적으로 읽음

---

4 td, th 묶기 — 이전 코드와의 차이

이번 CSS는 td { padding: 10px; }가 아니라 td, th { padding: 10px; }로 바뀌었다. 작은 차이지만 결과는 크다.

td만 적용 (이전)

td { padding: 5px; }

→ 제목 셀(th)은 여백 없어 빡빡
→ 데이터 셀(td)만 숨통 트임
→ 행 높이가 들쭉날쭉

td, th 둘 다 (이번)

td, th { padding: 10px; }

→ 모든 셀에 동일 여백
→ 행 높이 일정
→ 깔끔한 격자

※ 이번 코드는 padding이 5px → 10px로도 늘어났다. 셀 안 글자가 더 넉넉하게 보이게 하려는 의도다.

---

반응형

5 첫 번째 열도 <th>인 이유

이번 표를 자세히 보면 맨 위 행도 <th>고, 맨 왼쪽 열도 <th>다. 왜 그럴까?

┌──────────┬──────────┬──────────┐ │ 브라우저 │ 제조업체 │ 다운로드 │ ← <th> (열 제목) ├──────────┼──────────┼──────────┤ │ 크롬 │ Google │ ... │ │ ↑ <th> │ ↑ <td> │ ↑ <td> │ │ (행 제목) │ │ │ └──────────┴──────────┴──────────┘

"크롬(Chrome)" 같은 브라우저 이름은 그 행 전체가 무엇에 대한 정보인지를 가리키는 라벨이라서 의미상 제목 셀이다. 그래서 <th>를 쓰는 것이 표준적이다.

※ th 사용 패턴

• 맨 위 행만 th: 일반적인 데이터 표
• 맨 위 행 + 맨 왼쪽 열 둘 다 th: 행과 열에 의미가 있는 표 (이번 코드)
• 왼쪽 열에만 th: "항목명 - 값" 구조의 정보 표

---

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

1

<table> 진입표 영역 시작

2

<caption> 처리표 위쪽 가운데에 제목 영역 그림 → 안에 strong 굵게, p 줄바꿈

3

첫 <tr> — 헤더 행th 3개를 굵게 가운데 정렬로 그림

4

이후 <tr> — 데이터 행각 행: th(브라우저명) + td(제조사) + td(URL)

5

모든 셀에 padding 10pxth도 td도 같은 안쪽 여백 → 행 높이 일정

6

</table>표 종료. caption + 4행 × 3열 완성

---

7 자주 하는 실수

실수	증상	해결
caption을 tr 뒤에 둠	제목이 안 보이거나 이상한 위치	table 바로 아래 첫 줄에 배치
th 대신 모두 td 사용	접근성 ↓, 시각도 평이	제목 의미 셀은 th 사용
caption 자리에 h3·div 사용	표와 묶인 라벨로 인식 안됨	표 제목은 caption
strong을 디자인 용도로 남발	의미가 흐려져 SEO 약화	정말 중요한 부분에만
td만 padding 적용	th 행만 빡빡해 보임	td, th 묶어 적용

---

핵심 한 줄 요약

<caption>표의 제목 — table의 첫 자식이어야 함

<strong>의미상 중요 + 자동 굵게

<b>단순 굵게만 (의미 없음)

<em> / <i>기울임 의미 / 단순 기울임

행 라벨도 th크롬·Firefox 등 행 제목 셀에도 th

td, th 묶기모든 셀에 같은 padding 주려면 콤마

접근성caption + th로 표 구조를 의미적으로 명시