rowspan 속성
rowspan 속성은 HTML
테이블에서
행을 병합합니다.
th 태그와
td 태그에 적용됩니다.
허용 값: 1부터 시작하는 정수.
사용 방법: 원하는 td 또는 th 셀에 이 속성을 추가하세요.
예를 들어, rowspan 값을 2로 설정하면,
해당 속성이 지정된 셀이 테이블 높이로 두 행을 차지합니다.
이때 아래 행의 셀들은 사라지지 않으며,
확장된 셀이 그들을 밀어내어 테이블이 깨집니다.
이를 방지하려면 아래 행에서 셀 하나를 제거해야 합니다.
더 나은 이해를 위해 예제를 참조하세요.
예제 . 병합 없는 테이블
병합이 없는 기본 테이블을 살펴보겠습니다. 이 테이블을 기반으로 작업할 것입니다:
<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>
table, td, th {
border: 1px solid black;
}
:
예제 . 셀을 두 행으로 확장하기
이제 1번 셀에 rowspan 속성을 값 2로 설정하여 두 행으로 확장해 보겠습니다.
해당 셀이 아래 행의 셀들을 밀어내고 테이블이 깨지는 것을 볼 수 있습니다:
<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>
table, td, th {
border: 1px solid black;
}
:
예제 . 테이블을 깨지 않고 셀 확장하기
이전 예제의 테이블 깨짐 문제를 해결하기 위해,
두 번째 행에서 셀 하나를 제거해 보겠습니다
(1번 셀 바로 아래 있는 4번 셀일 필요는 없습니다,
어떤 셀이든 제거할 수 있습니다. 여기서는 5번 셀을 제거하겠습니다):
<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>
table, td, th {
border: 1px solid black;
}
:
예제 . 셀을 3행으로 확장하기
이번에는 셀을 두 행이 아닌 3행으로 확장해 보겠습니다.
rowspan 값을 3로 설정합니다.
이 경우 테이블이 깨지지 않도록 세 번째 행에서 셀 하나
(7, 8 또는 9번 셀 중 아무거나)를 제거해야 합니다:
<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>
table, td, th {
border: 1px solid black;
}
:
예제 . 추가로 2열 확장하기
첫 번째 셀에 추가로 2번 셀도 2열로 확장해 보겠습니다.
이를 위해 2번 셀에 값 2의 colspan를 추가합니다.
이때 테이블이 깨지지 않도록 3번 셀을 제거합니다:
<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>
table, td, th {
border: 1px solid black;
}
:
참고 항목
-
테이블 열을 병합하는 속성
colspan
