rowspan 속성

rowspan 속성은 HTML 테이블에서 행을 병합합니다. th 태그와 td 태그에 적용됩니다.

허용 값: 1부터 시작하는 정수.

사용 방법: 원하는 td 또는 th 셀에 이 속성을 추가하세요. 예를 들어, rowspan 값을 2로 설정하면, 해당 속성이 지정된 셀이 테이블 높이로 두 행을 차지합니다. 이때 아래 행의 셀들은 사라지지 않으며, 확장된 셀이 그들을 밀어내어 테이블이 깨집니다. 이를 방지하려면 아래 행에서 셀 하나를 제거해야 합니다. 더 나은 이해를 위해 예제를 참조하세요.

예제 . 병합 없는 테이블

병합이 없는 기본 테이블을 살펴보겠습니다. 이 테이블을 기반으로 작업할 것입니다:

html<table>
  <tr>
    <td>cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

예제 . 셀을 두 행으로 확장하기

이제 1번 셀에 rowspan 속성을 값 2로 설정하여 두 행으로 확장해 보겠습니다. 해당 셀이 아래 행의 셀들을 밀어내고 테이블이 깨지는 것을 볼 수 있습니다:

html<table>
  <tr>
    <td rowspan="2">cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

예제 . 테이블을 깨지 않고 셀 확장하기

이전 예제의 테이블 깨짐 문제를 해결하기 위해, 두 번째 행에서 셀 하나를 제거해 보겠습니다 (1번 셀 바로 아래 있는 4번 셀일 필요는 없습니다, 어떤 셀이든 제거할 수 있습니다. 여기서는 5번 셀을 제거하겠습니다):

html<table>
  <tr>
    <td rowspan="2">cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

예제 . 셀을 3행으로 확장하기

이번에는 셀을 두 행이 아닌 3행으로 확장해 보겠습니다. rowspan 값을 3로 설정합니다. 이 경우 테이블이 깨지지 않도록 세 번째 행에서 셀 하나 (7, 8 또는 9번 셀 중 아무거나)를 제거해야 합니다:

html<table>
  <tr>
    <td rowspan="3">cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell9</td>
  </tr>
</table>   

csstable, td, th {
  border: 1px solid black;
}

Результат:

예제 . 추가로 2열 확장하기

첫 번째 셀에 추가로 2번 셀도 2열로 확장해 보겠습니다. 이를 위해 2번 셀에 값 2의 colspan를 추가합니다. 이때 테이블이 깨지지 않도록 3번 셀을 제거합니다:

html<table>
  <tr>
    <td rowspan="3">cell1</td>
    <td colspan="2">cell2</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

참고 항목