1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<head>
<Script>
function doIt() {
var caption = document.getElementById("caption1");
var text = document.createTextNode("foo foo");
caption.appendChild(text);
var caption = document.getElementById("caption2");
var text = document.createTextNode("very_large_very_large");
caption.appendChild(text);
var caption = document.getElementById("caption3");
var input = document.getElementById("input3");
caption.removeChild(input);
var cell = document.getElementById("td17");
var text = document.createTextNode("foo foo");
cell.appendChild(text);
var rg = document.getElementById("tbody6");
var row = document.createElement("tr", null);
var cell = document.createElement("td", null);
var text = document.createTextNode("foo foo");
cell.appendChild(text);
row.appendChild(cell);
rg.appendChild(row);
var table = document.getElementById("table7");
var cap = document.createElement("CAPTION", null);
var text = document.createTextNode("new cap");
cap.appendChild(text);
table.appendChild(cap);
var table = document.getElementById("table8");
var cap = document.getElementsById("caption8");
table.removeChild(cap);
}
</SCRIPT>
<style type="text/css">
table { border: 10px solid green; }
caption {
border: medium solid purple;
caption-side: bottom;
}
table.one { margin-left:5px; margin-top:10px; margin-bottom:5px}
table.one caption { margin-left:10px; margin-top: 2px; }
</style>
</head>
<body onload="doIt()">
<center>bottom caption tests</center>
table 1 - original
<table class="one">
<caption>caption<input type=radio></caption>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
</table>
table 2 - caption gains content
<table class="one">
<caption id="caption1">caption<input type=radio></caption>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
</table>
table 3 - caption gains content extending its max element size
<table class="one">
<caption id="caption2">caption<input type=radio></caption>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
</table>
table 4 - caption loses content
<table class="one">
<caption id="caption3">caption<input id="input3" type=radio></caption>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
</table>
table 5 - table gets wider
<table class="one">
<caption>caption<input type=radio></caption>
<tr><td id="td17">Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
</table>
table 6 - table gets taller
<table class="one">
<tbody id="tbody6">
<caption>caption<input type=radio></caption>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
</tbody>
</table>
table 7 - insert caption
<table id="table7" class="one">
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
</table>
table 8 - remove caption
<table id="table8" class="one">
<caption id="caption8">caption<input type=radio></caption>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
</table>
</body></html>
|
