HTML에서 테이블의 특정 셀이 여러 개의 열에 걸쳐 확장되도록 하려면 colspan 속성을 사용하면 됩니다. colspan은 'column span'의 줄임말로, 하나의 셀이 가로 방향으로 몇 개의 열을 병합하여 차지할지 그 개수를 지정하는 역할을 합니다.
colspan 속성이란?
기본적으로 HTML 테이블의 각 셀(<td>)은 하나의 열만 차지합니다. 하지만 표의 마지막 행에서 합계를 표시하거나, 제목이 여러 열에 걸쳐야 하는 경우처럼 하나의 셀이 두 개 이상의 열을 차지해야 할 때가 있습니다. 이럴 때 colspan="숫자" 형태로 값을 지정하면 해당 셀이 지정한 개수만큼의 열을 병합하게 됩니다.
colspan 사용 예제
아래 예제는 과목별 점수를 나타내는 표에서, 마지막 행의 '총점' 셀이 두 개의 열을 모두 차지하도록 colspan 속성을 적용한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>총점 계산</h2>
<table>
<th>과목</th>
<th>점수</th>
<tr>
<td>수학</td>
<td>300</td>
</tr>
<tr>
<td>자바</td>
<td>450</td>
</tr>
<tr>
<td colspan="2">총점: 750</td>
</tr>
</table>
</body>
</html>코드 설명
위 코드에서 핵심 부분은 <td colspan="2">총점: 750</td>입니다. 이 셀은 colspan 값이 2로 설정되어 있기 때문에 '과목' 열과 '점수' 열, 즉 두 개의 열을 하나로 병합하여 표시됩니다.
실행 결과를 보면 첫 번째 행에는 '수학(300)', 두 번째 행에는 '자바(450)'가 각각 두 개의 셀로 표시되고, 마지막 행에는 '총점: 750'이라는 텍스트가 테이블 전체 너비에 걸쳐 하나의 셀로 나타나는 것을 확인할 수 있습니다.
참고: rowspan과의 차이점
colspan이 가로 방향(열)의 병합을 담당한다면, 세로 방향(행)으로 셀을 병합하고 싶을 때는 rowspan 속성을 사용합니다. 두 속성은 함께 사용할 수도 있으며, 이를 조합하면 복잡한 구조의 표도 손쉽게 만들 수 있습니다.