HTML에서 테이블의 열(가로 셀)을 병합하려면 <td> 태그에 colspan 속성을 사용하면 됩니다. colspan은 'column span'의 약자로, 지정한 숫자만큼의 셀을 하나로 합쳐주는 역할을 합니다.
예를 들어 4행 4열로 구성된 테이블이 있다면, colspan 속성을 활용해 셀 2개 또는 3개를 손쉽게 하나의 셀로 병합할 수 있습니다.
기본 테이블 만들기
먼저 colspan을 적용하기 전에, HTML로 3행 3열짜리 기본 테이블을 만드는 방법부터 살펴보겠습니다. 아래 코드를 실행하면 각각 독립된 9개의 셀을 가진 테이블이 생성됩니다.
<!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으로 열 병합하기
이제 colspan 속성을 사용해 실제로 열을 병합해 보겠습니다. 두 번째 행의 첫 번째 <td>에 colspan="2"를 지정하면, 해당 행의 앞쪽 2개 열이 하나의 셀로 합쳐집니다. 이때 병합된 만큼 셀 개수가 줄어들기 때문에, 같은 행에서 나머지 <td>는 하나만 작성하면 됩니다.
<!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 colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>실행 결과
정리
HTML에서 테이블 열을 병합하는 핵심은 colspan 속성입니다. 주요 포인트를 정리하면 다음과 같습니다.
- colspan="N": 현재 셀부터 N개의 열을 하나로 병합합니다.
- 병합된 셀 수만큼 해당 행의
<td>개수를 줄여야 레이아웃이 깨지지 않습니다. - 행(세로) 방향으로 병합할 때는 rowspan 속성을 사용합니다.
colspan과 rowspan을 적절히 조합하면 복잡한 구조의 테이블도 자유롭게 설계할 수 있습니다.