mirror of
https://github.com/rn10950/RetroZilla.git
synced 2024-11-09 09:20:15 +01:00
107 lines
3.3 KiB
HTML
107 lines
3.3 KiB
HTML
|
<!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>
|