目標Html代碼設計
無論WEB控件或者Javaｓｃｒｉｐｔ等等經過怎樣的處理，浏覽器最終都是依據HTML代碼來顯示文檔界面的，因此設計WEB控件，首先得設計WEB控件最終生成的Html代碼，也就是WEB控件的執行目標。
為了展現樹狀結構，業界已經設計出很多種HTML代碼格式。有使用DIV標簽的，有使用P標簽的，筆者這裡經過一些嘗試，決定采用TABLE標簽，使用表格套表格的方式來展現樹狀列表的層次結構。其設計的Html頁面范例如下。
培訓演示程序中有一個名為treevIEwsample.htm 的文件，其中就是這個樹狀列表的Html樣本。
這個演示HTML文檔中，展現節點“10359 成先生”及其子節點的Html代碼片段如下
<table cellspacing="0" cellpadding="0" border="1" bordercolor="black" width="187">
<tr>
<td valign="top" align="left" width="16" background="SkyTreeVIEwControl_line.gif"
height="16">
<img id="NodeID_expend" src="SkyTreeVIEwControl_expend.gif">
</td>
<td valign="top">
<img id="NodeID_icon" height="16" src="SkyTreeVIEwControl_open.bmp">
<a id="NodeID_text">10359 成先生</a>
<table id="NodeID_table" cellspacing="0" cellpadding="0" border="1" bordercolor="black">
<tr>
<td valign="top" align="left" width="16" height="16">
<img src="SkyTreeVIEwControl_child.gif">
</td>
<td valign="top" nowrap>
<img id="IDAIL4QC_icon" src="SkyTreeVIEwControl_default.bmp">
<a id="IDAIL4QC_text">餅干</a>
</td>
</tr>
<tr>
<td valign="top" align="left" width="16" height="16">
<img src="SkyTreeVIEwControl_child.gif">
</td>
<td valign="top" nowrap>
<img id="IDARL4QC_icon" src="SkyTreeVIEwControl_default.bmp">
<a id="IDARL4QC_text">花奶酪</a>
</td>
</tr>
<tr>
<td valign="top" align="left" width="16" height="16">
<img src="SkyTreeVIEwControl_lastchild.gif">
</td>
<td valign="top" nowrap>
<img id="IDAWL4QC_icon" src="SkyTreeVIEwControl_default.bmp">
<a id="IDAWL4QC_text">溫馨奶酪</a>
</td>
</tr>
</table>
</td>
</tr>
< /table>
