Table - Table Layout - JavaScript DHTML

Started by VelMurugan, Apr 08, 2009, 12:29 PM

Previous topic - Next topic
Go Down Pages1

VelMurugan

Apr 08, 2009, 12:29 PM
Table rules

Code Select
<html>
<body>
<script language="JavaScript">
    function function1() {
        document.getElementById("myTable").rules = "all";
    }
    function function2() {
        document.getElementById("myTable").rules = "cols";
    }
    function function3() {
        document.getElementById("myTable").rules = "groups";
    }
    function function4() {
        document.getElementById("myTable").rules = "none";
    }
    function function5() {
        document.getElementById("myTable").rules = "rows";
    }
</script>
<table id="myTable" border="" rules="">
<tr>
    <td id="C1">Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
</tr>
<tr>
    <td id="C1">Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
</tr>
</table>
<input type="button" value='rules = "all"' onClick="function1();">
<input type="button" value='rules = "cols"' onClick="function2();">
<input type="button" value='rules = "groups"' onClick="function3();">
<input type="button" value='rules = "none"' onClick="function4();">
<input type="button" value='rules = "rows"' onClick="function5();">
</body>
</html>

Source : java2s

VelMurugan

#1
Apr 08, 2009, 12:29 PM
Table width

Code Select
<html>
<head>
<script language="JavaScript">
    function function1() {
        document.getElementById("myTable").width = "300";
    }
    function function2() {
        document.getElementById("myTable").width = "500";
    }
</script>
</head>
<body>
<table id="myTable" cols="3" border="3" cellspacing="5" cellpadding="5">
    <script language="JavaScript">
        document.getElementById("myTable").width = 500;
    </script>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
    </tr>
</table>
<input type="button" value="Change table width to 300px" onClick="function1();">
<input type="button" value="Restore table width to 500px" onClick="function2();">
</body>
</html>

VelMurugan

#2
Apr 08, 2009, 12:30 PM
Table frame

Code Select
<html>
<body>
<script>
    function function1() {
        document.getElementById("myTable").frame = "void";
    }
    function function2() {
        document.getElementById("myTable").frame = "above";
    }
    function function3() {
        document.getElementById("myTable").frame = "below";
    }
    function function4() {
        document.getElementById("myTable").frame = "border";
    }
    function function5() {
        document.getElementById("myTable").frame = "box";
    }
    function function6() {
        document.getElementById("myTable").frame = "hsides";
    }
    function function7() {
        document.getElementById("myTable").frame = "lhs";
    }
    function function8() {
        document.getElementById("myTable").frame = "rhs";
    }
    function function9() {
        document.getElementById("myTable").frame = "vsides";
    }
</script>
<table id="myTable" width="542" bordercolor="blue" cellspacing="5" cellpadding="5">
    <tr>
        <td id="C1">Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
    </tr>
    <tr>
        <td id="C1">Cell 4</td>
        <td>Cell 5</td>
        <td>Cell 6</td>
    </tr>
</table>
<input type="button" value='Frame = "above"' onClick="function2();">
<input type="button" value='Frame = "below"' onClick="function3();">
<input type="button" value='Frame = "border"' onClick="function4();">
<input type="button" value='Frame = "box"' onClick="function5();">
<input type="button" value='Frame = "hsides"' onClick="function6();">
<input type="button" value='Frame = "lhw"' onClick="function7();">
<input type="button" value='Frame = "rhs"' onClick="function8();">
<input type="button" value='Frame = "vsides"' onClick="function9();">
<input type="button" value='Frame = "void"' onClick="function1();">
</body>
</html>

VelMurugan

#3
Apr 08, 2009, 12:30 PM
Table cell padding and space Example

Code Select
<html>
<body>
Click in any cell to view the cellIndex value.
<table id="myTable" cols="3">
    <tr>
       <th id="th1" onclick="function1(this);">Header 1</th>
       <th id="th2" onclick="function1(this);">Header 2</th>
       <th id="th3" onclick="function1(this);">Header 3</th>
    </tr>
    <tr>
       <td id="td1" onclick="function1(this);">Cell 1</td>
       <td id="td2" onclick="function1(this);">Cell 2</td>
       <td id="td3" onclick="function1(this);">Cell 3</td>
    </tr>
</table>
<br>
<button onclick="alert(myTable.cellPadding);">Cell Padding</button>
<button onclick="alert(myTable.cellSpacing);">Cell Spacing</button>
<button onclick="alert(myTable.cols);">cols</button>
<script language="JavaScript">
    function function1(elem) {
        alert("Cell Index :"  elem.cellIndex);
    }
</script>
</body>
</html>
Go Up Pages1