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

倾颜戏羽

倾舞人生幻如梦,颜寂萧瑟也枉然。戏影指尖轻拨弄,羽飘九天落凡尘……忘不掉妳。

 
 
 

日志

 
 

边框表格各种样式  

2010-01-30 07:33:52|  分类: ╠边框表格╣ |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
边框表格各种样式 - 倾颜戏羽 - 倾颜戏羽

边框表格各种样式

 

附:表格常用属性
border:表格的边框宽度。如border=1,表示表格边框的粗细为1个像素(默认值),为0表示没有边框。
cellspacing:表格中各单元格的间距。属性值为数字。当表格只有一个单元格时,则表示该单元格与表格边框的距离。
cellpadding:单元格内容与单元格边框之间的距离,属性值是数字。
width:表格的宽度。属性值为像素和百分比两种。
height:表格的高度。取值方法同width。
bgcolor:表格的背景颜色。属性值为各种颜色代码。
background:表格的背景图案。属性值为有效的图片地址。
bordercolor:表格边框的颜色。属性值为各种颜色代码(当border值不为0时设置此值有效)。
bordercolorlight:亮边框(表格的左边和上边框)颜色。属性值为各种颜色代码(当border值不为0时设置此值有效)。
bordercolordark:暗边框(表格的右边和下边框)颜色。属性值为各种颜色代码(当border值不为0时设置此值有效)。
align:表格的对齐方式。属性值为left(左对齐,默认)、center(居中)以及right(右对齐)。
colspan:定义合并表格的列数。属性值是数字。
rowspan定义合并表格的行数,属性值是数字。

 

 

1.槽线边框表格

<TABLE style="BORDER-RIGHT: #555555 10px groove; BORDER-TOP: #555555 10px groove; BORDER-LEFT: #555555 10px groove; BORDER-BOTTOM: #555555 10px groove; BORDER-COLLAPSE: collapse" borderColor=#555555 height=100 cellPadding=1 width=300 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>槽线边框表格</DIV></TD>
</TR></TBODY></TABLE>

 

 2.脊线边框表格

<TABLE style="BORDER-RIGHT: #555555 10px ridge; BORDER-TOP: #555555 10px ridge; BORDER-LEFT: #555555 10px ridge; BORDER-BOTTOM: #555555 10px ridge; BORDER-COLLAPSE: collapse" borderColor=#555555 height=100 cellPadding=1 width=300 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>脊线边框表格</DIV></TD>
</TR></TBODY></TABLE>

 

3.内凹效果边框

<TABLE style="BORDER-RIGHT: #555555 10px inset; BORDER-TOP: #555555 10px inset; BORDER-LEFT: #555555 10px inset; BORDER-BOTTOM: #555555 10px inset; BORDER-COLLAPSE: collapse" borderColor=#555555 height=100 cellPadding=1 width=300 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>内凹效果边框</DIV></TD>
</TR></TBODY></TABLE>

 

4.外凸效果边框

<TABLE style="BORDER-RIGHT: #555555 10px outset; BORDER-TOP: #555555 10px outset; BORDER-LEFT: #555555 10px outset; BORDER-BOTTOM: #555555 10px outset; BORDER-COLLAPSE: collapse" borderColor=#555555 height=100 cellPadding=1 width=300 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>外凸效果边框</DIV></TD>
</TR></TBODY></TABLE>

 

5.外虚内实边框

<TABLE style="BORDER-TOP-STYLE: dashed; BORDER-RIGHT-STYLE: dashed; BORDER-LEFT-STYLE: dashed; BORDER-BOTTOM-STYLE: dashed" borderColor=#555555 height=100 cellSpacing=8 cellPadding=2 width=300 align=center bgColor=#555555 border=2>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: #555555 3px solid; BORDER-TOP: #555555 3px solid; BACKGROUND: #333333; BORDER-LEFT: #555555 3px solid; BORDER-BOTTOM: #555555 3px solid">
<DIV align=center>外虚内实边框</DIV></TD></TR></TBODY></TABLE>

 

6.内虚外实边框

<TABLE style="BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid" borderColor=#555555 height=100 cellSpacing=8 cellPadding=2 width=300 align=center bgColor=#333333 border=2>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: #555555 2px dashed; BORDER-TOP: #555555  2px dashed; BACKGROUND: #555555; BORDER-LEFT: #555555 2px dashed; BORDER-BOTTOM: #555555 2px dashed">
<DIV align=center>内虚外实边框</DIV></TD>
</TR></TBODY></TABLE>

 

7.双实线边框表格

<TABLE borderColor=#555555 height=100 cellPadding=2 width=300 align=center border=3>
<TBODY>
<TR>
<TD>
<DIV align=center>双实线边框表格</DIV></TD>
</TR></TBODY></TABLE>

 

8.点线边框表格

<TABLE style="BORDER-RIGHT: #555555 3px dotted; BORDER-TOP: #555555 3px dotted; BORDER-LEFT: #555555 3px dotted; BORDER-BOTTOM: #555555 3px dotted; BORDER-COLLAPSE: collapse" borderColor=#333333 height=100 cellPadding=2 width=300 align=center border=2>
<TBODY>
<TR>
<TD>
<DIV align=center>点线边框表格</DIV></TD>
</TR></TBODY></TABLE>

 

9.单实线边框表格

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#555555 height=100 cellPadding=1 width=300 align=center border=2>
<TBODY>
<TR>
<TD>
<DIV align=center>单实线边框表格</DIV></TD>
</TR></TBODY></TABLE>

 

10.立体阴影边框表格

<TABLE style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#333333,direction:130,strength:10)" borderColor=#555555 height=100 cellPadding=1 width=300 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>立体阴影边框表格</DIV></TD>
</TR></TBODY></TABLE>

 

11.水平颠倒边框表格

<TABLE style="filter:fliph" borderColor=#555555 height=100 cellPadding=1 width=300 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>水平颠倒边框表格</DIV></TD>
</TR></TBODY></TABLE>

 

12.上下颠倒边框表格

<TABLE style="filter:flipv" borderColor=#555555 height=100 cellPadding=1 width=300 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>上下颠倒边框表格</DIV></TD>
</TR></TBODY></TABLE>

 

13.浮雕特效边框表格

<TABLE style="filter:progid:DXImageTransform.Microsoft.Emboss()" borderColor=#555555 height=100 cellPadding=1 width=300 align=center border=12>
<TBODY>
<TR>
<TD>
<DIV align=center>
浮雕特效边框表格
</DIV></TD></TR></TBODY></TABLE>

 

14.色彩渐变特效边框表格

<TABLE style="filter:invert" borderColor=#555555 height=100 cellPadding=1 width=300 align=center border=12>
<TBODY>
<TR>
<TD>
<DIV align=center>
色彩渐变特效边框表格
</DIV></TD></TR></TBODY></TABLE>

 

14.X光特效边框表格

<TABLE style="filter:'xray'" borderColor=#555555 height=100 cellPadding=1 width=300 align=center border=12>
<TBODY>
<TR>
<TD>
<DIV align=center>
X光特效边框表格
</DIV></TD></TR></TBODY></TABLE>

 

15.黑白特效边框表格

<TABLE style="filter:'gray'" borderColor=#555555 height=100 cellPadding=1 width=300 align=center border=12>
<TBODY>
<TR>
<TD>
<DIV align=center>
黑白特效边框表格
</DIV></TD></TR></TBODY></TABLE>

 

16.颗粒阴影特效边框表格

<TABLE style="filter:progid:DXImageTransform.Microsoft.Glow(color=#333333,strength=12)" borderColor=#555555 height=100 cellPadding=1 width=300 align=center border=12>
<TBODY>
<TR>
<TD>
<DIV align=center>
颗粒阴影特效边框表格
</DIV></TD></TR></TBODY></TABLE>

 

『快乐互动,精彩你我;创造喜悦,分享快乐!』

倾颜戏羽声明:引用请勿去掉与本文的链接,未经许可请不要随意篡改;转载须注明本文出处。

边框表格各种样式 - 倾颜戏羽 - 倾颜戏羽
  评论这张
 
阅读(383)| 评论(2)
推荐 转载

历史上的今天

评论

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

页脚

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