查看: 2565|回復: 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>

簽到天數: 1428 天

[LV.10]以壇為家III

鮮花(0) 雞蛋(0)
沙發
發表于 2010-9-3 00:10 | 只看該作者
這么漂亮的框框 我得用用 謝無形

簽到天數: 3 天

[LV.2]偶爾看看I

鮮花(18) 雞蛋(0)
板凳
發表于 2010-9-3 08:06 | 只看該作者
無形辛苦了，學習！

該用戶從未簽到

鮮花(176) 雞蛋(0)
地板
發表于 2010-9-3 09:26 | 只看該作者
無形辛苦了，很漂亮的。。。
返回列表 發新帖
您需要登錄后才可以回帖 登錄 | 中文注冊

本版積分規則

關閉

站長推薦上一條 /1 下一條

網站地圖|小黑屋|Archiver|中畫網 ( 蜀ICP備11021737號-2 )|網站地圖

GMT+8, 2025-6-28 15:45 , Processed in 0.070653 second(s), 15 queries , MemCached On.

上網要文明 發言要理性

Powered by Discuz! © 2008-2021 YinHuaBBS.CN

快速回復 返回頂部 返回列表
主站蜘蛛池模板： 亚洲图片综合区| 色偷偷91久久综合噜噜噜噜| 亚洲性感综合欧美| 免费精品99久久国产综合精品| 色欲香天天天综合网站| 天天综合网天天综合色| 色欲综合久久躁天天躁| 婷婷久久综合九色综合绿巨人| 色妞色综合久久夜夜| 欧美精品色婷婷五月综合 | 日韩欧美色综合网站| 五月天综合色激情| 综合国产在线观看无码| 亚洲国产成人五月综合网| 亚洲第一页综合图片自拍| 国产综合成人久久大片91| 久久综合色区| 天天av天天翘天天综合网| 国产成人综合美国十次| 日日狠狠久久偷偷色综合免费| 狠狠色婷婷狠狠狠亚洲综合| 亚洲AV成人潮喷综合网| 久久99国产综合精品免费| 亚洲 自拍 另类小说综合图区| 狠狠色狠狠色综合久久| 成人综合激情| 亚洲综合色区在线观看| 久久综合九色综合久99| 久久影视综合亚洲| 成人综合久久精品色婷婷| 国产激情综合在线观看| 99久久国产综合精品成人影院| 色诱久久久久综合网ywww| 狠狠色丁香婷婷久久综合| 日日狠狠久久偷偷色综合免费| 伊人久久成人成综合网222| 国产激情电影综合在线看| 亚洲va欧美va国产综合| 欧美久久综合性欧美| 色视频综合无码一区二区三区| 久久一本综合|