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

笑看天下诸侯戏 独卧仙居逍遥乐

 
 
 

日志

 
 

【代码应用】各式表格边框的代码  

2011-04-05 12:50:50|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
彩色渐变字教程 - 静中有动 - 静中有动的休闲屋
   素材:代码应用
各式表格边框的代码
  编辑:静中有动

 

表格边框例样
代码

透明表格边框

<TABLE style="FILTER: alpha(opacity=30)" border=1 width=200 bgColor=#ececec height=120>
<TBODY>
<TR>
<TD>透明表格边框</TD></TR></TBODY></TABLE>

浮雕阴影表格边框

<TABLE width=200 bgColor=#aaaaaa height=120>
<TBODY>
<TR>
<TD>
<CENTER><FONT color=#000000>浮雕阴影表格边框</FONT></CENTER></TD></TR></TBODY></TABLE>
公告字集段表格边框

<FIELDSET style="WIDTH: 200px"><LEGEND><FONT color=#ff0000>公告</FONT></LEGEND>字集段表格边框</FIELDSET>

公告字集段表格边框
<FIELDSET style="WIDTH: 200px"><LEGEND style="WIDTH: 30px" align=center><FONT color=#ff0000>公告</FONT></LEGEND>字集段表格边框</FIELDSET>
正方体表格边框

<TABLE style="TOP: 49px; LEFT: 10px" border=1 borderColorLight=#99cc00 borderColorDark=#222222 width=200 height=120>
<TBODY>
<TR>
<TD width="100%">正方体表格边框</TD></TR></TBODY></TABLE>

立体按钮表格边框

<TABLE style="BORDER-BOTTOM: #333333 3px solid; BORDER-LEFT: #999999 3px solid; TABLE-LAYOUT: fixed; BORDER-TOP: #999999 3px solid; BORDER-RIGHT: #333333 3px solid" border=1 cellSpacing=0 borderColor=#7d7d7d cellPadding=0 width=200>
<TBODY>
<TR>
<TD height=130>立体按钮表格边框</TD></TR></TBODY></TABLE></DIV>

内发光的表格边框

<TABLE style="BORDER-BOTTOM: #888888 5px ridge; BORDER-LEFT: #888888 5px ridge; BORDER-TOP: #888888 5px ridge; BORDER-RIGHT: #888888 5px ridge" border=1 cellSpacing=0 borderColor=#cccccc cellPadding=0 width=200>
<TBODY>
<TR>
<TD>内发光的表格边框</TD></TR></TBODY></TABLE>

实线表格边框
<TABLE style="BORDER-BOTTOM: #99cc00 4px solid; BORDER-LEFT: #99cc00 4px solid; BORDER-TOP: #99cc00 4px solid; BORDER-RIGHT: #99cc00 4px solid" border=0 cellSpacing=0 borderColor=#99cc00 cellPadding=0 width=200>
<TBODY>
<TR>
<TD>实线表格边框</TD></TR></TBODY></TABLE>
带阴影的表格边框
<TABLE border=5 cellSpacing=0 borderColorLight=#99cc00 borderColorDark=#444444 width=200>
<TBODY>
<TR>
<TD>带阴影的表格边框</TD></TR></TBODY></TABLE>
外凸式表格边框
<TABLE style="BORDER-BOTTOM: #99cc00 5px outset; BORDER-LEFT: #99cc00 5px outset; BORDER-TOP: #99cc00 5px outset; BORDER-RIGHT: #99cc00 5px outset" border=0 cellSpacing=0 borderColor=#99cc00 cellPadding=0 width=200>
<TBODY>
<TR>
<TD>外凸式表格边框</TD></TR></TBODY></TABLE>
内凹式表格边框

<TABLE style="BORDER-BOTTOM: #99cc00 5px inset; BORDER-LEFT: #99cc00 5px inset; BORDER-TOP: #99cc00 5px inset; BORDER-RIGHT: #99cc00 5px inset" border=0 cellSpacing=0 borderColor=#99cc00 cellPadding=0 width=200>
<TBODY>
<TR>
<TD>内凹式表格边框</TD></TR></TBODY></TABLE>

脊线表格边框
<DIV align=center><TABLE style="BORDER-BOTTOM: #99cc00 5px ridge; BORDER-LEFT: #99cc00 5px ridge; BORDER-TOP: #99cc00 5px ridge; BORDER-RIGHT: #99cc00 5px ridge" border=0 cellSpacing=0 borderColor=#99cc00 cellPadding=0 width=200>
<TBODY>
<TR>
<TD>脊线表格边框</TD></TR></TBODY></TABLE>
立体光线表格边框
<TABLE style="BORDER-BOTTOM: #99cc00 5px groove; BORDER-LEFT: #99cc00 5px groove; BORDER-TOP: #99cc00 5px groove; BORDER-RIGHT: #99cc00 5px groove" border=0 cellSpacing=0 borderColor=#99cc00 cellPadding=0 width=200>
<TBODY>
<TR>
<TD>立体光线表格边框</TD></TR></TBODY></TABLE>
双线表格边框
<TABLE style="BORDER-BOTTOM: #99cc00 5px double; BORDER-LEFT: #99cc00 5px double; BORDER-TOP: #99cc00 5px double; BORDER-RIGHT: #99cc00 5px double" border=0 cellSpacing=0 borderColor=#99cc00 cellPadding=0 width=200>
<TBODY>
<TR>
<TD>双线表格边框</TD></TR></TBODY></TABLE>
方形虚线表格边框

<TABLE style="BORDER-BOTTOM: #99cc00 5px dashed; BORDER-LEFT: #99cc00 5px dashed; BORDER-TOP: #99cc00 5px dashed; BORDER-RIGHT: #99cc00 5px dashed" border=0 cellSpacing=0 borderColor=#da00ed cellPadding=0 width=200>
<TBODY>
<TR>
<TD>方形虚线表格边框</TD></TR></TBODY></TABLE>

圆点虚线表格边框
<TABLE style="BORDER-BOTTOM: #99cc00 4px dotted; BORDER-LEFT: #99cc00 4px dotted; BORDER-TOP: #99cc00 4px dotted; BORDER-RIGHT: #99cc00 4px dotted" border=0 cellSpacing=0 borderColor=#99cc00 cellPadding=0 width=200>
<TBODY>
<TR>
<TD>圆点虚线表格边框</TD></TR></TBODY></TABLE>
模板表格边框

<TABLE style="BORDER-BOTTOM: 5px solid; BORDER-LEFT: 5px solid; WIDTH: 200px; HEIGHT: 30px; BORDER-TOP: 5px solid; BORDER-RIGHT: 5px solid" border=5 cellSpacing=0 cellPadding=5>
<TBODY>
<TR>
<TD>模板表格边框</TD></TR></TBODY></TABLE>

光晕效果表格边框
<TABLE style="BORDER-BOTTOM: #99cc00 3px solid; FILTER: glow; BORDER-LEFT: #99cc00 3px solid; WIDTH: 200px; HEIGHT: 30px; BORDER-TOP: #99cc00 3px solid; BORDER-RIGHT: #99cc00 3px solid" border=5 cellSpacing=0 cellPadding=5 width=200>
<TBODY>
<TR>
<TD>
光晕效果表格边框</TD></TR></TBODY></TABLE>
水晶透明效果边框一
内容(调色要注意深浅)

<TABLE style="BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; TABLE-LAYOUT: fixed; BORDER-TOP: 1px solid; BORDER-RIGHT: 1px solid" border=0 cellSpacing=0 borderColor=#19050f cellPadding=0 width=200 height=120>
<TBODY>
<TR>
<TD style="FILTER: alpha(opacity=100,finishopacity=10,style=2)" bgColor=#ff359a height=1 align=middle>水晶透明效果边框一</TD></TR>
<TR>
<TD height=20>内容</TD></TR></TBODY></TABLE>

立体水晶透明效果边框二
内容(宽高自定义)
<TABLE style="BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; TABLE-LAYOUT: fixed; BORDER-TOP: 1px solid; BORDER-RIGHT: 1px solid" border=0 cellSpacing=0 borderColor=#aa0055 cellPadding=0 width=200>
<TBODY>
<TR>
<TD style="FILTER: alpha(opacity=100,finishopacity=10,style=3)" bgColor=#ff359a height=15 align=middle>立体水晶透明效果边框二</TD></TR>
<TR>
<TD height=30>内容</TD></TR></TBODY></TABLE>
渐淡透明效果边框
内容(宽高自定义)

<TABLE style="BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; TABLE-LAYOUT: fixed; BORDER-TOP: 1px solid; BORDER-RIGHT: 1px solid" border=0 cellSpacing=0 borderColor=#ff359a cellPadding=0 width=200>
<TBODY>
<TR>
<TD style="FILTER: alpha(opacity=100,finishopacity=10,style=1)" bgColor=#ff359a height=15 align=middle>渐淡透明效果边框</TD></TR>
<TR>
<TD height=30>内容</TD></TR></TBODY></TABLE>

 
请保持本博的个性风格,朋友如需要此内容而不想显现来源的,请复制上面的内容自主处理
彩色渐变字教程 - 静中有动 - 静中有动的休闲屋
  评论这张
 
阅读(292)| 评论(20)
推荐 转载

历史上的今天

评论

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

页脚

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