| <!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.getElementById("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> |
