[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에도 도움