<TABLE style="BORDER-RIGHT: #89959b 1px solid; BORDER-LEFT: #89959b 1px solid"
borderColor=#111111 cellSpacing=0 cellPadding=0 width=778 align=center
border=0><TBODY>
<TR>
<TD vAlign=top width=191> <BR>
<BR></TD>
<TD style="BORDER-LEFT: #cccccc 1px dotted" vAlign=top width=585
bgColor=#ffffff height=2>
<SCRIPT language=JavaScript>
<!--
function doZoom(size){
document.getElementById(´zoom´).style.fontSize=size+´pt´
}
// -->
</SCRIPT>
<TABLE id=AutoNumber1
style="TABLE-LAYOUT: fixed; BORDER-COLLAPSE: collapse" cellSpacing=0
cellPadding=0 width=578 align=center border=0>
<TBODY>
<TR>
<TD vAlign=center align=middle>
<P align=center><B></B><B>加入时间</B>：<FONT
color=#006699>2003-6-23</FONT> <STRONG>阅读次数:</STRONG><FONT
color=#000000><FONT color=#006699>7853
</FONT></FONT><STRONG>查看:</STRONG>[<A
href="javascript:doZoom(12)"><FONT color=#006699>大字</FONT></A> <A
href="javascript:doZoom(10.5)"><FONT color=#006699>中等</FONT></A> <A
href="javascript:doZoom(9)"><FONT color=#006699>还原</FONT></A>] <FONT
color=#000000><FONT color=#006699>
<SCRIPT language=JavaScript>
<!--
function click()
{
if (event.button==1)
{
if(document.all.auto.status==true){document.all.auto.status=false;}
scroller();
}
}
document.onmousedown=click
var position = 0;
function scroller()
{
if (document.all.auto.status==true)
{
position++;
scroll(0,position);
clearTimeout(timer);
var timer = setTimeout("scroller()",120);
timer;
}
else
{
clearTimeout(timer);
}
}
function Action(jsStr)
{
return eval(jsStr)
}
//--></SCRIPT>
<INPUT onclick="Action(´scroller();´)" type=checkbox value=on
name=auto> 自动滚屏[左键停止]</FONT></FONT>
<HR color=#cccccc SIZE=1>
</TD></TR>
<TR>
<TD class=button vAlign=center align=middle
height=16><STRONG>强烈推荐--魔鬼般的表格教材</STRONG></TD></TR>
<TR>
<TD vAlign=center align=right height=17><B>作者</B>：<FONT
color=#006699>Poorfish</FONT> </TD></TR>
<TR>
<TD id=zoom><BR>
<CENTER>
<TABLE cellSpacing=0 cellPadding=0 width=778 border=0>
<TBODY></TBODY></TABLE>
<TABLE height=30 cellSpacing=0 cellPadding=0 width=600 border=0>
<TBODY>
<TR>
<TD><B>一、表格中单元格之间分隔线的隐藏方法</B></TD></TR></TBODY></TABLE>
<TABLE class=t cellSpacing=0 cellPadding=8 width=600 border=0>
<TBODY>
<TR>
<TD width=220>
<TABLE cellSpacing=0 cellPadding=0 rules=cols width=200
border=1>
<TBODY>
<TR align=middle>
<TD>第</TD>
<TD>一</TD>
<TD>行</TD></TR>
<TR align=middle>
<TD>第</TD>
<TD>二</TD>
<TD>行</TD></TR>
<TR align=middle>
<TD>第</TD>
<TD>三</TD>
<TD>行</TD></TR></TBODY></TABLE></TD>
<TD width=380>这个表格去掉了单元格之间的纵向分隔线</TD></TR>
<TR>
<TD><BR>
<TABLE cellSpacing=0 cellPadding=0 rules=rows width=200
border=1>
<TBODY>
<TR align=middle>
<TD>第</TD>
<TD>第</TD>
<TD>第</TD></TR>
<TR align=middle>
<TD>一</TD>
<TD>二</TD>
<TD>三</TD></TR>
<TR align=middle>
<TD>列</TD>
<TD>列</TD>
<TD>列</TD></TR></TBODY></TABLE><BR></TD>
<TD>这个表格去掉了单元格之间的横向分隔线</TD></TR>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=0 rules=none width=200
border=1>
<TBODY>
<TR align=middle>
<TD>横</TD>
<TD> </TD>
<TD>线</TD></TR>
<TR align=middle>
<TD>竖</TD>
<TD> </TD>
<TD>线</TD></TR>
<TR align=middle>
<TD>都</TD>
<TD>没</TD>
<TD>了</TD></TR></TBODY></TABLE></TD>
<TD>这个表格去掉了单元格之间的纵向分隔线和横向分隔线</TD></TR>
<TR>
<TD colSpan=2>
<HR color=black SIZE=1>
其实上面的三个表格都有三行三列，隐藏分隔线的诀窍在于rules，察看这三个表格的源代码，我们可以看到<TABLE>标签中都有rules。
它有三个参数(cols,rows,none)，当rules=cols时，表格会隐藏纵向的分隔线，这样我们就只能看到表格的行；当rules=rows时，则
隐藏了横向的分隔线，这样我们只能看到表格的列；而当rules=none时，纵向分隔线和横向分隔线将全部隐藏。</TD></TR></TBODY></TABLE><BR><BR><BR>
<TABLE height=30 cellSpacing=0 cellPadding=0 width=600 border=0>
<TBODY>
<TR>
<TD><B>二、表格边框的隐藏</B></TD></TR></TBODY></TABLE>
<TABLE class=t cellSpacing=0 cellPadding=8 width=600 border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width=200 border=1>
<TBODY>
<TR align=middle>
<TD>普</TD>
<TD>表</TD></TR>
<TR align=middle>
<TD>通</TD>
<TD>格</TD></TR></TBODY></TABLE></TD>
<TD>这是一普通的表格</TD></TR>
<TR>
<TD><BR>
<TABLE cellSpacing=0 cellPadding=0 width=200 border=1
frame=above>
<TBODY>
<TR align=middle>
<TD>不怕</TD>
<TD>下雨</TD></TR>
<TR align=middle>
<TD> </TD>
<TD> </TD></TR></TBODY></TABLE><BR></TD>
<TD>只显示上边框</TD></TR>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width=200 border=1
frame=below>
<TBODY>
<TR>
<TD> </TD>
<TD> </TD></TR>
<TR>
<TD align=middle>下起雨来</TD>
<TD align=middle>该怎么办</TD></TR></TBODY></TABLE></TD>
<TD>只显示下边框</TD></TR>
<TR>
<TD><BR>
<TABLE cellSpacing=0 cellPadding=0 width=200 border=1
frame=vsides>
<TBODY>
<TR>
<TD align=middle>上不着天</TD>
<TD> </TD></TR>
<TR>
<TD> </TD>
<TD align=middle>下不着地</TD></TR></TBODY></TABLE><BR></TD>
<TD>只显示左、右边框</TD></TR>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width=200 border=1
frame=hsides>
<TBODY>
<TR>
<TD> </TD>
<TD align=middle>两边走开</TD></TR>
<TR>
<TD align=middle>老子姓王</TD>
<TD> </TD></TR></TBODY></TABLE></TD>
<TD>只显示上、下边框</TD></TR>
<TR>
<TD><BR>
<TABLE cellSpacing=0 cellPadding=0 width=200 border=1
frame=lhs>
<TBODY>
<TR>
<TD width=100>左右</TD>
<TD width=100> </TD></TR>
<TR>
<TD>为难</TD>
<TD> </TD></TR></TBODY></TABLE><BR></TD>
<TD>只显示左边框</TD></TR>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width=200 border=1
frame=rhs>
<TBODY>
<TR>
<TD width=100> </TD>
<TD align=right width=100>左右</TD></TR>
<TR>
<TD> </TD>
<TD align=right>为难</TD></TR></TBODY></TABLE></TD>
<TD>只显示右边框</TD></TR>
<TR>
<TD><BR>
<TABLE cellSpacing=0 cellPadding=0 width=200 border=1
frame=void>
<TBODY>
<TR>
<TD align=right>光秃秃</TD>
<TD> </TD></TR>
<TR>
<TD> </TD>
<TD align=left>全脱了</TD></TR></TBODY></TABLE></TD>
<TD>不显示任何边框</TD></TR>
<TR>
<TD colSpan=2>
<HR color=black SIZE=1>
表格边框的显示与隐藏，是可以用frame参数来控制的。请注意它只控制表格的边框图，而不影晌单元格。<BR>只显示上边框
<table frame=above><BR>只显示下边框 <table frame=below>
<BR>只显示左、右边框 <table frame=vsides><BR>只显示上、下边框 <table
frame=hsides><BR>只显示左边框 <table frame=lhs><BR>只显示右边框
<table frame=rhs><BR>不显示任何边框 <table
frame=void></TD></TR></TBODY></TABLE>
<P> </P>
<TABLE height=30 cellSpacing=0 cellPadding=0 width=600 border=0>
<TBODY>
<TR>
<TD><B>三、表格边框</B></TD></TR></TBODY></TABLE>
<TABLE class=t cellSpacing=0 cellPadding=8 width=600 border=0>
<TBODY>
<TR vAlign=top>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width=200 border=1>
<TBODY>
<TR align=middle>
<TD>普</TD>
<TD>表</TD></TR>
<TR align=middle>
<TD>通</TD>
<TD>格</TD></TR></TBODY></TABLE>这是一普通的表格</TD>
<TD><TEXTAREA name=textfield rows=4 wrap=VIRTUAL cols=40><table border="1" width="200" cellpadding="0" cellspacing="0">
<tr align="center">
<td>普</td>
<td>表</td>
</tr>
<tr align="center">
<td>通</td>
<td>格</td>
</tr>
</table></TEXTAREA> </TD></TR>
<TR vAlign=top>
<TD>
<TABLE cellSpacing=1 cellPadding=0 width=200 bgColor=#000000
border=0>
<TBODY>
<TR align=middle bgColor=#ffffff>
<TD bgColor=#ffffff>细</TD>
<TD bgColor=#ffffff>表</TD></TR>
<TR align=middle bgColor=#ffffff>
<TD bgColor=#ffffff>线</TD>
<TD
bgColor=#ffffff>格</TD></TR></TBODY></TABLE>表格加上了漂亮的细线<BR>(利用cellspacing1像素间隙和表格与单元格背景的不同)</TD>
<TD><TEXTAREA name=textarea rows=4 wrap=VIRTUAL cols=40><table border="0" width="200" cellspacing="1" cellpadding="0" bgcolor="#000000" >
<tr align="center" bgcolor="#FFFFFF">
<td bgcolor="#FFFFFF">细</td>
<td bgcolor="#FFFFFF">表</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td bgcolor="#FFFFFF">线</td>
<td bgcolor="#FFFFFF">格</td>
</tr>
</table></TEXTAREA> </TD></TR>
<TR vAlign=top>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width=200>
<TBODY>
<TR align=middle>
<TD
style="BORDER-RIGHT: rgb(0,0,0) 1px groove; BORDER-TOP: rgb(0,0,0) 1px groove; BORDER-LEFT: rgb(0,0,0) 1px groove; BORDER-BOTTOM: rgb(0,0,0) 1px groove">细</TD>
<TD
style="BORDER-RIGHT: rgb(0,0,0) 1px groove; BORDER-TOP: rgb(0,0,0) 1px groove; BORDER-BOTTOM: rgb(0,0,0) 1px groove">表</TD></TR>
<TR align=middle>
<TD
style="BORDER-RIGHT: rgb(0,0,0) 1px groove; BORDER-LEFT: rgb(0,0,0) 1px groove; BORDER-BOTTOM: rgb(0,0,0) 1px groove">线</TD>
<TD
style="BORDER-RIGHT: rgb(0,0,0) 1px groove; BORDER-BOTTOM: rgb(0,0,0) 1px groove">格</TD></TR></TBODY></TABLE>这和上面那个可不一样，它用的是CSS，效果却一样。<BR>(对单元格border的定义)</TD>
<TD><TEXTAREA name=textarea2 rows=4 wrap=VIRTUAL cols=40><table width="200" cellspacing="0" cellpadding="0">
<tr align="center">
<td style="BORDER-top: rgb(0,0,0) 1px groove; BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-left: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove">细</td>
<td style="BORDER-top: rgb(0,0,0) 1px groove; BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove">表</td>
</tr>
<tr align="center">
<td style="BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-left: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove">线</td>
<td style="BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove">格</td>
</tr>
</table></TEXTAREA> </TD></TR>
<TR vAlign=top>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width=200>
<TBODY>
<TR align=middle>
<TD
style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-TOP: rgb(0,0,0) 1px dotted; BORDER-LEFT: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">细</TD>
<TD
style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-TOP: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">表</TD></TR>
<TR align=middle>
<TD
style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-LEFT: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">线</TD>
<TD
style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">格</TD></TR></TBODY></TABLE>再进一步，把边框变成虚线，同样是CSS的神奇作用。</TD>
<TD><TEXTAREA name=textarea2 rows=4 wrap=VIRTUAL cols=40><table width="200" cellspacing="0" cellpadding="0">
<tr align="center">
<td style="BORDER-top: rgb(0,0,0) 1px dotted; BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-left: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">细</td>
<td style="BORDER-top: rgb(0,0,0) 1px dotted; BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">表</td>
</tr>
<td style="BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-left: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">线</td>
<td style="BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">格</td>
</tr>
</table></TEXTAREA> </TD></TR>
<TR vAlign=top>
<TD>
<TABLE cellSpacing=2 cellPadding=0 width=200 border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=1 cellPadding=0 width="100%"
bgColor=#000000 border=0>
<TBODY>
<TR>
<TD bgColor=#ffffff> </TD></TR></TBODY></TABLE></TD>
<TD>
<TABLE cellSpacing=1 cellPadding=0 width="100%"
bgColor=#000000 border=0>
<TBODY>
<TR>
<TD
bgColor=#ffffff> </TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD>
<TABLE cellSpacing=1 cellPadding=0 width="100%"
bgColor=#000000 border=0>
<TBODY>
<TR>
<TD bgColor=#ffffff> </TD></TR></TBODY></TABLE></TD>
<TD>
<TABLE cellSpacing=1 cellPadding=0 width="100%"
bgColor=#000000 border=0>
<TBODY>
<TR>
<TD
bgColor=#ffffff> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>细线表格的扩展应用，奥妙就是在第个单元格中再套入一个表格。</TD>
<TD><TEXTAREA name=textarea3 rows=4 wrap=VIRTUAL cols=40><table width="200" border="0" cellspacing="2" cellpadding="0">
<tr>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000">
<tr>
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
</td>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000">
<tr>
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000">
<tr>
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
</td>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000">
<tr>
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
</td>
</tr>
</table></TEXTAREA> </TD></TR>
<TR vAlign=top>
<TD>
<TABLE cellSpacing=0 borderColorDark=#ffffff cellPadding=0
width=200 borderColorLight=#ffffff border=1>
<TBODY>
<TR align=middle>
<TD borderColorLight=#000000 bgColor=#b7b7b7
borderColorDark=#eeeeee>立</TD>
<TD borderColorLight=#000000 bgColor=#b7b7b7
borderColorDark=#eeeeee>表</TD></TR>
<TR align=middle>
<TD borderColorLight=#000000 bgColor=#b7b7b7
borderColorDark=#eeeeee>体</TD>
<TD borderColorLight=#000000 bgColor=#b7b7b7
borderColorDark=#eeeeee>格</TD></TR></TBODY></TABLE>立体感的表格<BR>(简单的亮暗边框设置，注意只有IE支持这种效果)</TD>
<TD><TEXTAREA name=textarea4 rows=4 wrap=VIRTUAL cols=40><table border="1" bordercolorlight="#ffffff" bordercolordark="#ffffff" width="200" cellpadding="0" cellspacing="0">
<tr align="center">
<td bgcolor="#B7B7B7"
bordercolorlight="#000000" bordercolordark="#eeeeee" >立</td>
<td bgcolor="#B7B7B7"
bordercolorlight="#000000" bordercolordark="#eeeeee" >表</td>
</tr>
<tr align="center">
<td bgcolor="#B7B7B7"
bordercolorlight="#000000" bordercolordark="#eeeeee" >体</td>
<td bgcolor="#B7B7B7"
bordercolorlight="#000000" bordercolordark="#eeeeee" >格</td>
</tr>
</table></TEXTAREA> </TD></TR>
<TR vAlign=top>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width=200>
<TBODY>
<TR>
<TD>
<FIELDSET style="WIDTH: 200px" align=center><LEGEND>无名表格
</LEGEND>
<P
align=right></P></FIELDSET></TD></TR></TBODY></TABLE>给表格加上一个表头<BR>(应用<fieldset>和</legend>标签)</TD>
<TD><TEXTAREA name=textarea5 rows=4 wrap=VIRTUAL cols=40><table width="200" cellpadding="0" cellspacing="0">
<tr>
<td><fieldset style="width:200" align="center"> <legend> 无名表格 </legend>
<p align="right">
</fieldset></td>
</tr>
</table></TEXTAREA> </TD></TR>
<TR vAlign=top>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width=200 ?>
<TBODY>
<TR>
<TD>
<FIELDSET
style="WIDTH: 200px; COLOR: #b7b7b7; BORDER-TOP-STYLE: groove; BORDER-RIGHT-STYLE: groove; BORDER-LEFT-STYLE: groove; BORDER-BOTTOM-STYLE: groove"
align=center><LEGEND
style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; COLOR: blue; BORDER-BOTTOM: #000000 1px solid">表中表效果Ⅰ</LEGEND><BR></FIELDSET>
</TD></TR></TBODY></TABLE>给表头再加个框<BR>(用CSS为<legnd>定义一个边框)</TD>
<TD><TEXTAREA name=textarea6 rows=4 wrap=VIRTUAL cols=40><table width="200"" cellspacing="0" cellpadding="0">
<tr>
<td>
<fieldset style="width: 200; color: #B7B7B7; border-style: groove" align="center">
<legend style="color: blue; border: 1 solid #000000"> 表中表效果Ⅰ</legend>
<br>
</fieldset>
</td>
</tr>
</table></TEXTAREA> </TD></TR>
<TR vAlign=top>
<TD>
<TABLE width=200>
<TBODY>
<TR>
<TD>
<FIELDSET style="WIDTH: 200px" align=center><LEGEND>
<TABLE
style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid"
height=20 cellSpacing=1 cellPadding=0 width=80>
<TBODY>
<TR>
<TD><FONT
color=blue>表中表效果Ⅱ</FONT></TD></TR></TBODY></TABLE></LEGEND><BR></FIELDSET>
</TD></TR></TBODY></TABLE>看起来和上面的一样，可是这个才是真正的表中表哦。<BR>(在<legnd>中插入一个表格)</TD>
<TD><TEXTAREA name=textarea7 rows=4 wrap=VIRTUAL cols=40><table width="200">
<tr>
<td><fieldset style="width:200" align="center"> <legend>
<table style="border: 1 solid #000000" width="80" cellspacing="1" cellpadding="0" height="20">
<tr>
<td><font color=blue>表中表效果Ⅱ</font></td>
</tr>
</table>
</legend><br>
</fieldset>
</td>
</tr>
</table></TEXTAREA> </TD></TR>
<TR>
<TD colSpan=2>
<HR color=black SIZE=1>
这一节要靠你自己去发现了，因为这样学到的东西才是真正属于自己的（我的一个偷懒的借口）。
我已经在每个表格的下面写出了重点，并在右边给出它的源代码，你可以对照着看。下面还有一
个边框会自己变颜色闪动的表格，有兴趣也研究研究吧 ^o^</TD></TR></TBODY></TABLE>
<P><BR><BR></P></CENTER><IMG height=1
src="洄鬼般典表格届蹭.files/down_info.htm" width=1 border=0> <FONT
color=#000000><STRONG><FONT
color=#006699></FONT></STRONG></FONT><BR></TD></TR>
<TR vAlign=center>
<TD vAlign=center align=right> </TD>
</TR>
<TR>
<TD bgColor=#cccccc height=1></TD></TR>
<TR>
<TD><BR>
</TD>
</TR></TBODY></TABLE></TD></TR></TBODY></TABLE> |
