2012-12-11 22:12:55| 分类：
边框制作 |举报 |字号
素材：代码应用
各式表格边框的代码
编辑：
静中有动 表格边框例样
代码
透明表格边框
<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; ; 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; ; 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; ; 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; ; 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>
请保持本博的个性风格，朋友如需要此内容而不想显现来源的，请复制上面的内容自主处理
