最近做了个web系统,通过使用table与div比较发现:
1、布局时使用table加载时速度慢,推荐使用div
2、当显示的数据的时候,使用table
原先:
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td height="26px" width="26px" align="center" valign="middle">
<img οnclick="ChangeControlState('Dot')" src="../../Images/select.jpg" border="0" alt="选择" title="选择"/>
</td>
<td height="26px" width="26px" align="center" valign="middle">
<img οnclick="ChangeControlState('ZoomBox')" src="../../Images/selectZoomout.gif" border="0" alt="框选放大" title="框选放大" />
</td>
<td height="26px" width="26px" align="center" valign="middle">
<img οnclick="doScale(1)" src="../../Images/zoomout24.gif" border="0" alt="中心放大" title="中心放大" />
</td>
<td height="26px" width="26px" align="center" valign="middle">
<img οnclick="doScale(-1)" src="../../Images/zoomIn.gif" border="0" alt="中心缩小" title="中心缩小" />
</td>
<td height="26px" width="26px" align="center" valign="middle">
<img οnclick="ChangeControlState('PanMove')" src="../../Images/PanMove.gif" border="0" alt="地图拖动" title="拖动" />
</td>
<td height="26px" width="26px" align="center" valign="middle">
<img οnclick="doLocalBase()" src="../../Images/all.gif" border="0" alt="显示全图" title="全图" />
</td>
<td height="26px" width="26px" align="center" valign="middle">
<img οnclick="doGetPointCoor()" src="../../Images/showcoord.gif" border="0" alt="显示坐标" title="显示坐标" />
</td>
<td height="26px" width="26px" align="center" valign="middle">
<img οnclick="doGetLineLength()" src="../../Images/m_length.gif" border="0" alt="测量长度" title="测量长度" />
</td>
<td height="26px" width="26px" align="center" valign="middle">
<img οnclick="goWest()" src="../../Images/left.gif" border="0" alt="左移" title="左移" />
</td>
<td height="26px" width="26px" align="center" valign="middle">
<img οnclick="goEast()" src="../../Images/right.gif" border="0" alt="右移" title="右移" />
</td>
<td height="26px" width="26px" align="center" valign="middle">
<img οnclick="goNorth()" src="../../Images/top.gif" border="0" alt="上移" title="上移" />
</td>
<td height="26px" width="26px" align="center" valign="middle">
<img οnclick="goSouth()" src="../../Images/bottom.gif" border="0" alt="下移" title="下移" />
</td>
<td style="width:30px">放大</td>
<td>
<asp:DropDownList ID="DropDownListLocal" runat="server">
<asp:ListItem Value="0.7">0.5</asp:ListItem>
<asp:ListItem Value="1" Selected="True">1</asp:ListItem>
<asp:ListItem Value="1.41421">2</asp:ListItem>
<asp:ListItem Value="1.73205">3</asp:ListItem>
<asp:ListItem Value="2">4</asp:ListItem>
<asp:ListItem Value="2.23607">5</asp:ListItem>
<asp:ListItem Value="2.44949">6</asp:ListItem>
<asp:ListItem Value="2.64575">7</asp:ListItem>
<asp:ListItem Value="2.82843">8</asp:ListItem>
<asp:ListItem Value="3">9</asp:ListItem>
<asp:ListItem Value="3.16228">10</asp:ListItem>
<asp:ListItem Value="4">16</asp:ListItem>
<asp:ListItem Value="5">25</asp:ListItem>
<asp:ListItem Value="6">36</asp:ListItem>
<asp:ListItem Value="7">49</asp:ListItem>
<asp:ListItem Value="8">64</asp:ListItem>
<asp:ListItem Value="9">81</asp:ListItem>
<asp:ListItem Value="10">100</asp:ListItem>
<asp:ListItem Value="15">225</asp:ListItem>
<asp:ListItem Value="1"></asp:ListItem>
</asp:DropDownList>
</td>
<td valign="middle" align="left">
<table style="height:90%;width:100%" border="0">
<tr>
<td style="width:28px">
<span id="sProgress" style="color:Red" name="sProgress">状态</span>
</td>
<td>
<table id="iProgress" style="height:100%;width:0%" border="0">
<tr>
<td bgcolor="#0000ff">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
修改后的
<div id="menucontainer">
<ul id="menu">
<li><img οnclick="ChangeControlState('Dot')" src="../../Images/select.jpg" border="0" alt="选择" title="选择"/></li>
<li><img οnclick="ChangeControlState('ZoomBox')" src="../../Images/selectZoomout.gif" border="0" alt="框选放大" title="框选放大" /></li>
<li><img οnclick="doScale(1)" src="../../Images/zoomout24.gif" border="0" alt="中心放大" title="中心放大" /></li>
<li><img οnclick="doScale(-1)" src="../../Images/zoomIn.gif" border="0" alt="中心缩小" title="中心缩小" /></li>
<li><img οnclick="ChangeControlState('PanMove')" src="../../Images/PanMove.gif" border="0" alt="地图拖动" title="拖动" /></li>
<li><img οnclick="doLocalBase()" src="../../Images/all.gif" border="0" alt="显示全图" title="全图" /></li>
<li><img οnclick="doGetPointCoor()" src="../../Images/showcoord.gif" border="0" alt="显示坐标" title="显示坐标" /></li>
<li><img οnclick="doGetLineLength()" src="../../Images/m_length.gif" border="0" alt="测量长度" title="测量长度" /></li>
<li><img οnclick="goWest()" src="../../Images/left.gif" border="0" alt="左移" title="左移" /></li>
<li><img οnclick="goEast()" src="../../Images/right.gif" border="0" alt="右移" title="右移" /></li>
<li><img οnclick="goNorth()" src="../../Images/top.gif" border="0" alt="上移" title="上移" /></li>
<li><img οnclick="goSouth()" src="../../Images/bottom.gif" border="0" alt="下移" title="下移" /></li>
<li>放大:</li>
<li>
<asp:DropDownList ID="DropDownListLocal" runat="server">
<asp:ListItem Value="0.7">0.5</asp:ListItem>
<asp:ListItem Value="1" Selected="True">1</asp:ListItem>
<asp:ListItem Value="1.41421">2</asp:ListItem>
<asp:ListItem Value="1.73205">3</asp:ListItem>
<asp:ListItem Value="2">4</asp:ListItem>
<asp:ListItem Value="2.23607">5</asp:ListItem>
<asp:ListItem Value="2.44949">6</asp:ListItem>
<asp:ListItem Value="2.64575">7</asp:ListItem>
<asp:ListItem Value="2.82843">8</asp:ListItem>
<asp:ListItem Value="3">9</asp:ListItem>
<asp:ListItem Value="3.16228">10</asp:ListItem>
<asp:ListItem Value="4">16</asp:ListItem>
<asp:ListItem Value="5">25</asp:ListItem>
<asp:ListItem Value="6">36</asp:ListItem>
<asp:ListItem Value="7">49</asp:ListItem>
<asp:ListItem Value="8">64</asp:ListItem>
<asp:ListItem Value="9">81</asp:ListItem>
<asp:ListItem Value="10">100</asp:ListItem>
<asp:ListItem Value="15">225</asp:ListItem>
<asp:ListItem Value="1"></asp:ListItem>
</asp:DropDownList>
</li>
</ul>
</div>
下面的比上面的快