HTML Table 태그 사용법 정리

---

1. 테이블 기본 구조

HTML 테이블은 크게 아래 다섯 가지 태그로 구성됩니다.

• <table>
  테이블 전체를 감싸는 최상위 컨테이너 역할을 합니다.
• <caption>
  테이블 제목이나 설명을 정의합니다. 접근성(스크린 리더) 향상을 위해 반드시 사용을 권장합니다.
• <tr> (Table Row)
  한 줄(행)을 정의합니다.
• <th> (Table Header)
  행 또는 열의 제목 셀을 만듭니다. 기본적으로 글씨가 굵게(center 정렬) 표시됩니다.
  height나 width 속성을 통해 크기를 지정할 수 있습니다.
• <td> (Table Data)
  실제 데이터 셀을 만듭니다. <th>와 동일하게 height나 width 속성 사용이 가능합니다.

<table>
  <caption>월별 매출 현황</caption>
  <tr>
    <th>월</th>
    <th>매출</th>
  </tr>
  <tr>
    <td>1월</td>
    <td>10,000</td>
  </tr>
</table>

---

2. 행(rowspan)·열(colspan) 병합

테이블에서 특정 셀을 가로·세로로 합쳐야 할 때 rowspan, colspan 속성을 사용합니다.

• rowspan="n"
  셀을 위아래로 n개 행만큼 병합합니다.
• colspan="n"
  셀을 좌우로 n개 열만큼 병합합니다.

주의사항

1. 병합 후 주변 셀 수와 정렬 상태를 반드시 재확인해야 합니다.
2. 복잡한 병합 구조는 가독성과 유지보수를 어렵게 하니, 가급적 단순하게 유지하세요.
3. 셀 병합 시 <th>와 <td>를 잘 구분하여 사용할 것. 헤더 역할이라면 <th> 사용을 권장합니다.

---

3. 예제: 분기별 실적 테이블

아래 예시는 ‘1~3분기 월별 매출’을 표현한 테이블입니다. <caption>으로 제목을 달고, rowspan·colspan으로 병합한 모습입니다.

<table>
  <caption>:::: 분기별 실적 ::::</caption>
  <tr>
    <th rowspan="2">구분</th>
    <th colspan="3">1사분기</th>
    <th colspan="3">2사분기</th>
    <th colspan="3">3사분기</th>
  </tr>
  <tr>
    <th>1월</th><th>2월</th><th>3월</th>
    <th>4월</th><th>5월</th><th>6월</th>
    <th>7월</th><th>8월</th><th>9월</th>
  </tr>
  <tr>
    <th>강남</th>
    <td>11</td><td>23</td><td>44</td>
    <td>12</td><td>25</td><td>41</td>
    <td rowspan="2" colspan="2">52</td><td>25</td>
  </tr>
  <tr>
    <th>강서</th>
    <td>54</td><td>22</td><td>41</td>
    <td>11</td><td>26</td><td>12</td>
    <td>31</td>
  </tr>
  <tr>
    <th>관악</th>
    <td>6</td><td>45</td><td>12</td>
    <td>21</td><td>28</td><td>19</td>
    <td>23</td><td>31</td><td>91</td>
  </tr>
</table>

 

위 코드를 실행하면 다음과 같이 출력됩니다.

 

<코드를 바디에 넣고 직접 실행한 스크린샷>

---

4. 추가 팁 & 접근성 개선

• CSS로 스타일링

  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
  }
  caption {
    caption-side: top;
    font-weight: bold;
    margin-bottom: 8px;
  }
  

• <scope> 속성 활용
  헤더 셀에 scope="col" 또는 scope="row"를 지정하면 스크린 리더가 각 셀의 역할을 더 잘 인식합니다.
• 반응형 테이블
  작은 화면에서는 overflow-x: auto;를 적용한 컨테이너 안에 테이블을 넣어 좌우 스크롤을 허용하세요.

---