Table与Div经验

最近做了个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 onclick="ChangeControlState('Dot')" src="../../Images/select.jpg" border="0" alt="选择" title="选择"/>
                        </td>
                        <td height="26px" width="26px" align="center" valign="middle">
                            <img onclick="ChangeControlState('ZoomBox')" src="../../Images/selectZoomout.gif" border="0" alt="框选放大" title="框选放大" />
                        </td>
                        <td height="26px" width="26px" align="center" valign="middle">
                            <img onclick="doScale(1)" src="../../Images/zoomout24.gif" border="0" alt="中心放大" title="中心放大" />
                        </td>
                         <td height="26px" width="26px" align="center" valign="middle">
                            <img onclick="doScale(-1)" src="../../Images/zoomIn.gif" border="0" alt="中心缩小" title="中心缩小" />
                        </td>
                        <td height="26px" width="26px" align="center" valign="middle">
                            <img onclick="ChangeControlState('PanMove')" src="../../Images/PanMove.gif" border="0" alt="地图拖动" title="拖动" />
                        </td>
                         <td height="26px" width="26px" align="center" valign="middle">
                            <img onclick="doLocalBase()" src="../../Images/all.gif" border="0" alt="显示全图" title="全图" />
                        </td>
                        <td height="26px" width="26px" align="center" valign="middle">
                            <img onclick="doGetPointCoor()" src="../../Images/showcoord.gif" border="0" alt="显示坐标" title="显示坐标" />
                        </td>
                        <td height="26px" width="26px" align="center" valign="middle">
                            <img onclick="doGetLineLength()" src="../../Images/m_length.gif" border="0" alt="测量长度" title="测量长度" />
                        </td>
                         <td height="26px" width="26px" align="center" valign="middle">
                            <img onclick="goWest()" src="../../Images/left.gif" border="0" alt="左移" title="左移" />
                        </td>
                        <td height="26px" width="26px" align="center" valign="middle">
                            <img onclick="goEast()" src="../../Images/right.gif" border="0" alt="右移" title="右移" />
                        </td>
                        <td height="26px" width="26px" align="center" valign="middle">
                            <img onclick="goNorth()" src="../../Images/top.gif" border="0" alt="上移" title="上移" />
                        </td>
                        <td height="26px" width="26px" align="center" valign="middle">
                            <img onclick="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 onclick="ChangeControlState('Dot')" src="../../Images/select.jpg" border="0" alt="选择" title="选择"/></li>
        <li><img onclick="ChangeControlState('ZoomBox')" src="../../Images/selectZoomout.gif" border="0" alt="框选放大" title="框选放大" /></li>
        <li><img onclick="doScale(1)" src="../../Images/zoomout24.gif" border="0" alt="中心放大" title="中心放大" /></li>
        <li><img onclick="doScale(-1)" src="../../Images/zoomIn.gif" border="0" alt="中心缩小" title="中心缩小" /></li>
        <li><img onclick="ChangeControlState('PanMove')" src="../../Images/PanMove.gif" border="0" alt="地图拖动" title="拖动" /></li>
        <li><img onclick="doLocalBase()" src="../../Images/all.gif" border="0" alt="显示全图" title="全图" /></li>
        <li><img onclick="doGetPointCoor()" src="../../Images/showcoord.gif" border="0" alt="显示坐标" title="显示坐标" /></li>
        <li><img onclick="doGetLineLength()" src="../../Images/m_length.gif" border="0" alt="测量长度" title="测量长度" /></li>
        <li><img onclick="goWest()" src="../../Images/left.gif" border="0" alt="左移" title="左移" /></li>
        <li><img onclick="goEast()" src="../../Images/right.gif" border="0" alt="右移" title="右移" /></li>
        <li><img onclick="goNorth()" src="../../Images/top.gif" border="0" alt="上移" title="上移" /></li>
        <li><img onclick="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>

 

下面的比上面的快