<!--
Example revised from
The Web Programmer's Desk Reference
by Lazaro Issi Cohen and Joseph Issi Cohen
ISBN: 1593270119
Publisher: No Starch Press 2004
-->
<html>
<body>
<script language="JavaScript">
function function1() {
document.all.myTableHeader.colSpan = "3";
}
function function2() {
document.all.myTd1.colSpan = "3";
}
function function3() {
document.all.myTd2.colSpan = "2";
}
function function4() {
document.all.myTableHeader.colSpan = "1";
document.all.myTd1.colSpan = "1";
document.all.myTd2.colSpan = "1";
}
</script>
<table>
<tr>
<th align="center" bgcolor="blue" style="color:white;">First Header</th>
<th id="myTableHeader" bgcolor="green" style="color:white;"width="140">Second Header</th>
<th align="center" bgcolor="red" style="color:white;" width="140">Third Header</th>
<th align="center" bgcolor="gray" style="color:white;"width="140">Fourth Header</th>
</tr>
<tr>
<td id="myTd1">Cell 1 content</td>
<td>Cell 2 content</td>
<td id="myTd2">Cell 3 content</td>
<td>Cell 4 content</td>
</tr>
</table>
<input type="button" name="S1" value="Span Second Header" onClick="function1();">
<input type="button" name="S2" value="Span Cell 1" onClick="function2();">
<input type="button" name="S3" value="Span Cell 3" onClick="function3();">
<input type="button" name="S4" value="Restore" onClick="function4();">
</body>
</html>
|