HTML <th> 태그, 테이블 헤더를 만드는 방법

HTML <th> 태그, 테이블 헤더를 만드는 방법

HTML에서 테이블을 작성할 때, 헤더는 테이블의 의미를 명확히 하고 구조를 더욱 이해하기 쉽게 만듭니다. 이 글에서는 <th> 태그의 역할과 사용법, 스타일링 방법 등을 자세히 다뤄보겠습니다.

 

 

목차

1. <th> 태그란 무엇인가?
2. <th> 태그의 기본 문법
3. <th> 태그 활용 예제
4. <th> 태그 스타일링
5. <th> 태그와 접근성
6. 요약 및 결론

 

1. <th> 태그란 무엇인가?

HTML의 <th> 태그는 테이블의 헤더를 정의하는 데 사용됩니다. 일반적으로 <thead> 태그 안에 위치하며, 행(<tr>) 안에서 열 제목으로 사용됩니다.

브라우저는 <th> 태그를 기본적으로 굵은 글꼴과 가운데 정렬로 렌더링하여 데이터 셀(<td>)과 시각적으로 구분합니다.

 

 

2. <th> 태그의 기본 문법

<table border="1">
    <thead>
        <tr>
            <th>헤더1</th>
            <th>헤더2</th>
            <th>헤더3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>데이터1</td>
            <td>데이터2</td>
            <td>데이터3</td>
        </tr>
    </tbody>
</table>
    

 

 

3. <th> 태그 활용 예제

아래는 <th> 태그를 사용하여 테이블 헤더를 정의하는 간단한 예제입니다.

이름	나이	직업
홍길동	30	개발자
김철수	25	디자이너

 

 

 

 

4. <th> 태그 스타일링

CSS를 활용하여 <th> 태그의 스타일을 손쉽게 커스터마이징할 수 있습니다.

th {
    background-color: #f0f0f0;
    color: #333;
    font-weight: bold;
    text-align: center;
    padding: 10px;
}
    

 

 

5. <th> 태그와 접근성

접근성을 고려할 때 <th> 태그의 scope 속성을 활용하면 테이블 데이터와 헤더의 관계를 더욱 명확히 할 수 있습니다. 예를 들어, 열 헤더를 정의하려면 scope="col"을 사용하고, 행 헤더는 scope="row"를 사용합니다.

 

 

6. 요약 및 결론

<th> 태그는 테이블의 구조를 명확히 하고 데이터를 더 이해하기 쉽게 만들어줍니다. 스타일링과 접근성 요소를 활용하여 사용자 경험을 더욱 향상시킬 수 있습니다. 이 가이드를 통해 테이블 헤더를 효과적으로 작성해보세요!