登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

miaozk2006

点滴积累与收藏:关于技术,关于生活

 
 
 

日志

 
 

网页中怎样制作虚线表格  

2011-06-08 08:23:18|  分类: 自用代码 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

<TABLE height=30 cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD><B>表格边框</B></TD></TR></TBODY></TABLE>
<TABLE class=t cellSpacing=0 cellPadding=8 width="100%" 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> 

                                                                                                                                                                                                  原文地址

chmod命令详细用法 - miaozk2006 - miaozk2006


[自用版]博客日志下拉文本框的使用 - miaozk2006 - miaozk2006

你在本篇停留  ·  谢谢你的来访  

【友善提示】

欢迎光临miaozk2006的博客!
本博资料大部分来自于互联网,其版权归原作者或其他合法者所有。如内容涉及或侵犯了您的权益,请通知本人,我将尽快处理!
喜欢转载本博客日志的朋友注意!请您点击日志下方的“引用”,再点“-引用此篇日志到我的博客”!请勿删去出处!删除引用链接是剽窃行为,剽窃可耻!!!这是你对你自己人格的污辱,请你自重。要珍惜博主的劳动,尊重他人就是尊重你自己,谢谢你的支持配合!


 

  评论这张
 
阅读(849)| 评论(0)

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018