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

欢迎光临 洋兰的休闲驿站

 
 
 

日志

 
 

不同边框的表格样式及代码  

2011-09-20 16:13:52|  分类: 博客技巧 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

 10款精美边框 - 山上船 - 山上船 de 博客 10款精美边框 - 山上船 - 山上船 de 博客

不同边框的表格样式及代码

1.


单实线边框表格

 

代码:

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

</TR></TBODY></TABLE>

 

2.

 


虚线边框表格

 

代码:

<TABLE style="BORDER-RIGHT: #99ff66 1px dashed; BORDER-TOP: #99ff66 1px dashed; BORDER-LEFT: #99ff66 1px dashed; BORDER-BOTTOM: #99ff66 1px dashed; BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1>
<TBODY>
<TR>
<TD>
<DIV align=center>虚线边框表格</DIV></TD></TR></TBODY></TABLE>

3.


 


点线边框表格

 

代码:

<TABLE style="BORDER-RIGHT: #99FF66 2px dotted; BORDER-TOP: #99FF66 2px dotted; BORDER-LEFT: #99FF66 2px dotted; BORDER-BOTTOM: #99FF66 2px dotted; BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=2>
<TBODY>
<TR>
<TD>
<DIV align=center>点线边框表格</DIV></TD>

</TR></TBODY></TABLE>

4.

 


双实线边框表格

 

代码:

<TABLE borderColor=#99FF66 height=40 cellPadding=1 width=250 align=center border=3>
<TBODY>
<TR>
<TD>
<DIV align=center>双实线边框表格</DIV></TD>

</TR></TBODY></TABLE>

5.

 


槽线边框表格

 

代码:

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

</TR></TBODY></TABLE>

6.

 


脊线边框表格

 

代码:

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

</TR></TBODY></TABLE>


7.

 


内凹效果边框

 

代码:

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

</TR></TBODY></TABLE>

8.

 


外凸效果边框

 

代码:

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

</TR></TBODY></TABLE>

9.

 


内虚外实边框

 

代码:

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

</TR></TBODY></TABLE>

10.


外虚内实边框

 

代码:

<TABLE style="BORDER-TOP-STYLE: dashed; BORDER-RIGHT-STYLE: dashed; BORDER-LEFT-STYLE: dashed; BORDER-BOTTOM-STYLE: dashed" borderColor=#99ff66 height=40 cellSpacing=8 cellPadding=2 width=250 align=center bgColor=#ffffff border=2>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: #99ff66 2px solid; BORDER-TOP: #99ff66 2px solid; BACKGROUND: #ffffff; BORDER-LEFT: #4a4a84 2px solid; BORDER-BOTTOM: #99ff66 2px solid">
<DIV align=center>外虚内实边框</DIV></TD></TR></TBODY></TABLE>

11.

 


无边框表格

 

代码:

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#99ff66 height=40 cellPadding=1 width=250 align=center bgColor=#fffbec border=0>
<TBODY>
<TR>
<TD>
<DIV align=center>无边框表格</DIV></TD></TR></TBODY></TABLE>

 

 

附:表格常用属性

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定义合并表格的行数,属性值是数字。

      

★精品日志导航★

美容护肤

服饰搭配

情感物语

幽默搞笑

人生感悟

生活贴士

美丽发型

减肥瘦身

饮食保健

职场策略

图片欣赏

随笔杂谈

PS教程

音画图文

子女教育

博客技巧

博客素材

U5教程

时尚购物

默认分类

时尚家装

食全食美

Flash素材

电脑知识

营销策略

网址导航

淘宝导购

淘客城

凡客诚品

NO5时尚

梦芭莎

卓越商城

分割线

精美边框

精美时钟

导航模板

温馨祝福

社交礼仪

淘宝导购

代码复制

 

 

 10款精美边框 - 山上船 - 山上船 de 博客

 

 

  评论这张
 
阅读(128)| 评论(1)
推荐 转载

历史上的今天

评论

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

页脚

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