💡 퀵 접속: htm.kr/table

HTML5 Table 태그 사용법

1. Table 태그란?

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

2. 주요 Table 태그 요소

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

3. 기본 구조

Table 태그의 기본 사용법

<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. 자주 사용되는 속성

태그 속성 설명 예시
table border 테이블 테두리 <table border="1">
td/th colspan 열 병합 <td colspan="2">
td/th rowspan 행 병합 <td rowspan="2">
th scope th 요소의 범위 지정 (col, row, colgroup, rowgroup) <th scope="col">

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>

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

학생 성적표
이름 국어 영어 수학
홍길동 90 85 95
김철수 85 90 80
평균 87.5 87.5 87.5

💡 기본 테이블 작성 시 주의사항

  • <thead>, <tbody>, <tfoot>는 테이블의 구조를 명확히 하기 위해 사용합니다.
  • scope="col"은 해당 셀이 열의 제목임을 브라우저에 알려줍니다 (접근성 향상).
  • 숫자 데이터는 가운데 정렬하는 것이 가독성이 좋습니다.
  • 테이블 푸터는 평균, 합계 등 요약 정보를 표시하는 데 적합합니다.
  • 테이블에 적절한 여백과 테두리를 주어 가독성을 높입니다.

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>

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

이름 성적
중간고사 기말고사
홍길동 90 85

💡 colspan과 rowspan 사용 시 주의사항

  • 병합된 셀의 수만큼 다음 행이나 열의 셀 수가 줄어듭니다.
  • 예를 들어, 첫 번째 행에서 colspan="2"를 사용하면, 그 행의 나머지 셀은 한 칸씩 오른쪽으로 밀립니다.
  • rowspan="2"를 사용하면, 다음 행의 해당 열은 자동으로 건너뛰게 됩니다.
  • 병합은 항상 왼쪽에서 오른쪽으로, 위에서 아래로 진행됩니다.

다른 예제: 복잡한 병합

<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>
학년 반 성적
국어 영어 수학
1 1 90 85 95

💡 복잡한 병합 시 팁

  • 테이블 구조를 먼저 종이에 그려보면 이해하기 쉽습니다.
  • 병합할 셀의 수를 정확히 계산해야 합니다.
  • rowspan과 colspan을 동시에 사용할 때는 주의가 필요합니다.
  • 접근성을 위해 병합된 셀에는 적절한 scope 속성을 사용하는 것이 좋습니다.

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>

기본 스타일링 적용 예시:

학생 성적표
이름 국어 영어 수학
홍길동 90 85 95
김철수 85 90 80

반응형 테이블 스타일링

<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>

💡 스타일링 팁

  • 가독성 향상: 적절한 여백과 테두리로 내용을 구분하기 쉽게 만듭니다.
  • 시각적 계층: 헤더와 본문의 배경색을 다르게 하여 정보의 계층을 표현합니다.
  • 반응형 디자인: 모바일 환경에서는 가로 스크롤을 사용하여 모든 내용을 볼 수 있게 합니다.
  • 접근성: 충분한 색상 대비와 여백으로 가독성을 확보합니다.
  • 성능 최적화: 불필요한 스타일은 제거하고, 효율적인 선택자를 사용합니다.