HTML Table Header | 테이블 헤더 구조 | 텍스트 정렬 | 셀병합 Collspan/ Rowspan

HTML Table Header: 테이블 헤더 구조와 활용 가이드

HTML 테이블 헤더는 데이터를 구조화하고 가독성을 높이는 핵심 요소입니다. 테이블 헤더는 데이터의 의미를 명확히 하고, 사용자에게 정보를 쉽게 전달할 수 있도록 돕습니다. 이 글에서는 HTML 테이블 헤더의 기본 구조, 텍스트 정렬, 셀 병합(colspan 및 rowspan), 그리고 테이블 제목 활용 방법을 소개합니다.

HTML 테이블 헤더 구조

HTML에서 테이블 헤더는 <thead> 태그를 사용해 정의하며, 각 헤더 셀은 <th> 태그로 감쌉니다. 기본 구조는 다음과 같습니다:

한 덩어리의 <tr> 태그는 1열을 의미하고, 여러 열을 표시하고 싶은 경우 <tr> 태그를 밑으로 차곡차곡 쌓으면 됩니다.
table header는 default 값으로, 굵은 글씨체 + 센터 위치로 맞춰지며,
header 의 위치는 <th> 를 어디에 위치 시키는가에 따라 달라집니다.

테이블 헤더 텍스트 정렬

text-align 속성을 사용해 헤더 텍스트의 정렬을 설정할 수 있습니다:

th {
    text-align: left; /* 왼쪽 정렬 */
    padding: 8px;
    background-color: #f4f4f4;
}

left: 왼쪽 정렬 (가독성 높은 데이터 테이블에 적합).
center: 중앙 정렬 (표 제목과 정렬감 강조).
right: 오른쪽 정렬 (숫자 데이터에 적합).

셀 병합: colspan과 rowspan

HTML 테이블에서는 colspan과 rowspan 속성을 사용해 셀을 병합할 수 있습니다:

가로 셀 병합은 <th> 요소 안에 colspan 속성을 사용 하면 됩니다.
세로 셀 병합은 <th> 요소 안에 rowspan 속성을 사용 하면 됩니다.

1.colspan: 열 병합

위 코드는 두 개의 열을 하나로 병합합니다.

2. rowspan: 행 병합

위 코드는 두 개의 행을 하나로 병합합니다.

테이블 제목 활용: <caption> 태그

<caption> 태그를 사용해 테이블 제목을 추가할 수 있습니다. 이 태그는 접근성과 SEO를 높이는 데 유용합니다:

전체 테이블에 제목을 달아주려면, <caption> 태그를 사용하면 됩니다.
<caption> 태그의 위치는 항상 <table> 태그 바로 밑에 와야 합니다.

실무에서 테이블 헤더 활용 팁

1. 접근성을 위한 scope 속성 scope 속성을 사용해 헤더와 데이터 셀의 관계를 명확히 정의합니다:

2. 스타일링으로 가독성 강화 CSS를 사용해 헤더와 본문의 스타일을 구분하면 데이터 테이블의 가독성이 향상됩니다:

th {
    background-color: #f4f4f4;
    font-weight: bold;
}
td {
    background-color: #ffffff;
}
tr:nth-child(even) td {
    background-color: #f9f9f9;
}

3. 반응형 디자인 적용 미디어 쿼리를 활용해 테이블 헤더를 모바일 환경에서도 보기 좋게 조정하세요:

@media (max-width: 768px) {
    table {
        font-size: 14px;
    }
}

결론

HTML 테이블 헤더는 데이터 구조화와 가독성을 높이는 중요한 역할을 합니다. 기본 구조와 속성을 이해하고, colspan 및 rowspan을 활용해 셀을 병합하거나, CSS로 스타일링해 더욱 직관적인 테이블을 디자인할 수 있습니다. 이 가이드를 통해 데이터가 돋보이는 테이블을 작성해 보세요.

저작자표시

성장의방정식

HTML Table Header | 테이블 헤더 구조 | 텍스트 정렬 | 셀병합 Collspan/ Rowspan | 테이블 제목