| <!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.getElementsByTagName("CAPTION")[1]; |
| var text = document.createTextNode("foo foo"); |
| caption.appendChild(text); |
| |
| var caption = document.getElementsByTagName("CAPTION")[2]; |
| var text = document.createTextNode("very_large_very_large"); |
| caption.appendChild(text); |
| |
| var caption = document.getElementsByTagName("CAPTION")[3]; |
| var input = document.getElementsByTagName("INPUT")[3]; |
| caption.removeChild(input); |
| |
| var cell = document.getElementsByTagName("TD")[17]; |
| var text = document.createTextNode("foo foo"); |
| cell.appendChild(text); |
| |
| var rg = document.getElementsByTagName("TBODY")[5]; |
| 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.getElementsByTagName("TABLE")[6]; |
| var cap = document.createElement("CAPTION", null); |
| var text = document.createTextNode("new cap"); |
| cap.appendChild(text); |
| table.appendChild(cap); |
| |
| var table = document.getElementsByTagName("TABLE")[7]; |
| var cap = document.getElementsByTagName("CAPTION")[7]; |
| table.removeChild(cap); |
| |
| |
| } |
| </SCRIPT> |
| <style type="text/css"> |
| table { border: 10px solid green; } |
| caption { |
| border: medium solid purple; |
| caption-side: top; |
| } |
| |
| 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>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>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>caption<input 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>Data</td><td>Data</td></tr> |
| <tr><td>Data</td><td>Data</td></tr> |
| </table> |
| table 6 - table gets taller |
| <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 7 - insert caption |
| <table class="one"> |
| <tr><td>Data</td><td>Data</td></tr> |
| <tr><td>Data</td><td>Data</td></tr> |
| </table> |
| table 8 - remove caption |
| <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> |
| </body></html> |
