HTML에서 표(table)의 셀을 병합하려면 colspan과 rowspan 속성을 사용합니다. 두 속성의 역할은 다음과 같습니다.
- rowspan: 셀이 세로로 걸쳐질 행(row)의 개수를 지정합니다.
- colspan: 셀이 가로로 걸쳐질 열(column)의 개수를 지정합니다.
두 속성 모두 <td> 태그 내부에 작성하며, 값은 숫자로 입력합니다. 예를 들어 rowspan="2"는 해당 셀이 2개의 행에 걸쳐 있다는 뜻이고, colspan="2"는 2개의 열에 걸쳐 있다는 뜻입니다.
기본 예제: 3행 3열 표 만들기
먼저 HTML로 3행 3열짜리 기본 표를 만들어 보겠습니다.
<!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></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>실행 결과
셀 병합 예제: colspan과 rowspan 적용하기
이번에는 colspan과 rowspan 속성을 사용해 실제로 셀을 병합해 보겠습니다. 첫 번째 행의 첫 번째 헤더 셀에는 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>실행 결과
정리
HTML에서 셀 병합은 매우 간단합니다. 가로로 병합할 때는 colspan, 세로로 병합할 때는 rowspan을 <td> 또는 <th> 태그에 추가하면 됩니다. 단, 병합된 셀만큼 해당 행이나 열에서 셀의 개수를 줄여야 표 구조가 깨지지 않으므로 이 점을 꼭 기억하세요.