[HTML] 테이블(table) 가로, 세로 셀 병합하기 (colspan, rowspan)

 

HTML에서 테이블을 표현하고,

테이블의 셀을 병합하는 방법을 알아보도록 하겠습니다.

먼저, HTML로 테이블을 그리는 방법을 모른다면 지난 포스팅을 참조하세요.

[HTML] 기본 테이블(표, Table) 그리기 (table, tr, td, th)

[HTML] 테이블 제목 지정하기, caption tag

 

 

아래 예제 테이블을 가지고 가로, 세로 셀 병합을 해 보도록 하겠습니다.

<table border="1">
  <tr>
    <th>학년</th>
    <th>반</th>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>2</td>
    <td>1</td>
  </tr>
</table>

 

 

 

세로 셀 병합하기 (rowspan)

<table border="1">
  <tr>
    <th>학년</th>
    <th>반</th>
  </tr>
  <tr>
    <td rowspan='2'>1</td>
    <td>1</td>
  </tr>
  <tr>
    <!--<td>1</td>-->
    <td>2</td>
  </tr>
  <tr>
    <td>2</td>
    <td>1</td>
  </tr>
</table>

위 코드는 2개의 '1학년' 항목이 2 row가 병합되었습니다.

2개의 row가 병합되었으므로, 결국 세로 방향으로 합쳐진 셀이 만들어진 것입니다.

여러줄의 row를 병합 할때는 위의 예시처럼

병합을 시작하려는 cell에 rowspan을 정의하고, 

병합할 row의 갯수를 적어줍니다.

그리고, 원래 해당 cell이 있어야 할 위치 (예제 코드에서 주석으로 처리한 부분)는 비워둡니다.

'1학년 2반'이 있어야 하는 세번째 줄에는

2개의 cell 대신 1개의 cell만 있는 것을 확인하세요. (주석처리 된 부분)

 

 

가로 셀 병합하기 (colspan)

<table border="1">
  <tr>
    <th>학년</th>
    <th>반</th>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td colspan='2'>2-1</td>
    <!--<td>1</td>-->
  </tr>
</table>

이번에는 반대로 2개의 column을 병합하였습니다.

병합하려는 cell에 'colspan' 속성을 정의하고, 병합할 cell의 갯수를 지정해주었습니다.

rowspan을 사용할 때와 마찬가지로

병합된 셀의 위치는 <td> 태그를 넣지 않고 비워둡니다. (주석 처리된 부분)

 

 

가로/세로 셀 모두 병합하기 (rowspan, colspan)

<table border="1">
  <tr>
    <td rowspan='2' colspan='2'>1</td>
    <!--<td>2</td>-->
    <td>3</td>
  </tr>
  <tr>
    <!--<td>4</td>-->
    <!--<td>5</td>-->
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

이번에는 조금 다른 예제를 사용하여

가로 세로 셀을 같이 병합해 보았습니다. (2 * 2)

이전의 예제들을 응용하여

병합하려는 첫번째 셀에 colspan과 rowspan을 정의하고

병합되는 위치의 셀을 주석처리 하였습니다.

 

---

 

HTML 테이블의 셀을 병합하여 보여주는 방법을 알아보았습니다.