HTML5 Table 태그 사용법

1. Table 태그란?

Table 태그는 HTML 문서에서 표 형식의 데이터를 표현하는 데 사용됩니다. 행과 열로 구성된 데이터를 체계적으로 표시할 수 있으며, thead, tbody, tfoot, tr, th, td 등의 하위 태그를 포함합니다.

2. 주요 Table 태그 요소

• <table>: 테이블의 시작과 끝을 정의
• <thead>: 테이블의 헤더 부분을 정의
• <tbody>: 테이블의 본문 내용을 정의
• <tfoot>: 테이블의 푸터 부분을 정의
• <tr>: 테이블의 행을 정의
• <th>: 테이블의 헤더 셀을 정의
• <td>: 테이블의 데이터 셀을 정의
• <caption>: 테이블의 제목을 정의

3. 기본 구조

<table>
    <caption>테이블 제목</caption>
    <thead>
        <tr>
            <th>제목 1</th>
            <th>제목 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>데이터 1</td>
            <td>데이터 2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>합계 1</td>
            <td>합계 2</td>
        </tr>
    </tfoot>
</table>

4. 자주 사용되는 속성

5. 실제 사용 예제

기본 테이블 예제

다음은 학생 성적표를 만드는 기본적인 테이블 예제입니다. 테이블은 다음과 같은 구조로 구성됩니다:

• <caption>: 테이블의 제목을 표시
• <thead>: 테이블의 헤더 부분 (과목명 등)
• <tbody>: 테이블의 본문 내용 (학생 성적)
• <tfoot>: 테이블의 푸터 부분 (평균 점수 등)

<table class="schedule">
    <caption>학생 성적표</caption>
    <thead>
        <tr>
            <th scope="col">이름</th>      <!-- scope="col"은 이 셀이 열의 제목임을 의미 -->
            <th scope="col">국어</th>
            <th scope="col">영어</th>
            <th scope="col">수학</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>홍길동</td>    <!-- 일반 데이터 셀은 <td> 사용 -->
            <td>90</td>
            <td>85</td>
            <td>95</td>
        </tr>
        <tr>
            <td>김철수</td>
            <td>85</td>
            <td>90</td>
            <td>80</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>평균</td>
            <td>87.5</td>
            <td>87.5</td>
            <td>87.5</td>
        </tr>
    </tfoot>
</table>

실제 브라우저에서 보여지는 모양:

colspan과 rowspan 사용 예제

colspan과 rowspan은 테이블의 셀을 병합할 때 사용하는 속성입니다:

• colspan="2": 현재 셀을 오른쪽으로 2칸 확장 (가로 병합)
• rowspan="2": 현재 셀을 아래로 2칸 확장 (세로 병합)

<table class="example-table">
    <tr>
        <th rowspan="2">이름</th>  <!-- 세로로 2칸 병합 -->
        <th colspan="2">성적</th>   <!-- 가로로 2칸 병합 -->
    </tr>
    <tr>
        <th>중간고사</th>          <!-- rowspan으로 인해 이 행에는 이름 열이 없음 -->
        <th>기말고사</th>
    </tr>
    <tr>
        <td>홍길동</td>
        <td>90</td>
        <td>85</td>
    </tr>
</table>

실제 브라우저에서 보여지는 모양:

다른 예제: 복잡한 병합

<table class="example-table">
    <tr>
        <th rowspan="2">학년</th>
        <th rowspan="2">반</th>
        <th colspan="3">성적</th>
    </tr>
    <tr>
        <th>국어</th>
        <th>영어</th>
        <th>수학</th>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>90</td>
        <td>85</td>
        <td>95</td>
    </tr>
</table>

6. 스타일링 예제

테이블의 가독성과 디자인을 개선하기 위한 CSS 스타일링 예제입니다. 각 스타일의 역할과 효과를 설명합니다:

기본 스타일링

<style>
    /* 테이블 전체 스타일 */
    table {
        width: 100%;              /* 테이블 너비를 100%로 설정 */
        border-collapse: collapse; /* 셀 테두리를 하나로 합침 */
        margin: 20px 0;           /* 위아래 여백 설정 */
        font-family: 'Noto Sans KR', sans-serif; /* 한글 폰트 설정 */
    }
    
    /* 테이블 셀 공통 스타일 */
    th, td {
        padding: 12px;            /* 셀 내부 여백 */
        text-align: left;         /* 텍스트 왼쪽 정렬 */
        border: 1px solid #ddd;   /* 테두리 스타일 */
    }
    
    /* 테이블 헤더 스타일 */
    th {
        background-color: #f5f5f5; /* 배경색 설정 */
        font-weight: bold;        /* 글자 굵게 */
        text-align: center;       /* 헤더 텍스트 가운데 정렬 */
    }
    
    /* 짝수 행 배경색 설정 */
    tbody tr:nth-child(even) {
        background-color: #f9f9f9;
    }
    
    /* 마우스 오버 효과 */
    tbody tr:hover {
        background-color: #f0f0f0;
        transition: background-color 0.3s ease; /* 부드러운 색상 변화 */
    }
    
    /* 테이블 제목 스타일 */
    caption {
        font-size: 1.2em;         /* 글자 크기 */
        font-weight: bold;        /* 글자 굵게 */
        margin-bottom: 10px;      /* 아래 여백 */
        text-align: left;         /* 왼쪽 정렬 */
        color: #333;              /* 글자 색상 */
    }
</style>

기본 스타일링 적용 예시:

반응형 테이블 스타일링

<style>
    /* 모바일 환경에서 테이블 가로 스크롤 */
    .table-responsive {
        overflow-x: auto;         /* 가로 스크롤 생성 */
        -webkit-overflow-scrolling: touch; /* iOS에서 부드러운 스크롤 */
    }

    /* 테이블 셀 내용이 길 때 처리 */
    td {
        max-width: 200px;         /* 최대 너비 제한 */
        overflow: hidden;         /* 넘치는 내용 숨김 */
        text-overflow: ellipsis;  /* 말줄임표 표시 */
        white-space: nowrap;      /* 줄바꿈 방지 */
    }
    
    /* 모바일 화면에서의 테이블 스타일 */
    @media screen and (max-width: 600px) {
        table {
            display: block;       /* 테이블을 블록 요소로 변경 */
            overflow-x: auto;     /* 가로 스크롤 생성 */
        }
        
        th, td {
            min-width: 100px;     /* 최소 너비 설정 */
            padding: 8px;         /* 패딩 줄임 */
        }
    }
</style>