HTML에서 <td> 요소의 colspan 속성은 하나의 셀이 테이블에서 차지할 열(column)의 개수를 지정하는 데 사용됩니다. 이 속성을 활용하면 여러 열에 걸쳐 셀을 가로로 병합할 수 있어, 합계 행이나 제목 행처럼 넓게 확장된 셀을 만들 때 매우 유용합니다.
colspan 속성 문법
colspan 속성의 기본 문법은 다음과 같습니다.
<td colspan="num">
여기서 num은 해당 셀이 차지할 열의 개수를 의미합니다. 예를 들어 colspan="2"로 설정하면 셀이 두 개의 열을 하나로 합쳐서 표시됩니다.
colspan 속성 사용 예제
아래 예제는 제품 비용 표에서 마지막 '총 예산' 행에 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">총 예산 = INR 1300000</td>
</tr>
</table>
</body>
</html>실행 결과
위 코드를 실행하면 각 항목별 비용이 두 열로 구성된 표에 표시되고, 마지막 행의 '총 예산' 셀은 colspan="2" 덕분에 항목 열과 비용 열을 모두 포함하여 가로로 병합된 형태로 나타납니다.
colspan 사용 시 참고 사항
- colspan 값은 반드시 양의 정수여야 하며, 기본값은 1입니다.
- 병합된 셀만큼 해당 행에는 다른
<td>요소가 줄어들어야 레이아웃이 깨지지 않습니다. - 세로 방향으로 셀을 병합하려면
<td>의 rowspan 속성을 함께 활용하면 됩니다.