HTML DOM의 colSpan 속성은 HTML <td> 요소 내부의 colspan 속성과 연동되는 속성입니다. 이 속성을 활용하면 자바스크립트를 통해 테이블 셀이 차지하는 열의 개수, 즉 colspan 값을 동적으로 설정하거나 반환할 수 있습니다. colspan 속성은 하나의 셀이 여러 열에 걸쳐 표시되도록 만들 때 사용됩니다.
문법
colSpan 속성의 기본 문법은 다음과 같습니다.
tabledataObject.colSpan = number
여기서 number는 해당 셀이 가로로 병합할 열의 개수를 의미합니다.
예제
다음은 colSpan 속성을 활용한 실습 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid blue;
}
</style>
</head>
<body>
<h2>Monthly Savings</h2>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td class="TD1" colspan="2">January</td>
<td>$100</td>
</tr>
<tr>
<td class="TD1" colspan="2">February</td>
<td>$100</td>
</tr>
</table>
<br>
<button onclick="changeSpan()">CHANGE</button>
<script>
var x=document.getElementsByClassName("TD1").length;
function changeSpan() {
for(var i=0;i<x;i++){
document.getElementsByClassName("TD1")[i].colSpan = "1";
}
}
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CHANGE 버튼을 클릭한 후의 화면은 다음과 같습니다.
예제 상세 설명
위 예제에서는 3행 3열 구조의 테이블을 만들었습니다. 두 번째 행부터 시작하는 첫 번째 셀인 'January'와 'February'에는 colspan 값이 2로 지정되어 있어, 각 셀이 두 개의 열에 걸쳐 표시됩니다. 또한 아래와 같은 CSS 스타일을 적용해 테이블이 시각적으로 잘 구분되도록 꾸몄습니다.
table, th, td {
border: 1px solid blue;
}
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td class="TD1" colspan="2">January</td>
<td>$100</td>
</tr>
<tr>
<td class="TD1" colspan="2">February</td>
<td>$100</td>
</tr>
</table>
그다음, 사용자가 클릭하면 changeSpan() 함수를 호출하는 CHANGE 버튼을 추가했습니다.
<button onclick="changeSpan()">CHANGE</button>
changeSpan() 함수는 document 객체의 getElementsByClassName() 메서드를 사용해 클래스명이 'TD1'인 모든 <td> 요소를 가져온 뒤, 인덱스를 통해 각 요소에 접근합니다. 이후 각 셀의 colSpan 속성 값을 2에서 1로 변경하여, 버튼을 클릭하면 모든 셀이 더 이상 열을 병합하지 않고 한 개의 열만 차지하게 됩니다.
var x=document.getElementsByClassName("TD1").length;
function changeSpan() {
for(var i=0;i<x;i++){
document.getElementsByClassName("TD1")[i].colSpan = "1";
}
}