HTML 테이블 태그 완벽 정리

HTML 테이블 정리

1. 기본 구조

HTML 테이블은 <table> 태그를 사용하며, 그 안에 <tr>, <th>, <td> 등의 태그로 구성됩니다.

 

<table> <tr> <th>제목1</th> <th>제목2</th> </tr> <tr> <td>데이터1</td> <td>데이터2</td> </tr> </table>

• <table>: 테이블 전체를 감싸는 태그
• <tr> (table row): 행을 나타냄
• <th> (table header): 열의 제목(헤더), 기본적으로 굵게 표시되고 가운데 정렬
• <td> (table data): 일반 셀 데이터

2. 주요 태그와 속성

• border: 테이블 테두리 두께 지정 (CSS 권장)
• rowspan: 셀을 세로 방향으로 병합
• colspan: 셀을 가로 방향으로 병합
• caption: 테이블 제목 제공
• thead, tbody, tfoot: 테이블 구조를 의미적으로 나눔

3. 예시

(1) 간단한 테이블

<table>
    <tr>
        <th>이름</th>
        <th>나이</th>
        <th>직업</th>
    </tr>
    <tr>
        <td>홍길동</td>
        <td>25</td>
        <td>개발자</td>
    </tr>
    <tr>
        <td>김철수</td>
        <td>30</td>
        <td>디자이너</td>
    </tr>
</table>

(2) 행/열 병합

<table>
    <tr>
        <th rowspan="2">이름</th>
        <th colspan="2">연락처</th>
    </tr>
    <tr>
        <th>이메일</th>
        <th>전화번호</th>
    </tr>
    <tr>
        <td>홍길동</td>
        <td>hong@example.com</td>
        <td>010-1234-5678</td>
    </tr>
</table>

(3) 테이블 제목과 구조화

<table>
    <caption>학생 점수표</caption>
    <thead>
    <tr>
        <th>이름</th>
        <th>수학</th>
        <th>영어</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>홍길동</td>
        <td>90</td>
        <td>85</td>
    </tr>
    <tr>
        <td>김철수</td>
        <td>80</td>
        <td>95</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <th>평균</th>
        <td>85</td>
        <td>90</td>
    </tr>
    </tfoot>
</table>

4. CSS와 함께 사용하기

테이블 스타일은 CSS로 조절하는 것이 일반적입니다.

table {
    border-collapse: collapse; /* 테두리 겹침 제거 */
    width: 100%;
    text-align: center;
}

th, td {
    border: 1px solid #333;
    padding: 8px;
}

th {
    background-color: #f2f2f2;
}

5. 정리

• <table>은 데이터를 행과 열로 표현하는 구조적인 태그입니다.
• 기본 구성은 <tr>, <th>, <td>이고, 구조적 구분을 위해 <thead>, <tbody>, <tfoot>을 사용합니다.
• 시맨틱하게 작성하고, 디자인은 CSS로 적용하는 것이 표준적인 방법입니다.