對table設(shè)置css樣式邊框，分為幾種情況：
創(chuàng)新互聯(lián)建站基于成都重慶香港及美國等地區(qū)分布式IDC機房數(shù)據(jù)中心構(gòu)建的電信大帶寬，聯(lián)通大帶寬，移動大帶寬，多線BGP大帶寬租用,是為眾多客戶提供專業(yè)服務(wù)器托管報價，主機托管價格性價比高，為金融證券行業(yè)德陽機房托管，ai人工智能服務(wù)器托管提供bgp線路100M獨享，G口帶寬及機柜租用的專業(yè)成都idc公司。
1、只對table設(shè)置邊框
2、對td設(shè)置邊框
3、對table和td技巧性設(shè)置表格邊框
4、對table和td設(shè)置背景，實現(xiàn)完美表格邊框
以下DIVCSS5對以上幾種實現(xiàn)html 表格邊框樣式進行講解與案例演示。為了便于觀察，divcss5均設(shè)置所有案例表格為1px實線紅色邊框為例；table寬度為400px;表格為三列三行，對以上四種情況表格外層加個div盒子，分別CSS命名為“.table-a”、“.table-b”、“.table-c”、“.table-d”。
一、只對表格table標簽設(shè)置邊框 - TOP
只對table標簽設(shè)置border（邊框）樣式，將讓此表格最外層table一個邊框，而表格內(nèi)部不產(chǎn)生邊框樣式。
案例詳細如下：
1、對應(yīng)css代碼
style .table-a table{border:1px solid #F00} /* css注釋：只對table標簽設(shè)置紅色邊框樣式 */ /style
2、對應(yīng)html代碼片段
div class="table-a" table width="400" border="0" cellspacing="0" cellpadding="0" tr td width="105"站名/td td width="181"網(wǎng)址/td td width="112"說明/td /tr tr tdDIVCSS5/td td;/td tdCSS學(xué)習(xí)/td /tr tr tdCSS5/td td;/td tdCSS切圖/td /tr /table /div
二、對td設(shè)置邊框 - TOP
對table表格td設(shè)置邊框樣式，表格對象內(nèi)td將實現(xiàn)邊框樣式，但中間部分td會導(dǎo)致出現(xiàn)雙邊框。
詳細案例教程如下：
1、對應(yīng)css代碼
style .table-b table td{border:1px solid #F00} /* css注釋：只對table td標簽設(shè)置紅色邊框樣式 */ /style
2、對應(yīng)html源代碼片段
div class="table-b" table width="400" border="0" cellspacing="0" cellpadding="0" tr td width="105"站名/td td width="181"網(wǎng)址/td td width="112"說明/td /tr tr tdDIVCSS5/td td;/td tdCSS學(xué)習(xí)/td /tr tr tdCSS5/td td;/td tdCSS切圖/td /tr /table
三、對table和td技巧性設(shè)置表格邊框 - TOP
如上第二點，只對表格對象td設(shè)置單一邊框樣式，中間部分td與td標簽之間就會出現(xiàn)雙邊框現(xiàn)象。
解決方法：對td只設(shè)置兩個邊的邊框，對table也設(shè)置兩個邊的邊框樣式。
解釋：對td設(shè)置左與上邊框，這樣td與td相鄰就會只出現(xiàn)單一邊框樣式，這樣就會出現(xiàn)表格右側(cè)和下部沒有邊框，這個時候我們設(shè)置table右和下 邊框解決顯示右側(cè)和下側(cè)td剩下未顯示邊框。
1、對應(yīng)css代碼：
style .table-c table{border-right:1px solid #F00;border-bottom:1px solid #F00} .table-c table td{border-left:1px solid #F00;border-top:1px solid #F00} /* css 注釋： 只對table td設(shè)置左與上邊框； 對table設(shè)置右與下邊框； 為了便于截圖，我們將css 注釋說明換行排版 */ /style
2、對應(yīng)html源代碼片段：
div class="table-c" table width="400" border="0" cellspacing="0" cellpadding="0" tr td width="105"站名/td td width="181"網(wǎng)址/td td width="112"說明/td /tr tr tdDIVCSS5/td td;/td tdCSS學(xué)習(xí)/td /tr tr tdCSS5/td td;/td tdCSS切圖/td /tr /table
對table設(shè)置css樣式邊框，分為幾種情況：
1、只對table設(shè)置邊框；
2、對td設(shè)置邊框；
3、對table和td技巧性設(shè)置表格邊框；
4、對table和td設(shè)置背景，實現(xiàn)完美表格邊框。
代碼如下：
1、只對table設(shè)置邊框；
style?
.table-a?table{border:1px?solid?#F00}?
/*?css注釋：只對table標簽設(shè)置紅色邊框樣式?*/?
/style
2、對td設(shè)置邊框；
style?
.table-b?table?td{border:1px?solid?#F00}?
/*?css注釋：只對table?td標簽設(shè)置紅色邊框樣式?*/?
/style
3、對table和td技巧性設(shè)置表格邊框；
style?
.table-c?table{border-right:1px?solid?#F00;border-bottom:1px?solid?#F00}?
.table-c?table?td{border-left:1px?solid?#F00;border-top:1px?solid?#F00}?
/*?
css?注釋：?
只對table?td設(shè)置左與上邊框；?
對table設(shè)置右與下邊框；?
為了便于截圖，我們將css?注釋說明換行排版?
*/?
/style
4、對table和td設(shè)置背景，實現(xiàn)完美表格邊框。
style?
.table-d?table{?background:#F00}?
.table-d?table?td{?background:#FFF}?
/*?css注釋：設(shè)置table背景為紅色，td背景為白色?*/?
/style
總結(jié)：
以上四種方式實現(xiàn)table表格邊框樣式方法，推薦使用第三和第四種方法來解決表格邊框樣式。希望此html table邊框布局方法對大家有幫助并能掌握，平時需要時靈活運用。
border屬性 ：在網(wǎng)頁中設(shè)置元素的邊框樣式?？赏瑫r設(shè)置邊框?qū)挾取⑦吙驑邮?、邊框顏色。也可以單獨設(shè)置上邊、右邊、下邊、左邊的邊框。
語法：border： border-width | border-style | border-color;
border-width ：邊框?qū)挾??？梢灾付ㄩL度值。如1px，1em（單位為px，pt，em等）?；蛘呤褂藐P(guān)鍵字medium（默認），thick，thin。
?border-top-width：設(shè)置元素上邊框?qū)挾?/p>
?border-right-width：設(shè)置元素右邊框?qū)挾?/p>
?border-bottom-width：設(shè)置元素下邊框?qū)挾?/p>
?border-left-width：設(shè)置元素左邊框?qū)挾?/p>
border-style ：邊框樣式。
?border-top-style：設(shè)置元素上邊框樣式
?border-right-style：設(shè)置元素右邊框樣式
?border-bottom-style：設(shè)置元素下邊框樣式
?border-left-style：設(shè)置元素左邊框樣式
?屬性值有：
??none：無邊框。
??hidden：隱藏邊框。對于表，hidden 用于解決邊框沖突。
??dotted：點狀邊框。
??dashed：虛線邊框。
??solid：實線邊框。
??double：雙線邊框。兩條單線與其間隔的和等于指定的border-width值。
??groove：3D凹槽邊框。
??ridge：3D壟狀邊框。
??inset：凹邊框。
??outset：凸邊框。
border-color ：邊框顏色。
1.1 邊框各樣式效果圖
1.2 四條邊顏色樣式相同
1.3 四條邊顏色不同，樣式相同
1.4 四條邊顏色相同，樣式不同
1.5 設(shè)置上邊框?qū)挾?、樣式、顏?/p>
1.6 設(shè)置右邊框?qū)挾?、樣式、顏?/p>
1.7 設(shè)置下邊框?qū)挾?、樣式、顏?/p>
1.8 設(shè)置左邊框?qū)挾?、樣式、顏?/p>
以上對border邊框?qū)傩赃M行了基礎(chǔ)操作，大家可以根據(jù)自己的經(jīng)驗為邊框制作出更漂亮的樣式。如若大家有什么更好的見解，那就在回復(fù)區(qū)暢所欲言吧，我定會吸取精華~如有寫錯歡迎大家回復(fù)，我以后定會更加細心 _
重慶分公司
重慶分公司
