JavaScript DHTML/Table/Table Layout
Table cell padding and space Example
<source lang="html4strict">
<html> <body> Click in any cell to view the cellIndex value.
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Cell 1 | Cell 2 | Cell 3 |
<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>
</source>
Table frame
<source lang="html4strict">
<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>
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
<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>
</source>
Table rules
<source lang="html4strict">
<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>
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
<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>
Table width
<source lang="html4strict">
<html> <head> <script language="JavaScript">
function function1() {
document.getElementById("myTable").width = "300";
}
function function2() {
document.getElementById("myTable").width = "500";
}
</script> </head> <body>
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Cell 1 | Cell 2 | Cell 3 |
<input type="button" value="Change table width to 300px" onClick="function1();"> <input type="button" value="Restore table width to 500px" onClick="function2();"> </body> </html>
</source>
