HTML <thead> 태그, 테이블 헤더 구조화하기

HTML <thead> 태그, 테이블 헤더 구조화하기

HTML의 <thead> 태그는 테이블 구조를 명확하게 하고, 테이블의 헤더 부분을 정의하는 데 중요한 역할을 합니다. 이 글에서는 <thead> 태그의 기본 사용법과 구조, 그리고 효과적인 활용 방안을 단계별로 설명합니다. 웹 페이지에서 접근성을 높이고 테이블의 가독성을 향상시키는 <thead> 태그의 중요성을 살펴보겠습니다.

 

 

목차

1. HTML <thead> 태그란?
2. <thead> 태그의 기본 구조
3. <thead>와 <tbody>, <tfoot>의 역할
4. <thead> 태그를 사용한 접근성 향상
5. <thead>와 스타일링: CSS 활용법
6. <thead> 태그 실전 예제

 

1. HTML <thead> 태그란?

<thead> 태그는 HTML 테이블의 헤더 부분을 정의하는 태그로, 열 제목을 그룹화하여 테이블의 구조를 명확히 보여줍니다. 일반적으로 열의 제목은 <th> 태그와 함께 사용하여 테이블의 각 열에 대한 설명을 제공하며, 테이블의 가독성을 높이는 데 큰 역할을 합니다.

 

 

2. <thead> 태그의 기본 구조

<thead> 태그는 <table> 내부에서 <tbody>와 함께 사용되며, 테이블의 가장 상단에 위치합니다. <tr> 태그로 행을 만들고 <th> 태그를 사용해 각 열의 제목을 추가하는 방식으로 구성됩니다.

예시:

<table>
    <thead>
        <tr>
            <th>이름</th>
            <th>나이</th>
            <th>직업</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>홍길동</td>
            <td>30</td>
            <td>개발자</td>
        </tr>
    </tbody>
</table>

 

 

3. <thead>와 <tbody>, <tfoot>의 역할

<thead>, <tbody>, <tfoot>는 HTML 테이블의 각기 다른 부분을 정의하는 태그로, 각각 테이블의 머리, 본문, 바닥 부분을 담당합니다. <thead>는 열 제목을 정의하여 테이블의 정보를 구조화하고, <tbody>는 실제 데이터 행을 포함하며, <tfoot>는 요약 정보나 통계를 표시할 수 있어 테이블이 복잡할 때 유용하게 활용됩니다.

 

 

4. <thead> 태그를 사용한 접근성 향상

<thead> 태그는 시각 장애인용 스크린 리더와 같은 보조 도구가 테이블의 구조를 더 잘 이해하도록 도와줍니다. 스크린 리더는 <th> 요소와 함께 사용된 scope 속성을 인식하여 테이블 헤더를 통해 열의 의미를 명확하게 전달합니다. 이러한 접근성 요소는 웹 콘텐츠 접근성 지침(WCAG)에 부합하는 중요한 요소입니다.

예시:

<thead>
    <tr>
        <th scope="col">이름</th>
        <th scope="col">나이</th>
        <th scope="col">직업</th>
    </tr>
</thead>

 

 

 

 

5. <thead>와 스타일링: CSS 활용법

<thead> 태그는 CSS를 통해 스타일링할 수 있으며, 일반적으로 테이블 헤더의 배경색, 텍스트 색상, 폰트 스타일 등을 조정해 가독성을 높입니다. <thead>를 CSS 선택자로 활용해 테이블 전체의 스타일을 통일하거나 특정 스타일을 적용할 수 있습니다.

예시:

thead {
    background-color: #f2f2f2;
    color: #333;
    font-weight: bold;
}

 

 

6. <thead> 태그 실전 예제

아래는 <thead> 태그를 포함한 전체 테이블 구조 예제입니다. 이 예제에서는 <thead>, <tbody>, <tfoot>를 모두 사용하여 테이블을 구성하고, CSS로 스타일링을 적용했습니다.

예시:

<table>
    <thead>
        <tr>
            <th>이름</th>
            <th>나이</th>
            <th>직업</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>홍길동</td>
            <td>30</td>
            <td>개발자</td>
        </tr>
        <tr>
            <td>김영희</td>
            <td>27</td>
            <td>디자이너</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">총 2명</td>
        </tr>
    </tfoot>
</table>