HTML DOM ColumnGroup span 속성은 HTML 요소의 span 속성과 연결됩니다. ColumnGroup 범위 속성은 열 그룹의 범위 특성 값을 설정하거나 반환합니다. span 속성은 요소가 확장되어야 하는 열의 수를 정의하는 데 사용됩니다.
구문
다음은 −
의 구문입니다.ColumnGroup 범위 속성 설정 -
columngroupObject.span = number
여기서 숫자는 요소가 확장되어야 하는 열의 수를 지정합니다.
예시
ColumnGroup 범위 속성에 대한 예를 살펴보겠습니다 -
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid blue; } </style> </head> <body> <table> <colgroup id="Colgroup1"></colgroup> <tr> <th>Fruit</th> <th>COLOR</th> <th>Price</th> </tr> <tr> <td>watermelon</td> <td>dark green</td> <td>40Rs</td> </tr> <tr> <td>papaya</td> <td>yellow</td> <td>30Rs</td> </tr> </table> <p>lick the button to change the background color of the first two columns. <button onclick="changeColor()">CHANGE</button> <script> function changeColor() { document.getElementById("Colgroup1").span = "2"; document.getElementById("Colgroup1").style.backgroundColor = "lightgreen"; } </script> </body> </html>
출력
이것은 다음과 같은 출력을 생성합니다 -
CHANGE 버튼을 클릭하면 -
위의 예에서 -
2개의 행과 3개의 열이 있는 테이블을 만들었습니다. 테이블, th 및 td 요소에도 몇 가지 스타일이 적용되었습니다. -
table, th, td { border: 1px solid blue; } <table> <colgroup id="Colgroup1"></colgroup> <tr> <th>Fruit</th> <th>COLOR</th> <th>Price</th> </tr> <tr> <td>watermelon</td> <td>dark green</td> <td>40Rs</td> </tr> <tr> <td>papaya</td> <td>yellow</td> <td>30Rs</td> </tr> </table>
그런 다음 사용자가 클릭할 때 changeColor() 메서드를 실행하는 CHANGE 버튼을 만들었습니다.
<button onclick="changeColor()">CHANGE</button>
changeColor() 함수는 getElementById() 메서드를 사용하여 요소를 가져오고 요소 ID를 매개변수로 제공합니다. 그런 다음 요소 범위를 2로 설정하고 배경색을 녹색으로 변경합니다. 이렇게 하면 요소의 span 속성에 지정된 대로 왼쪽에서 처음 두 열이 녹색이 됩니다.
function changeColor() { document.getElementById("Colgroup1").span = "2"; document.getElementById("Colgroup1").style.backgroundColor = "lightgreen"; }