JavaScript DHTML/Table/Caption
Содержание
Caption Vertical Align
<html>
<body>
<table width="200" border="8" cellspacing="5" cellpadding="5" align="left">
<caption id="myCaption" style="color:red;">
Table 2-5. This is the caption for this table.
</caption>
<script language="JavaScript">
document.all.myCaption.vAlign = "bottom";
</script>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</body>
</html>
Create a Caption
<html>
<body>
<script language="JavaScript">
function function1() {
var myC = document.getElementById("myT").createCaption();
myC.innerText = "This is the new caption text";
}
</script>
<table id="myT" border="3" cellpadding="5" style="border-color:blue">
<tr>
<th>This table has no caption</th>
</tr>
</table>
<input id="myT" type="button" value="Add caption" onclick="function1();">
</body>
</html>
Delete a Caption
<html>
<body>
<script language="JavaScript">
function function1() {
document.all.myT.deleteCaption();
}
</script>
<table id="myT">
<caption id = myC style="color:red">This is the caption element</caption>
<tr>
<th>Cell 1</th>
<th>Cell 2</th>
</tr>
</table>
<input type="button" value="Remove caption" onclick="function1();">
</body>
</html>
Get caption from table object
<html>
<body id="myBody">
<table id="myTable" width="600" caption="This is the Caption" border="1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
<button onclick="alert(document.all.myTable.caption);">Table Caption</button>
</body>
</html>
Table Caption align Example
<html>
<head>
<script language="JavaScript">
function function1() {
document.all.myCaption.align = event.srcElement.id;
}
</script>
</head>
<body>
<table id="myTable" width="560" border="8" cellspacing="5" cellpadding="5">
<caption id="myCaption">This is the caption text for the table</caption>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
<br>
<input type="Button" id="bottom" value="align "bottom"" onClick="function1();">
<input type="Button" id="left" value="align "left"" onClick="function1();">
<input type="Button" id="right" value="align "right"" onClick="function1();">
<input type="Button" id="top" value="align "top"" onClick="function1();">
</body>
</html>