<HEAD>
<SCRIPT src=tableDom.js>
</SCRIPT>
<SCRIPT>

function doIt() {
  var table = document.getElementsByTagName("TABLE")[0];
  var refCg = document.getElementsByTagName("COLGROUP")[0];
  var cg = document.createElement("COLGROUP", null);
  var col = document.createElement("COL", null);
  col.width = 100;
  cg.appendChild(col);
  col = document.createElement("COL", null);
  col.width = 200;
  cg.appendChild(col);  
  table.insertBefore(cg, refCg);
}
</SCRIPT>  
</HEAD>
<BODY onload="doIt()">
The 2 tables should look the same
<table bgcolor=orange border>
 <colgroup>
  <col width=300>
 </colgroup>
 <tr>
  <td>100</td><td>200</td><td>300</td>
 </tr>
</table>
<BR>
<table bgcolor=orange border>
 <colgroup>
  <col width=100>
  <col width=200>
 </colgroup>
 <colgroup>
  <col width=300>
 </colgroup>
 <tr>
  <td>100</td><td>200</td><td>300</td>
 </tr>
</table>
<BR>
</BODY></HTML>