HTML에서 테이블을 만들다 보면 여러 개의 셀을 하나로 합쳐야 하는 경우가 자주 있습니다. 이때 사용하는 것이 바로 rowspan과 colspan 속성입니다.
rowspan과 colspan이란?
rowspan과 colspan은 <td>(데이터 셀) 또는 <th>(헤더 셀) 태그에 적용되는 속성으로, 하나의 셀이 몇 개의 행(row) 또는 열(column)에 걸쳐 표시될지를 지정합니다.
- rowspan: 세로 방향으로 셀을 병합합니다. 즉, 지정한 숫자만큼 여러 행에 걸쳐 하나의 셀이 확장됩니다.
- colspan: 가로 방향으로 셀을 병합합니다. 지정한 숫자만큼 여러 열에 걸쳐 하나의 셀이 확장됩니다.
두 속성 모두 숫자 값을 가지며, 예를 들어 colspan="3"이라고 작성하면 해당 셀이 3개의 열을 차지하게 됩니다.
rowspan·colspan 사용 예제
아래 코드는 colspan과 rowspan을 함께 활용한 테이블 예제입니다. 첫 번째 행의 헤더 셀은 두 열을 병합(colspan=2)하고, 오른쪽 데이터 셀은 세 행을 병합(rowspan=3)합니다.
예제 코드
<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="3"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 테이블이 출력됩니다. 오른쪽 끝의 셀이 세 행에 걸쳐 세로로 길게 표현되고, 상단의 헤더 셀은 두 열을 가로로 덮는 것을 확인할 수 있습니다.
정리
- rowspan은 셀을 세로(행 방향)로 병합할 때 사용합니다.
- colspan은 셀을 가로(열 방향)로 병합할 때 사용합니다.
- 병합된 만큼 다음 행이나 열에서는 해당 셀을 생략해야 테이블 구조가 깨지지 않습니다.
복잡한 표 레이아웃을 만들 때 rowspan과 colspan을 적절히 활용하면 HTML만으로도 깔끔한 테이블 구조를 손쉽게 구성할 수 있습니다.