查看: 2566|回復(fù): 3
打印 上一主題 下一主題

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

[復(fù)制鏈接]

簽到天數(shù): 111 天

[LV.6]常住居民II

鮮花(0) 雞蛋(0)
跳轉(zhuǎn)到指定樓層
樓主
發(fā)表于 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語言也能實現(xiàn).

代碼如下:

<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 脊?fàn)钸吙蛐Ч?/FONT>

邊框鳳格屬性ridge：3D 脊?fàn)?/FONT>

代碼如下：

<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 脊?fàn)钸吙蛐Ч?/FONT>

代碼如下：

<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 內(nèi)嵌邊框效果

邊框鳳格屬性inset：3D 內(nèi)嵌

代碼如下：

<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 內(nèi)嵌邊框效果

代碼如下:

<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>

簽到天數(shù): 1428 天

[LV.10]以壇為家III

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

簽到天數(shù): 3 天

[LV.2]偶爾看看I

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

該用戶從未簽到

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

本版積分規(guī)則

關(guān)閉

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

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

GMT+8, 2025-6-29 15:21 , Processed in 0.040042 second(s), 15 queries , MemCached On.

上網(wǎng)要文明 發(fā)言要理性

Powered by Discuz! © 2008-2021 YinHuaBBS.CN

快速回復(fù) 返回頂部 返回列表
主站蜘蛛池模板： 一本综合久久国产二区| 狠狠88综合久久久久综合网| 亚洲伊人久久大香线蕉综合图片| 色狠狠成人综合色| 99综合电影在线视频好看| 久久精品综合一区二区三区 | 天天做天天爱天天综合网| 国产精品 综合 第五页| 狠狠狠色丁香婷婷综合久久五月 | 久久综合九色综合网站| 99久久婷婷国产综合亚洲| 天天综合色天天综合色hd| 亚洲综合色视频在线观看| 最新狠狠色狠狠色综合| 精品亚洲综合在线第一区| 国产亚洲综合久久系列| 亚洲丁香色婷婷综合欲色啪| 亚洲欧美综合区自拍另类| 麻豆精品久久精品色综合| 亚洲综合国产精品| 自拍 偷拍 另类 综合图片| 久久综合国产乱子伦精品免费| 区二区三区激情综合| 欧美激情综合五月色丁香| 亚洲亚洲人成综合网络| 亚洲色偷偷狠狠综合网| 狠狠色丁香久久综合五月| 欧美亚洲日韩国产综合网| 亚洲欧美另类成人综合图片| 一本一本久久A久久综合精品| 国产成人亚洲综合色影视| 国产成人精品综合久久久久| 五月丁香六月综合欧美在线| 久久香综合精品久久伊人| 欧美日韩国产综合草草| 亚洲色偷偷综合亚洲AV伊人| 一本一道久久a久久精品综合 | 天天做天天爱天天综合网| 亚洲第一区欧美国产不卡综合| 色综合中文字幕| 伊人久久综合成人网|