Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML DOM ColumnGroup 객체

<시간/>

HTML DOM ColumnGroup 개체는 HTML 요소와 연결됩니다. 요소는 CSS 스타일을 특정 수의 열 또는 모든 열에 적용하는 데 사용됩니다. 이렇게 하면 테이블에 있는 열을 더 잘 제어할 수 있습니다.

속성

다음은 ColumnGroup 속성입니다 -

속성 설명
스팬 열 그룹의 범위 속성 값을 설정하거나 반환합니다.

구문

다음은 −

의 구문입니다.

ColumnGroup 개체 만들기 -

var x = document.createElement("COLGROUP");

예시

ColumnGroup 개체에 대한 예를 살펴보겠습니다. -

<!DOCTYPE html>
<html>
<head>
<style>
   table, th, td {
      border: 1px solid black;
   }
   #DIV1{
      background-color:pink;
   }
</style>
</head>
<body>
<table id="TABLE1">
<tr>
<th>FRUIT</th>
<th>COLOR</th>
<th>Price</th>
</tr>
<tr>
<td>MANGO</td>
<td>YELLOW</td>
<td>100RS</td>
</tr>
<tr>
<td>GUAVA</td>
<td>GREEN</td>
<td>50RS</td>
</tr>
</table>
<p>Click the below button to create a colgroup element with span = 2.</p>
<button onclick="colFun()">COLGROUP</button>
<script>
   function colFun() {
      var x = document.createElement("COLGROUP");
      x.setAttribute("id","DIV1");
      x.setAttribute("span","2");
      document.getElementById("TABLE1").appendChild(x);
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM ColumnGroup 객체

COLGROUP −

클릭 시

HTML DOM ColumnGroup 객체

위의 예에서 -

먼저 3개의 행과 3개의 열과 id "TABLE 1"이 있는 테이블을 만들었습니다. 우리는 또한 테이블과 그 자식 요소에 몇 가지 스타일을 적용했습니다 -

table, th, td {
   border: 1px solid black;
}
<table id="TABLE1">
<tr>
<th>>FRUIT</th>
<th>COLOR</th>
<th>Price</th>
</tr>
<tr>
<td>MANGO</td>
<td>YELLOW</td>
<td>100RS</td>
</tr>
<tr>
<td>GUAVA</td>
<td>GREEN</td>
<td>50RS</td>
</tr>
</table>

그런 다음 사용자가 클릭하면 colFun()을 실행할 버튼 COLGROUP을 만들었습니다. 

<button onclick="colFun()">COLGROUP</button>

colFun() 메서드는 요소를 만들고 변수 x에 할당합니다. setAttribute() 메서드를 사용하여 새로 생성된 요소에 id를 할당하고 span은 2와 같습니다. 그런 다음

요소에 대한 appendChild() 메서드를 사용하여 요소를 테이블의 첫 번째 자식으로 추가합니다 -

function colFun() {
   var x = document.createElement("COLGROUP");
   x.setAttribute("id","DIV1");
   x.setAttribute("span","2");
   document.getElementById("TABLE1").appendChild(x);
}