<html>
<head>
<title>createCaption() test</title>
<script type="text/javascript">

function captionfruit() {
    var x = document.getElementById('fruitTable').createCaption()
    x.innerHTML="<b>Fruity</b>"
}

function captionveggie() {
    var x = document.getElementById('veggieTable').createCaption()
    x.innerHTML="<b>Vegetabley</b>"
}
</script>
</head>

<body onload = "captionfruit(); captionveggie()">
<p>Tests: the TABLE.createCaption() method<br>
</p>
<p>Conditions:<br>
If no caption exists, the method should create an empty caption, add it to the table, and return a pointer to it. 
If a caption does exist, the method should return a pointer to it.
</p>

<p>If successful, the first table should have the caption <b>Fruity</b>, and the second table should have the caption
<b>Vegetabley</b>. Upon failure, the first table will have no caption, and the second table will have the caption
Things.
</p>
<hr>
	
<table id="fruitTable" border="1">
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
</tr>
<tr>
<td>Grape</td>
<td>Purple</td>
</tr>
</table>

<br>

<table id="veggieTable" border="1">
<caption> Things </caption>
<tr>
<th>Vegetable</th>
<th>Color</th>
</tr>
<tr>
<td>Carrot</td>
<td>Orange</td>
</tr>
<tr>
<td>Cucumber</td>
<td>Green</td>
</tr>
</table>

</body>
</html>
  
