HTML 테이블 셀 병합 (colspan, rowspan)

colspan : 셀을 가로방향으로 병합
rowspan : 셀을 세로방향으로 병합

왼쪽: 아래 HTML코드의 실행 결과물. 오른쪽: colspan/rowspan 적용 이해를 위한 셀 구분선 추가.

<table>
   <caption>Monthly Savings</caption>
   <thead>
      <tr>
         <th>Month</th><th>Savings</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>January</td><td>$100</td>
      </tr>
      <tr>
         <td>February</td><td rowspan="2">$80</td>
      </tr>
      <tr>
         <td>March</td>
      </tr>
   </tbody>
   <tfoot>
      <tr>
         <td colspan="2">Sum</td>
      </tr>
   </tfoot>
</table>

<td>의 colspan/rowspan 속성을 이용해서 테이블 셀 가로/세로 병합을 할 수 있습니다. 처음엔 이 개념이 낯설어서 구현하는게 어려울 수 있습니다. span은 '폭, 길이'이라는 뜻을 가진 명사죠. 그렇다면, colspan은 '열의 폭' 또는 '열의 길이'라고 해석할 수 있습니다.

 

<td>의 길이는 기본적으로 '가로(row행):1 / 세로(col열):1' 입니다. 여기서, 행의 길이가 2가 된다면, '가로(행):2 / 세로(열):1'로 표현될겁니다. 코드로 표현하자면 <td rowspan="2">가 되겠죠. 한 개의 <td>가 2개의 row만큼의 길이를 가지게 됩니다. 이렇게 해석한다면 셀 병합에 대한 이해가 훨씬 쉬워지죠.

 

위의 그림은 <table>에서 셀을 가로/세로방향 병합의 이해를 돕기위해 만든 그림입니다.

처음의 표를 만들기 위해서는 오른쪽과 같은 구조를 통해 만들어 집니다. 5x2의 표가 병합을 통해 다음과 같은 모습으로 표현되는 거죠.