TML 초보자 가이드 제5회 - 표(Table) 태그 완전정복 | HTML 튜토리얼

 

HTML 초보자 가이드 제5회

표(Table) 태그로 데이터를 깔끔하게 정리하기

목차

• 1. 표 태그란 무엇인가?
• 2. 기본 표 구조 이해하기
• 3. 주요 표 태그들
• 4. 실무 예제
• 5. 표 스타일링 기초
• 6. 고급 기능
• 7. 마무리

1. 표 태그란 무엇인가?

HTML에서 표(Table)는 데이터를 행과 열로 구조화하여 보여주는 중요한 요소입니다. 엑셀의 스프레드시트처럼 정보를 체계적으로 정리할 때 사용하며, 웹 페이지에서 가격표, 일정표, 비교표 등을 만들 때 필수적입니다.

중요! 표 태그는 레이아웃 목적이 아닌 데이터 표시 목적으로만 사용해야 합니다. 페이지 레이아웃은 CSS Grid나 Flexbox를 사용하는 것이 올바른 방법입니다.

2. 기본 표 구조 이해하기

HTML 표는 다음과 같은 계층 구조를 가집니다:

<table> <tr> <!-- 첫 번째 행 --> <td>셀 1</td> <td>셀 2</td> </tr> <tr> <!-- 두 번째 행 --> <td>셀 3</td> <td>셀 4</td> </tr> </table>

위 코드로 만든 간단한 표입니다:

셀 1	셀 2
셀 3	셀 4

3. 주요 표 태그들

3.1. 기본 태그

태그	의미	설명
<table>	표	표 전체를 감싸는 컨테이너
<tr>	행 (Table Row)	표의 가로줄 하나를 나타냄
<td>	셀 (Table Data)	표의 일반 데이터 셀
<th>	헤더 (Table Header)	표의 제목 셀 (굵게 표시됨)

3.2. 구조적 태그

<table> <thead> <!-- 표 머리 --> <tr> <th>이름</th> <th>나이</th> </tr> </thead> <tbody> <!-- 표 몸체 --> <tr> <td>김철수</td> <td>25</td> </tr> </tbody> <tfoot> <!-- 표 바닥 --> <tr> <td>총 인원</td> <td>1명</td> </tr> </tfoot> </table>

4. 실무 예제

4.1. 상품 가격표

<table> <thead> <tr> <th>상품명</th> <th>가격</th> <th>재고</th> </tr> </thead> <tbody> <tr> <td>노트북</td> <td>1,200,000원</td> <td>5개</td> </tr> <tr> <td>마우스</td> <td>30,000원</td> <td>20개</td> </tr> </tbody> </table>

상품명	가격	재고
노트북	1,200,000원	5개
마우스	30,000원	20개

4.2. 셀 병합 (colspan, rowspan)

Tip: colspan은 가로로 셀을 합치고, rowspan은 세로로 셀을 합칩니다.

<table> <tr> <th colspan="2">2024년 매출</th> </tr> <tr> <td>1분기</td> <td>1,000만원</td> </tr> <tr> <td>2분기</td> <td>1,200만원</td> </tr> </table>

2024년 매출
1분기	1,000만원
2분기	1,200만원

5. 표 스타일링 기초

CSS를 사용하여 표를 더 보기 좋게 만들 수 있습니다:

table { border-collapse: collapse; /* 테두리 겹침 제거 */ width: 100%; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; font-weight: bold; } tr:nth-child(even) { background-color: #f9f9f9; /* 짝수 행 배경색 */ }

접근성 팁: 표에는 caption 태그를 사용하여 표의 제목을 명시하고, scope 속성으로 헤더의 범위를 지정하면 스크린 리더 사용자에게 도움이 됩니다.

6. 고급 기능

6.1. 표 제목과 접근성

<table> <caption>2024년 분기별 매출 현황</caption> <thead> <tr> <th scope="col">분기</th> <th scope="col">매출액</th> </tr> </thead> <tbody> <tr> <th scope="row">1분기</th> <td>1,000만원</td> </tr> </tbody> </table>

6.2. 반응형 표 만들기

표가 화면보다 클 때는 overflow-x: auto를 사용하여 가로 스크롤을 만들거나, 작은 화면에서는 표를 세로 형태로 변경하는 기법을 사용할 수 있습니다.

7. 마무리

이번 시간에는 HTML 표 태그의 기본기부터 실무 활용법까지 알아보았습니다. 표는 데이터를 체계적으로 보여주는 강력한 도구이지만, 올바른 목적으로 사용해야 한다는 점을 꼭 기억하세요.

다음 시간 예고: 제6회에서는 폼(Form) 태그를 다루어 사용자 입력을 받는 방법을 배워보겠습니다!

실습 과제: 자신만의 시간표나 가계부를 HTML 표로 만들어 보세요. 헤더, 셀 병합, 기본 스타일링까지 적용해보면 더욱 좋습니다.

← 제4회: 목록 태그 시리즈 목록 제6회: 폼 태그 →

© 2025 HTML 초보자 튜토리얼. 모든 권리 보유.

이 글이 도움이 되셨다면 공유해주세요!