20年高端網(wǎng)站建設服務商

網(wǎng)站開發(fā)細線表格邊框的方法

作者

卓越邁創(chuàng)

發(fā)表于

2019年06月05日

很多朋友都有過制作網(wǎng)頁的經(jīng)歷,如今,眾多網(wǎng)頁的設計都用到了表格。這樣不僅有利于網(wǎng)頁的維護,同時,提高了網(wǎng)頁的觀賞性。在眾多網(wǎng)頁制作風格中,細邊框這個制作方法是必不可少的。這里,我將簡單地談一下細邊框的制作方法。


好像一般的做法是這樣(css)
.table1{border-collapse:collapse}
.table1 td{border:1px solid #ddd} 

如何用表格嵌套呢?大家都知道,用Bgcolor可以在表格中任意定義表格的背景顏色,用Cellspacing可以控制表格單元的額外空間,如果定義兩個表格,把其中一個的表格背景設為全黑,然后在這個表格中嵌套定義另外一個表格,背景設為全白,并且把Weight=100%。這時,兩個表格是重疊的,但是,如果把背景為黑色的那個表格再定義一個Cellspacing=1。那么就是說,黑色的表格比白色的表格多出了一個像素的外圍空間,而白色的表格又在黑色表格之上,從而達到細邊框的效果。源代碼如下:

〈table border="0" cellpadding=0 cellspacing=1 bgcolor=black〉
〈tr〉 
〈td〉 
〈table width="100%" border="0" cellpadding=0 cellspacing=0 bgcolor=white〉
〈tr〉 
〈td〉
〈/td〉
〈/tr〉
〈/table〉
〈/td〉
〈/tr〉
〈/table〉

第二種比較簡單,那就是用CSS(層疊樣式表)強制定義,但是,有些比較老的瀏覽器不支持CSS,可能導致無法顯示你所要求的效果。不過使用CSS定義,語句非常簡潔,所作網(wǎng)頁的容量也較小。它的操作方法是,在表格的最外圍的相應最小單元的〈td〉標簽中定義style="BORDER-postion: black 1px solid;",其中,Postion的參數(shù)有Left、Right、Top和Bottom,分別表示在單元的左、右、上、下顯示一條1個像素寬的實線條。

源代碼如下:

〈table border="0" bgcolor=white〉
〈tr〉 
〈td style="BORDER-left: black 1px solid; BORDER-top: black 1px solid;"〉
〈/td〉
〈td style="BORDER-top: black 1px solid; BORDER-right: black 1px solid;"〉
〈/td〉
〈/tr〉
〈tr〉 
〈td style="BORDER-left: black 1px solid; BORDER-bottom: black 1px solid;"〉
〈/td〉
〈td style="BORDER-bottom: black 1px solid; BORDER-right: black 1px solid;"〉
〈/td〉
〈/tr〉
〈/table〉

PS:不過現(xiàn)在都不流行用表格了,都向web標準過渡了。

相關網(wǎng)站建設文章:網(wǎng)站中網(wǎng)頁設計使用框架結構的弊病
公司新聞

華為·深開鴻官網(wǎng)數(shù)字化升級

深圳開鴻數(shù)字產(chǎn)業(yè)發(fā)展有限公司(簡稱“深開鴻”)是一家專注于數(shù)字化和智能軟件解決方案的企業(yè),華為對其持有股份。在行業(yè)內(nèi)具有較高的技術實力和品牌影響力,服務領域覆蓋工業(yè)、教育、交通及能源等多個行業(yè)。
2026-01-09

攜手金蝶打造國際化官網(wǎng)形象

金蝶國際正不斷推進國際市場的業(yè)務布局,為了更好地服務海外客戶,企業(yè)官網(wǎng)成為其展示品牌價值、產(chǎn)品解決方案及服務能力的重要窗口。
2025-11-29

國資委企業(yè)水務集團官網(wǎng)升級

深圳市水務科技有限公司是深圳環(huán)境水務集團旗下專業(yè)科技企業(yè),長期致力于智慧水務、數(shù)字化水環(huán)境治理解決方案,并在行業(yè)內(nèi)積累了豐富的技術與實踐經(jīng)驗。
2025-09-09

助力中海達海外數(shù)字化官網(wǎng)升級

廣州中海達衛(wèi)星導航技術股份有限公司(Hi?Target)是中國測繪與定位領域的領先企業(yè),業(yè)務覆蓋智慧城市、基礎設施監(jiān)測、智能農(nóng)業(yè)等多個應用場景。 隨著國際化布局和業(yè)務拓展的不斷深入,中海達官網(wǎng)亟需升級,以更高效地展示品牌形象、技術實力及產(chǎn)品方案,滿足國內(nèi)外客戶多樣化的信息需求
2026-01-09

人形智能機器人優(yōu)必選官網(wǎng)建設

隨著智能機器人行業(yè)的快速發(fā)展,優(yōu)必選希望官網(wǎng)能夠更準確、系統(tǒng)地呈現(xiàn)企業(yè)技術實力和產(chǎn)品應用價值,滿足不同受眾對技術內(nèi)容和應用場景的理解需求。在官網(wǎng)建設項目招標中,卓越邁創(chuàng)憑借科技企業(yè)官網(wǎng)規(guī)劃能力和豐富執(zhí)行經(jīng)驗,成功中標該項目。
2026-01-09

國民品牌華美月餅官網(wǎng)升級

華美月餅希望通過官網(wǎng)整合品牌文化與產(chǎn)品信息,提升品牌在消費者心中的形象,同時優(yōu)化用戶瀏覽體驗。 在本次官網(wǎng)建設項目中,客戶要求網(wǎng)站不僅展示產(chǎn)品,還要完整傳遞品牌歷史、節(jié)慶文化及品質理念。卓越邁創(chuàng)憑借在消費品牌數(shù)字化建設的豐富經(jīng)驗,成功中標該項目。
2025-12-18
別錯過!200+上市公司選擇的策劃方案
《2026年行業(yè)最新設計趨勢》 《網(wǎng)站痛點分析與優(yōu)化策略》 《競品洞察與成功案例》
立即領取資料立即領取資料

僅剩5

* 200+上市公司都在用的工具書
微信掃碼領取
網(wǎng)站定制聯(lián)系
網(wǎng)站設計報價洽詢
您希望我們?yōu)槟峁┦裁捶漳?/div>
集團官網(wǎng)建設 營銷型網(wǎng)站建設 外貿(mào)網(wǎng)站建設 海外獨立站開發(fā) 網(wǎng)站年度運維 微信小程序開發(fā) GEO搜索優(yōu)化 媒體發(fā)稿服務 視頻拍攝 品牌VI設計 LOGO設計 畫冊設計
您的預算

3萬-5萬

5萬-8萬

8萬-10萬

10萬以上

招標項目

獲取方案

咨詢

微信掃碼咨詢
電話咨詢
在線咨詢

業(yè)務咨詢

在線詢價

微信咨詢