HTML에서 테이블 셀이 여러 행에 걸쳐 세로로 확장되도록 설정하려면 rowspan 속성을 사용하면 됩니다. HTML에서 셀을 병합하는 방법은 크게 두 가지가 있는데, 바로 colspan과 rowspan 속성입니다.
rowspan과 colspan의 차이
rowspan 속성은 하나의 셀이 세로 방향으로 차지할 행(row)의 수를 지정합니다. 반면 colspan 속성은 셀이 가로 방향으로 차지할 열(column)의 수를 지정합니다. 이 두 속성을 적절히 조합하면 헤더 병합이나 카테고리 그룹화처럼 구조가 복잡한 표도 손쉽게 만들 수 있습니다.
예제
아래 예제는 첫 번째 행에서 colspan="2"로 두 개의 열을 가로로 병합하고, 두 번째 행에서 rowspan="2"로 하나의 셀이 두 개의 행에 걸쳐 세로로 확장되는 모습을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<table>
<tr>
<th colspan = "2"></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td rowspan = "2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>