00421a.htm

网站项目设计的思考 经典

                <td valign=top>A</td>
                <td valign=center>B</td>
                <td valign=bottom>C</td>
              </tr>
              </tbody> 
            </table>
            <p><span class="sfont">　2.表格在页面内的对齐。</span></p>
            <p><span class="sfont">如果你需要与表格并排放一段文字，就需要用到table标签的另一个个参数：</span></p>
            <p><span class="sfont">&lt;table align=＃&gt; 其中#可以设定为left(居左)，right(居右)</span></p>
            <p><span class="sfont">例如：</span></p>
            <p><span class="sfont"><font color=#008080>&lt;table align="left" 
              border &gt;<br>
              &lt;tr&gt;&lt;th&gt;1&lt;/th&gt;&lt;th&gt;2&lt;/th&gt;&lt;th&gt;3&lt;/th&gt;<br>
              &lt;tr&gt;&lt;td&gt;A&lt;/td&gt;&lt;td&gt;B&lt;/td&gt;&lt;td&gt;C&lt;/td&gt;<br>
              &lt;/table&gt;<br>
              这里的文字&lt;br&gt;<br>
              是和表格并排排放的</font></span></p>
            <p><span class="sfont">　 </span>
            <table align=left border=1>
              <tbody> 
              <tr> 
                <th>1</th>
                <th>2</th>
                <th>3</th>
              <tr> 
                <td>A</td>
                <td>B</td>
                <td>C</td>
              </tr>
              </tbody> 
            </table>
            <span class="sfont">这里的文字<br>
            是和表格并排排放的<br>
            </span> 
            <p><span class="sfont">&nbsp;&nbsp;&nbsp;&nbsp; ●表格的嵌套</span></p>
            <p><span class="sfont">　　表格嵌套就是在表格里插入表格，嵌套的排版方法就是将要插入的表格当做文字来处理<br>
              同样使用&lt;td align=#&gt;语句。</span></p>
            <p><span class="sfont">例如：</span></p>
            <p><span class="sfont"><font color=#008080>&lt;table border width=200 
              height=100&gt;&nbsp;<br>
              &lt;tr&gt; &lt;td valign="top" &gt;&nbsp;<br>
              &lt;table border&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br>
              &lt;/td&gt;&lt;td valign="bottom"&gt;<br>
              &lt;table border&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br>
              &lt;/td&gt;&lt;/tr&gt;<br>
              &lt;/table&gt;</font></span></p>
            <p> 
            <table border=1 height=100 width=200>
              <tbody> 
              <tr> 
                <td valign=top> 
                  <table border=1>
                    <tbody> 
                    <tr> 
                      <td></td>
                    </tr>
                    </tbody> 
                  </table>
                </td>
                <td valign=bottom> 
                  <table border=1>
                    <tbody> 
                    <tr> 
                      <td></td>
                    </tr>
                    </tbody> 
                  </table>
                </td>
              </tr>
              </tbody> 
            </table>
            <p><span class="sfont">　&nbsp; ●表格的色彩</span></p>
            <p><span class="sfont">表格的色彩也在&lt;table&gt;标签里设置，参数有：</span></p>
            <p><span class="sfont">bgcolor&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
              背景颜色<br>
              bordercolor&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 边框颜色<br>
              bordercolorlight&nbsp; 立体边框亮色<br>
              bordercolordark&nbsp;&nbsp; 立体边框暗色&nbsp;</span></p>
            <p><span class="sfont">语法为：&lt;table bgcolor="#RRGGBB"&gt;其中RRGGBB分别为RGB三色的16进制数值</span></p>
            <p><span class="sfont">例如：<br>
              <font color=#008080>&lt;table width=100 border bgColor=#a9d7fb&nbsp;<br>
              borderColorDark=#ffffff borderColorLight=#000000 cellPadding=5&nbsp;<br>
              cellSpacing=0 bordercolorlight="#000000"&gt;<br>
              &lt;tr&gt;&lt;td bgColor=#FFE084&gt;&lt;/td&gt;<br>
              &lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;</font></span></p>
            <p> 
            <table bgcolor=#a9d7fb border=1 bordercolordark=#ffffff 
      bordercolorlight=#000000 cellpadding=5 cellspacing=0 width=100>
              <tbody> 
              <tr> 
                <td bgcolor=#ffe084></td>
              </tr>
              <tr> 
                <td height="2"></td>
              </tr>
              </tbody> 
            </table>
            <span class="sfont"><br clear=all>
            </span> 
            <p><span class="sfont">　　以上是表格的基本用法。现在frngtpage,dreamweaver等所见即所得的网页编辑软件都不用编写代码，就可以轻松的实现表格的排版和嵌套，但是掌握一些基本语法，关键时刻还是很有用处的。</span></p>
            <p><span class="sfont">&nbsp; <a name=表格的运用技巧>二</a>.<a name=○表格的运用技巧>表格运用的注意点</a></span></p>
            <p><span class="sfont">　　表格的嵌套并不是表格处理最困难的地方，无论多复杂的版面，悉心琢磨一番总能找到解决的办法。<br>
              我们需要考虑的是：</span></p>
            <p><span class="sfont">　　○用什么样的嵌套排版方式使网页的下载速度达到最快。</span></p>
            <p><span class="sfont">　　我们知道：浏览器在读取网页html原代码时，是读完整一个table再将它显示出来。也就是说从&lt;table&gt;标签开始，要读到&lt;/table&gt;标签时，才将表格中的内容显示在屏幕上。而且显示也有优先级，先读到的先显示。这样的话，如果一个大表格中含有多个子表格，必须等大表格读完，才能将子表格一起显示出来。</span></p>
            <p><span class="sfont">　　我们在访问一些站点时，等待多时无结果，按"停止"按钮却一下显示出页面就是这个原因。</span></p>
            <p><span class="sfont">　　因此，我们在设计页面表格的时候，应该做到：</span></p>
            <p><span class="sfont">　　1.整个页面不要都套在一个表格里，尽量拆分成多个表格;<br>
              &nbsp;&nbsp;&nbsp; 2.单一表格的结构尽量整齐；<br>
              &nbsp;&nbsp;&nbsp; 3.表格嵌套层次尽量要少.</span></p>
            <p><span class="sfont">　　实验证明：越复杂，嵌套层次越多的表格下载速度越慢。</span></p>
            <p><span class="sfont">&nbsp;&nbsp;&nbsp; 关于网页的表格设计今天就写到这里。阿捷没有很多的技巧提供，关键在于您自己的实践和运用，还是那句古话：“熟能生巧”。</span></p>
            <p>　</p>
            <p align=center><a 
      href="00420a.htm">上一篇</a>　<a href="00424a.htm">下一篇</a></p>
            <p align=center><span class="sfont"><a href="index3.htm">[返回]</a></span></p>
            </td>
          <td width="2%"></td>
        </tr>
        <tr> 
          <td width="2%"></td>
          <td width="2%"></td>
        </tr>
        <tr> 
          <td width="2%"></td>
          <td width="2%"></td>
        </tr>
        <tr> 
          <td width="2%" height="2697"></td>
          <td width="2%" height="2697"></td>
        </tr>
        </tbody> 
      </table>
      <!-- #EndEditable -->
<table width="100%" border="0">
        <tr class="sfont"> 
          <td> 
            <div align="center"><a href="javascript:history.go(-1)">[返回]</a> </div>
          </td>
        </tr>
      </table>      
    </td>
  </tr>
</table>
<hr noshade size="2" width="760">
<p align="center"> 
    <script language="JavaScript" src="/pcedu/script/title_edu.js">
</script>
    <br>
    版权所有&copy;2000 太平洋电脑网<br>
    <font face="Arial, Helvetica, sans-serif"><a href=mailto:[e-mail]> 
    <script>
document.write("<a href=http://best.netease.com/cgi-bin/view/viewbasic.cgi?exp target=_blank><img src=http://best.netease.com/cgi-bin/log.cgi?user=exp&refer="+escape(document.referrer)+"&cur="+escape(document.URL)+" border=0 alt='网易中文排行榜' width=1 height=1></a>");
</script>
    </a></font><font face="Arial, Helvetica, sans-serif"><a href=mailto:[e-mail]>[e-mail] 
    <script language="">document.write("<a href=http://best.netease.com/cgi-bin/view/viewbasic.cgi?pconline1 target=_blank><img src=http://best.netease.com/cgi-bin/log.cgi?user=pconline1&refer="+escape(document.referrer)+"&cur="+escape(document.URL)+" border=0 width=1 height=1 ></a>");</script>
    </a> 
    <script language="">
document.write("<a href=http://www0.pconline.com.cn:8810/pccount/index.php target=_blank><img src=http://www0.pconline.com.cn:8810/cgi-bin/test.cgi?user=pcedu&refer="+escape(document.referrer)+"&cur="+escape(document.URL)+" border=0 width=0 height=0 alt='' ></a>");
</script>
    </font></p> 
</body>
<!-- #EndTemplate --></html>