<tr> 
<td class="tdLabel"></td>
<td>
<script language="javascript" src="/struts/optiontransferselect.js"></script>
<table border="0">
<tr>
<td>
	<label for="leftTitle">Title Left</label><br/>
	<select name="collection" size="20" id="id" multiple="multiple">
    	<option value="Header Key">Header Value</option>
    	<option value=""></option>
    	<option value="Left1">Left1</option>
    	<option value="Left2" selected="selected">Left2</option>
    	<option value="Left3">Left3</option>
	</select> 
	<input type="button" onclick="moveOptionDown(document.getElementById('id'), 'key', 'Header Key');" value="v" />
	<input type="button" onclick="moveOptionUp(document.getElementById('id'), 'key', 'Header Key');" value="^" />
</td>
<td valign="middle" align="center">
	<input type="button" class="buttonCssClass" style="buttonCssStyle"
			value="Left" onclick="moveSelectedOptions(document.getElementById('doubleId'), document.getElementById('id'), false, 'Double Header Key', '')" /><br/><br/>
	<input type="button" class="buttonCssClass" style="buttonCssStyle"
			value="Right" onclick="moveSelectedOptions(document.getElementById('id'), document.getElementById('doubleId'), false, 'Header Key', '')" /><br/><br/>
</td> 
<td>
	<label for="rightTitle">Title Right</label><br/>
	<select 
		name="list2"
		size="20"		
		multiple="multiple"
		id="doubleId"
	>
    	<option value="Double Header Key">Double Header Value</option>
    	<option value=""></option>
    	<option value="Right1">Right1</option>
    	<option value="Right2" selected="selected">Right2</option>
    	<option value="Right3">Right3</option>
	</select>
	<input type="button" onclick="moveOptionDown(document.getElementById('doubleId'), 'key', 'Double Header Key');" value="v" />
	<input type="button" onclick="moveOptionUp(document.getElementById('doubleId'), 'key', 'Double Header Key');" value="^" />
</td>
</tr>
</table>
</td>
</tr>