[HTML 테이블(Table)] #03 caption, colgroup 태그 완벽 정리 — 표 제목과 열 스타일 쉽게 이해하기
안녕하세요 토스트데브입니다 😊
이번 시간에는 HTML 테이블에서 자주 사용되지만 초보자분들이 놓치기 쉬운
<caption> 태그와 <colgroup> 태그에 대해 알아보겠습니다!
테이블을 만들다 보면:
- "표 제목은 어떻게 넣지?"
- "특정 열만 색상을 바꿀 수 없을까?"
- "열 너비를 한 번에 지정하고 싶은데?"
이런 고민이 생기는데요 😄
바로 이때 사용하는 것이 오늘 배울 <caption> 과 <colgroup> 입니다!
📌 오늘 배울 핵심 요약
| 태그 | 역할 |
| <caption> | 테이블 제목 표시 |
| <colgroup> | 열(column) 그룹 설정 |
| <col> | 특정 열 스타일 지정 |
✅ 테이블 접근성과 가독성을 높일 수 있음
✅ 유지보수가 쉬워짐
✅ 실무에서도 자주 사용됨
📌 1. <caption> 태그란?
<caption> 태그는 테이블의 제목을 표시하는 태그입니다.
쉽게 말하면:
"이 표가 어떤 표인지 설명하는 이름표"
라고 생각하시면 됩니다 😊
✅ 기본 구조
<table>
<caption>회원 목록</caption>
<tr>
<th>이름</th>
<th>나이</th>
</tr>
<tr>
<td>홍길동</td>
<td>30</td>
</tr>
</table>
📌 실행 결과
회원목록
| 이름 | 나이 |
| 홍길동 | 30 |
📌 왜 중요한가요?
<caption> 은 단순 제목이 아닙니다!
특히:
- 웹 접근성
- SEO
- 스크린리더
에서 굉장히 중요합니다.
검색엔진도 테이블 내용을 이해할 때 도움을 받을 수 있습니다 👍
📌 실무에서 자주 하는 실수
❌ 잘못된 예시
<h3>회원 목록</h3>
<table>
</table>이렇게 작성하면 제목은 보이지만 실제 테이블과 연결되지 않습니다.
✅ 올바른 예시
<table>
<caption>회원 목록</caption>
</table>테이블 내부에서 제목을 지정해야 합니다.
📌 2. <colgroup> 태그란?
이번에는 조금 더 실무적인 태그입니다 😎
<colgroup> 은:
테이블의 "열(column)"을 그룹화하는 태그
입니다.
쉽게 말하면:
- 첫 번째 열 스타일
- 두 번째 열 너비
- 특정 열 배경색
등을 한 번에 설정할 수 있습니다.
📌 기본 구조
<table>
<colgroup>
<col style="background-color: #f5f5f5;">
<col style="width: 200px;">
</colgroup>
<tr>
<th>이름</th>
<th>직업</th>
</tr>
<tr>
<td>홍길동</td>
<td>개발자</td>
</tr>
</table>📌 결과 설명
✅ 첫 번째 열 배경색 변경
✅ 두 번째 열 너비 지정
이렇게 열 단위로 스타일을 적용할 수 있습니다.
📌 <col> 태그는 무엇인가요?
<colgroup> 안에는
<col> 태그를 넣습니다.
열 개수만큼 작성할 수 있습니다.
✅ 예시
<colgroup>
<col style="background-color: #eee;">
<col style="background-color: #fff;">
<col style="background-color: #f0f0f0;">
</colgroup>
📌 실무에서 많이 사용하는 패턴
✅ 관리자 페이지 테이블
<table>
<colgroup>
<col style="width: 20%;">
<col style="width: 80%;">
</colgroup>
<tr>
<th>제목</th>
<td>공지사항입니다.</td>
</tr>
</table>
📌 왜 많이 사용할까?
실무에서는:
- 게시판
- 주문관리
- 회원관리
- 관리자 페이지
같은 테이블 UI가 엄청 많습니다.
이때 td마다 width를 넣는 것보다 colgroup 으로 관리하는 것이 훨씬 깔끔합니다 👍
📌 초보자가 자주 하는 실수
❌ colgroup 위치 오류
잘못된 코드:
<table>
<tr></tr>
<colgroup></colgroup>
</table>✅ 올바른 위치
<table>
<colgroup></colgroup>
<tr></tr>
</table>colgroup 은 반드시 행(tr)보다 먼저 와야 합니다!
📌 실무 꿀팁 💡
✅ width 관리할 때 강력 추천
<colgroup>
<col style="width:100px;">
<col style="width:auto;">
</colgroup>이렇게 하면:
- 첫 번째 열 고정
- 나머지 자동 확장
패턴을 쉽게 만들 수 있습니다.
관리자 페이지에서 정말 많이 사용합니다 😎
📌 접근성(SEO) 관점에서도 중요!
특히 <caption> 은:
- 검색엔진
- 스크린리더
- 웹 접근성 평가
에서 매우 중요합니다.
요즘은 단순 디자인보다 접근성도 중요한 평가 요소입니다 👍
📌 최종 정리
| 태그 | 설명 |
| <caption> | 테이블 제목 |
| <colgroup> | 열 그룹 설정 |
| <col> | 열 스타일 지정 |
✅ 테이블 가독성 향상
✅ 유지보수 편리
✅ 관리자 페이지 실무 활용도 높음
✅ 접근성과 SEO에도 도움