HTML의 colspan 속성은 테이블에서 하나의 셀이 여러 개의 열(column)에 걸쳐 표시되도록 지정하는 속성입니다. 즉, 셀을 가로 방향으로 병합할 때 사용하며, <td> 또는 <th> 요소에 적용할 수 있습니다.
<td> 요소의 colspan 속성
HTML에서 <td> 요소의 colspan 속성은 해당 데이터 셀이 차지할 열의 개수를 정의합니다.
기본 구문은 다음과 같습니다.
<td colspan="num">
여기서 num은 셀이 가로로 병합할 열의 개수를 의미합니다. 예를 들어 colspan="2"로 설정하면 해당 셀이 두 개의 열 폭만큼 확장됩니다.
예제
다음은 <td> 요소에 colspan 속성을 적용한 예제입니다. 마지막 행의 '총 예산' 셀이 두 열에 걸쳐 표시되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid blue;
}
</style>
</head>
<body>
<h2>제품 비용 내역</h2>
<table>
<tr>
<th>항목</th>
<th>비용</th>
</tr>
<tr>
<td>제품 개발</td>
<td>500000</td>
</tr>
<tr>
<td>마케팅</td>
<td>500000</td>
</tr>
<tr>
<td>서비스</td>
<td>100000</td>
</tr>
<tr>
<td>지원</td>
<td>100000</td>
</tr>
<tr>
<td>유지보수</td>
<td>100000</td>
</tr>
<tr>
<td colspan="2">총 예산 = 1,300,000원</td>
</tr>
</table>
</body>
</html>실행 결과
<th> 요소의 colspan 속성
<th> 요소의 colspan 속성은 헤더 셀이 차지할 열의 개수를 지정하는 데 사용됩니다. 표 전체를 아우르는 제목 행을 만들 때 특히 유용합니다.
기본 구문은 다음과 같습니다.
<th colspan="num">
여기서 num은 헤더 셀이 가로로 병합할 열의 개수입니다.
예제
다음은 <th> 요소에 colspan 속성을 적용한 예제입니다. 첫 번째 행의 '비용' 헤더가 두 열 전체에 걸쳐 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid green;
}
</style>
</head>
<body>
<h2>제품 비용 내역</h2>
<table>
<tr>
<th colspan="2">비용</th>
</tr>
<tr>
<td>제품 개발</td>
<td>500000</td>
</tr>
<tr>
<td>마케팅</td>
<td>500000</td>
</tr>
<tr>
<td>서비스</td>
<td>100000</td>
</tr>
<tr>
<td>지원</td>
<td>100000</td>
</tr>
<tr>
<td>유지보수</td>
<td>100000</td>
</tr>
<tr>
<td colspan="2">총 예산 = 1,300,000원</td>
</tr>
</table>
</body>
</html>실행 결과
정리
colspan 속성은 테이블 레이아웃을 유연하게 구성할 수 있게 해주는 필수 속성입니다. 합계 행이나 그룹 제목처럼 여러 열을 하나로 묶어야 하는 경우 <td>와 <th> 어디에서든 손쉽게 활용할 수 있습니다. 참고로 세로 방향 병합이 필요하다면 rowspan 속성을 함께 사용하면 됩니다.