COL 엘레멘트가 COLGROUP 엘레멘트 속에서 span 속성이 확장되어 COLGROUP 엘레멘트 속의 COL 엘레멘트 갯수가 늘어난다.

<TABLE id=exTable border="2" rules="groups" width=600 style="font-size:8pt">
<COLGROUP span="2" style="color:blue;background:fee"><COL><COL></COLGROUP>
<COLGROUP style="color:brown;background:eef"><COL><COL><COL></COLGROUP>
<TR>
<TD>TD00 colGroup=#1</TD>
<TD>TD01 colGroup=#1</TD>
<TD>TD02 colGroup=#2</TD>
<TD>TD03 colGroup=#2</TD>
<TD>TD04 colGroup=#2</TD>
</TR>
<TR>
<TD>TD10 colGroup=#1</TD>
<TD>TD11 colGroup=#1</TD>
<TD>TD12 colGroup=#2</TD>
<TD>TD13 colGroup=#2</TD>
<TD>TD14 colGroup=#2</TD>
</TR>
<TR>
<TD>TD20 colGroup=#1</TD>
<TD>TD21 colGroup=#1</TD>
<TD>TD22 colGroup=#2</TD>
<TD>TD23 colGroup=#2</TD>
<TD>TD24 colGroup=#2</TD>
</TR>
</TABLE>
<SCRIPT>
function showit(){
  obj=exTable.all.tags('COLGROUP')[0];
  str='COL 생성 전 span='+obj.span+'<BR>';
  newNode=document.createElement('COL');
  obj.appendChild(newNode);
  obj.span+=1;
  str+='COL 생성 후 span='+obj.span;
  str+='<HR><DIV align=center>colGroup의 마지막 col('+obj.span+')</DIV>';
  if (obj.span==5) butObj.disabled=true;
  for (i=0;i< exTable.all.tags('TR').length;i++){
    str+=exTable.all.tags('TR')[i].children[obj.span-1].innerText+'<BR>';
  }
  showA.innerHTML=str;
}
</SCRIPT>
<BUTTON onclick="showit()" id=butObj>클릭해 보라.</BUTTON>
<DIV id=showA>결과 표시창</DIV>