HTML table 요소의 다양한 예제와 활용법

HTML의 table 요소는 데이터를 행과 열로 정리해서 표시하는 데 사용됩니다. 데이터 시각화, 보고서, 통계 정보 등을 효율적으로 표현할 수 있어 웹 개발에서 자주 활용됩니다. 이번 글에서는 table 요소의 구조와 다양한 예제를 상세하게 설명합니다.

---

1. HTML table의 기본 구조

HTML에서 table 요소를 구성하는 주요 태그는 다음과 같습니다:

• <table>: 테이블의 시작과 끝을 정의합니다.
• <tr>: 테이블의 행(Row)을 정의합니다.
• <th>: 테이블의 헤더 셀(Header Cell)을 정의합니다.
• <td>: 테이블의 데이터 셀(Data Cell)을 정의합니다.

기본 테이블 예제

<table>
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>직업</th>
  </tr>
  <tr>
    <td>김철수</td>
    <td>30</td>
    <td>개발자</td>
  </tr>
  <tr>
    <td>이영희</td>
    <td>28</td>
    <td>디자이너</td>
  </tr>
</table>

출력 결과는 다음과 같이 나타납니다:

이름 나이 직업

김철수	30	개발자
이영희	28	디자이너

---

2. table 스타일링

기본 HTML 테이블은 스타일이 적용되지 않아 투박해 보입니다. CSS를 사용해 테이블에 디자인을 추가할 수 있습니다.

예제: 테이블 스타일링

<table class="styled-table">
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>직업</th>
  </tr>
  <tr>
    <td>김철수</td>
    <td>30</td>
    <td>개발자</td>
  </tr>
  <tr>
    <td>이영희</td>
    <td>28</td>
    <td>디자이너</td>
  </tr>
</table>

.styled-table {
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 18px;
  text-align: left;
  width: 100%;
  border: 1px solid #ddd;
}
.styled-table th, .styled-table td {
  border: 1px solid #ddd;
  padding: 8px;
}
.styled-table th {
  background-color: #f4f4f4;
}
.styled-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

결과

이름 나이 직업

김철수	30	개발자
이영희	28	디자이너

---

3. 테이블 병합

테이블에서 셀 병합은 다음과 같이 구현됩니다:

• rowspan: 셀을 행(Row) 방향으로 병합합니다.
• colspan: 셀을 열(Column) 방향으로 병합합니다.

예제: 셀 병합

<table border="1">
  <tr>
    <th rowspan="2">이름</th>
    <th colspan="2">연락처</th>
  </tr>
  <tr>
    <th>전화번호</th>
    <th>이메일</th>
  </tr>
  <tr>
    <td>김철수</td>
    <td>010-1234-5678</td>
    <td>chulsoo@example.com</td>
  </tr>
  <tr>
    <td>이영희</td>
    <td>010-9876-5432</td>
    <td>younghee@example.com</td>
  </tr>
</table>

결과

이름 전화번호 이메일

김철수	010-1234-5678	chulsoo@example.com
이영희	010-9876-5432	younghee@example.com

---

4. 테이블 헤더와 풋터

테이블은 다음과 같은 섹션으로 구분할 수 있습니다:

• <thead>: 테이블의 헤더 부분
• <tbody>: 테이블의 본문 데이터
• <tfoot>: 테이블의 요약 또는 풋터

예제: 헤더와 풋터 사용

<table border="1">
  <thead>
    <tr>
      <th>상품명</th>
      <th>수량</th>
      <th>가격</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>노트북</td>
      <td>2</td>
      <td>1,500,000원</td>
    </tr>
    <tr>
      <td>키보드</td>
      <td>1</td>
      <td>50,000원</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">합계</td>
      <td>1,550,000원</td>
    </tr>
  </tfoot>
</table>

결과

상품명 수량 가격

노트북	2	1,500,000원
키보드	1	50,000원
합계		1,550,000원

---

5. 반응형 테이블

작은 화면에서도 테이블이 잘 보이도록 반응형 스타일을 추가할 수 있습니다.

예제: 반응형 테이블

<div class="table-container">
  <table border="1">
    <thead>
      <tr>
        <th>이름</th>
        <th>나이</th>
        <th>직업</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>김철수</td>
        <td>30</td>
        <td>개발자</td>
      </tr>
      <tr>
        <td>이영희</td>
        <td>28</td>
        <td>디자이너</td>
      </tr>
    </tbody>
  </table>
</div>

.table-container {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ddd;
}

작은 화면에서는 overflow-x 속성을 사용해 테이블을 스크롤 가능하게 만듭니다.

---

6. 다중 스타일 테이블

예제: 대화형 테이블

<table class="interactive-table">
  <thead>
    <tr>
      <th>번호</th>
      <th>제목</th>
      <th>작성자</th>
      <th>날짜</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>반응형 웹 개발</td>
      <td>김철수</td>
      <td>2024-12-01</td>
    </tr>
    <tr>
      <td>2</td>
      <td>HTML 기본</td>
      <td>이영희</td>
      <td>2024-12-02</td>
    </tr>
  </tbody>
</table>

.interactive-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.interactive-table th, .interactive-table td {
  border: 1px solid #ddd;
  padding: 10px;
}
.interactive-table tr:hover {
  background-color: #f1f1f1;
}
.interactive-table th {
  background-color: #4CAF50;
  color: white;
}

결과

번호 제목 작성자 날짜

1	반응형 웹 개발	김철수	2024-12-01
2	HTML 기본	이영희	2024-12-02

---

7. 결론

HTML 테이블은 단순한 데이터 표시뿐 아니라 다양한 기능과 디자인을 적용해 풍부한 사용자 경험을 제공합니다. 이번 글에서는 기본적인 사용법부터 반응형 디자인, 셀 병합, 스타일링까지 여러 활용법을 다루었습니다. 이 예제들을 참고하여 여러분의 웹 프로젝트에서 테이블을 효과적으로 사용해 보세요.