设为首页收藏本站
开启辅助访问

中画网

 找回密码
 中文注册

QQ登录

只需一步，快速开始

返回列表 发新帖
查看: 2304|回复: 3

[教程] 漂亮的表格边框特效

[复制链接]
高压无形

签到天数: 111 天

[LV.6]常住居民II

鲜花(0) 鸡蛋(0)
发表于 2010-9-2 23:38 | 显示全部楼层 |阅读模式

代码如下:

<TABLE style="BORDER-RIGHT: #9900ff 5px dashed; BORDER-TOP: #9900ff 5px dashed; BORDER-LEFT: #9900ff 5px dashed; BORDER-BOTTOM: #9900ff 5px dashed" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="图片地址">
</TD></TR></TBODY></TABLE>

二:多层虚线边框效果:

代码如下:

<TABLE style="BORDER-RIGHT: #9900ff 5px dashed; BORDER-TOP: #9900ff 5px dashed; BORDER-LEFT: #9900ff 5px dashed; BORDER-BOTTOM: #9900ff 5px dashed" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #FF6600 10px dashed; BORDER-TOP: #FF6600 10px dashed; BORDER-LEFT: #FF6600 10px dashed; BORDER-BOTTOM: #FF6600 10px dashed" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #9900ff 5px dashed; BORDER-TOP: #9900ff 5px dashed; BORDER-LEFT: #9900ff 5px dashed; BORDER-BOTTOM: #9900ff 5px dashed" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="图片地址 ">
</TD></TR></TBODY></TABLE>

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

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

三:点虚线边框效果

边框凤格属性dotted：点虚线

代码如下:

<TABLE style="BORDER-RIGHT: #9900ff 10px dotted; BORDER-TOP: #9900ff 10px dotted; BORDER- LEFT: #9900ff 10px dotted; BORDER-BOTTOM: #9900ff 10px dotted" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="图片地址">
</TD></TR></TBODY></TABLE>

四:多层点虚线边框效果

代码如下:

<TABLE style="BORDER-RIGHT: #9900ff 5px dotted; BORDER-TOP: #9900ff 5px dotted; BORDER-LEFT: #9900ff 5px dotted; BORDER-BOTTOM: #9900ff 5px dotted" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #FF6600 10px dotted; BORDER-TOP: #FF6600 10px dotted; BORDER-LEFT: #FF6600 10px dotted; BORDER-BOTTOM: #FF6600 10px dotted" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #9900ff 5px dotted; BORDER-TOP: #9900ff 5px dotted; BORDER-LEFT: #9900ff 5px dotted; BORDER-BOTTOM: #9900ff 5px dotted" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="图片地址">
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

五:solid：实线边框效果.

边框凤格属性solid：实线边框

这个实线边框不用CSS语言也能实现.

代码如下:

<TABLE style="BORDER-RIGHT: #9900ff 10px solid; BORDER-TOP: #9900ff 10px solid; BORDER- LEFT: #9900ff 10px solid; BORDER-BOTTOM: #9900ff 10px solid" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="图片地址">
</TD></TR></TBODY></TABLE>

六:双线边框效果

边框凤格属性double：双线边框

代码如下:

<TABLE style="BORDER-RIGHT: #9900ff 10px double; BORDER-TOP: #9900ff 10px double; BORDER- LEFT: #9900ff 10px double; BORDER-BOTTOM: #9900ff 10px double" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="图片地址">
</TD></TR></TBODY></TABLE>

七:双线边框效果

代码如下:

<TABLE style="BORDER-RIGHT: #9900ff 5px double; BORDER-TOP: #9900ff 5px double; BORDER-LEFT: #9900ff 5px double; BORDER-BOTTOM: #9900ff 5px double" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #FF6600 10px double; BORDER-TOP: #FF6600 10px double; BORDER-LEFT: #FF6600 10px double; BORDER-BOTTOM: #FF6600 10px double" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #9900ff 5px double; BORDER-TOP: #9900ff 5px double; BORDER-LEFT: #9900ff 5px double; BORDER-BOTTOM: #9900ff 5px double" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="图片地址">
</TD></TR></TBODY></TABLE>

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

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

八：双线，短虚线混用效果

代码如下：

<TABLE style="BORDER-RIGHT: #9900ff 8px double; BORDER-TOP: #9900ff 8px double; BORDER-LEFT: #9900ff 8px double; BORDER-BOTTOM: #9900ff 8px double" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #FF6600 15px dashed; BORDER-TOP: #FF6600 15px dashed; BORDER-LEFT: #FF6600 15px dashed; BORDER-BOTTOM: #FF6600 15px dashed" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #9900ff 5px double; BORDER-TOP: #9900ff 5px double; BORDER-LEFT: #9900ff 5px double; BORDER-BOTTOM: #9900ff 5px double" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="图片地址">
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

九：双线，点虚线混用效果

代码如下：

<TABLE style="BORDER-RIGHT: #9900ff 8px double; BORDER-TOP: #9900ff 8px double; BORDER-LEFT: #9900ff 8px double; BORDER-BOTTOM: #9900ff 8px double" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #FF6600 15px dotted; BORDER-TOP: #FF6600 15px dotted; BORDER-LEFT: #FF6600 15px dotted; BORDER-BOTTOM: #FF6600 15px dotted" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #9900ff 5px double; BORDER-TOP: #9900ff 5px double; BORDER-LEFT: #9900ff 5px double; BORDER-BOTTOM: #9900ff 5px double" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="图片地址">
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

十：3D 沟槽状边框效果

边框凤格属性groove：3D 沟槽状

代码如下：

<TABLE style="BORDER-RIGHT: #6F8A91 20px groove; BORDER-TOP: #6F8A91 20px groove; BORDER-LEFT: #6F8A91 20px groove; BORDER-BOTTOM: #6F8A91 20px groove" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="图片地址">
</TD></TR></TBODY></TABLE>

十一：多层3D 沟槽状边框效果

代码如下：

<TABLE style="BORDER-RIGHT: #6f8a91 8px groove; BORDER-TOP: #6f8a91 8px groove; BORDER-LEFT: #6f8a91 8px groove; BORDER-BOTTOM: #6f8a91 8px groove" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #6f8a91 15px groove; BORDER-TOP: #6f8a91 15px groove; BORDER-LEFT: #6f8a91 15px groove; BORDER-BOTTOM: #6f8a91 15px groove" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #6f8a91 5px groove; BORDER-TOP: #6f8a91 5px groove; BORDER-LEFT: #6f8a91 5px groove; BORDER-BOTTOM: #6f8a91 5px groove" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="图片地址">
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

十二：3D 脊状边框效果

边框凤格属性ridge：3D 脊状

代码如下：

<TABLE style="BORDER-RIGHT: #6F8A91 20px ridge; BORDER-TOP: #6F8A91 20px ridge; BORDER- LEFT: #6F8A91 20px ridge; BORDER-BOTTOM: #6F8A91 20px ridge" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="图片地址">
</TD></TR></TBODY></TABLE>

十三：多层3D 脊状边框效果

代码如下：

<TABLE style="BORDER-RIGHT: #6f8a91 8px ridge; BORDER-TOP: #6f8a91 8px ridge; BORDER-LEFT: #6f8a91 8px ridge; BORDER-BOTTOM: #6f8a91 8px ridge" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #6f8a91 15px ridge; BORDER-TOP: #6f8a91 15px ridge; BORDER-LEFT: #6f8a91 15px ridge; BORDER-BOTTOM: #6f8a91 15px ridge" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #6f8a91 5px ridge; BORDER-TOP: #6f8a91 5px ridge; BORDER-LEFT: #6f8a91 5px ridge; BORDER-BOTTOM: #6f8a91 5px ridge" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="图片地址">
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

十四：3D 内嵌边框效果

边框凤格属性inset：3D 内嵌

代码如下：

<TABLE style="BORDER-RIGHT: #6F8A91 20px inset; BORDER-TOP: #6F8A91 20px inset; BORDER- LEFT: #6F8A91 20px inset; BORDER-BOTTOM: #6F8A91 20px inset" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="图片地址">
</TD></TR></TBODY></TABLE>

十五:多层3D 内嵌边框效果

代码如下:

<TABLE style="BORDER-RIGHT: #6f8a91 8px inset; BORDER-TOP: #6f8a91 8px inset; BORDER-LEFT: #6f8a91 8px inset; BORDER-BOTTOM: #6f8a91 8px inset" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #6f8a91 15px inset; BORDER-TOP: #6f8a91 15px inset; BORDER-LEFT: #6f8a91 15px inset; BORDER-BOTTOM: #6f8a91 15px inset" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #6f8a91 5px inset; BORDER-TOP: #6f8a91 5px inset; BORDER-LEFT: #6f8a91 5px inset; BORDER-BOTTOM: #6f8a91 5px inset" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="图片地址">
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

十六:3D 外嵌边框效果

边框凤格属性outset:3D 外嵌

代码如下:

<TABLE style="BORDER-RIGHT: #6F8A91 20px outset; BORDER-TOP: #6F8A91 20px outset; BORDER- LEFT: #6F8A91 20px outset; BORDER-BOTTOM: #6F8A91 20px outset" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="图片地址">
</TD></TR></TBODY></TABLE>

十七:多层3D 外嵌边框效果

代码如下:

<TABLE style="BORDER-RIGHT: #6f8a91 8px outset; BORDER-TOP: #6f8a91 8px outset; BORDER-LEFT: #6f8a91 8px outset; BORDER-BOTTOM: #6f8a91 8px outset" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #6f8a91 15px outset; BORDER-TOP: #6f8a91 15px outset; BORDER-LEFT: #6f8a91 15px outset; BORDER-BOTTOM: #6f8a91 15px outset" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #6f8a91 5px outset; BORDER-TOP: #6f8a91 5px outset; BORDER-LEFT: #6f8a91 5px outset; BORDER-BOTTOM: #6f8a91 5px outset" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG src="图片地址">
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

十八:实线,短虚线混用(锯齿边效果)

代码如下:

<TABLE style="BORDER-RIGHT: #6f8a91 8px dashed; BORDER-TOP: #6f8a91 8px dashed; BORDER-LEFT: #6f8a91 8px dashed; BORDER-BOTTOM: #6f8a91 8px dashed" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #6f8a91 15px solid; BORDER-TOP: #6f8a91 15px solid; BORDER-LEFT: #6f8a91 15px solid; BORDER-BOTTOM: #6f8a91 15px solid" cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<IMG src="图片地址">
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>



< BR>

回复 鲜花(0) 鸡蛋(0)

使用道具 举报

逸轩

签到天数: 1428 天

[LV.10]以坛为家III

鲜花(0) 鸡蛋(0)
发表于 2010-9-3 00:10 | 显示全部楼层
这么漂亮的框框 我得用用 谢无形
回复 支持 反对 鲜花(0) 鸡蛋(0)

使用道具 举报

陌儿

签到天数: 3 天

[LV.2]偶尔看看I

鲜花(18) 鸡蛋(0)
发表于 2010-9-3 08:06 | 显示全部楼层
无形辛苦了，学习！
回复 支持 反对 鲜花(18) 鸡蛋(0)

使用道具 举报

楚汐

该用户从未签到

鲜花(176) 鸡蛋(0)
发表于 2010-9-3 09:26 | 显示全部楼层
无形辛苦了，很漂亮的。。。
回复 支持 反对 鲜花(176) 鸡蛋(0)

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 中文注册

本版积分规则

网站地图|小黑屋|Archiver|中画网 ( 蜀ICP备11021737号-2 )|网站地图

GMT+8, 2024-5-23 19:19 , Processed in 0.053148 second(s), 16 queries , MemCached On.

上网要文明 发言要理性

Powered by Discuz! © 2008-2023 YinHuaBBS.CN

快速回复 返回顶部 返回列表