|
一般來(lái)說(shuō)，給表格加邊框都會(huì)出現(xiàn)不同的問(wèn)題，以下是給表格加邊框后展現(xiàn)比較好的方式  <style> table,table tr th, table tr td { border:1px solid #0094ff; } table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;} </style> <table> <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr> <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr> <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr> <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr> </table> 但是根據(jù)不同的需要有時(shí)候我們需要不同的樣式,，在這里我就影響表格邊框的因素,，做一些總結(jié)和分析 一,、 <table border="1"> 表格邊框 如圖：
二、 <table border="1" cellspacing="0"> cellspacing單元格間距 如圖：
三,、<table border="1" cellspacing="0" cellpadding="0"> cellpadding單元格邊距 如圖：
四、去掉表格中table的所有屬性值，當(dāng)在css中給table設(shè)置{border: 1px solid #151515} 如圖：
五,、border-collapse: collapse 邊框合并，該屬性設(shè)置表格的邊框是否被合并為一個(gè)單一的邊框,，還是象在標(biāo)準(zhǔn)的 HTML 中那樣分開(kāi)顯示 這個(gè)時(shí)候如果我們只是想給表格整體加邊框,，并且不需要邊距和間距,，其實(shí)我們只需要這么寫(xiě)： <style> table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-color:#b6ff00; border-collapse: collapse;} </style> <table border="1"> <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr> <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr> <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr> <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr> </table> 如圖：
六,、我們?cè)谏厦娴膱D中可以清晰看見(jiàn)，兩個(gè)瀏覽器所解析邊框不同,。但是其實(shí)他們是一樣的,。他們同時(shí)都給邊框加了顏色,，但是由于我們td和th默認(rèn)有一個(gè)默認(rèn)的顏色,，而我們這里沒(méi)有給他們添加樣式去覆蓋默認(rèn)的黑色線條,，而導(dǎo)致了火狐中出現(xiàn)的情況,，其實(shí)這個(gè)情況在谷歌中也有，只是不明顯，其解析的黑色默認(rèn)線條被我們的顏色蓋在了上面，你如果仔細(xì)查看還是會(huì)發(fā)現(xiàn)有黑色邊條出現(xiàn)，這個(gè)時(shí)候我們只需要給th和td加上顏色樣式即可 table tr th, table tr td { border-color:#b6ff00; }
如圖：
七,、從上面,，仔細(xì)看，其實(shí)還是會(huì)發(fā)現(xiàn)不對(duì)勁,，谷歌似乎外邊框更深了,，這其實(shí)還是因?yàn)椋覀円婚_(kāi)始在table上面加了border=1的原因,，因?yàn)楸旧砭徒otable加了一個(gè)默認(rèn)的黑色線條樣式,，就是我們上面說(shuō)的，th和td以及table都有默認(rèn)的黑色邊線,，因此如果需要徹底解決這個(gè)問(wèn)題,，讓邊框可以正常顯示，應(yīng)該這么寫(xiě)：  <style> table,table tr th, table tr td { border:1px solid #0094ff; } table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;} </style> <table> <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr> <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr> <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr> <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr> </table>
總結(jié)一下： Html中table的屬性： border= “1”：給整個(gè)表格（包括表格及每一個(gè)單元格）加上1像素的黑色邊框,， 其等同于css中的： table,table tr th, table tr td { border:1px solid #0094ff; }
cellpadding=“0”：單元格邊距等于0,，其默認(rèn)值為1px， 其等同于css中的：{padding：0;}
cellspacing="0"：單元格間距等于0,，其默認(rèn)值為2px,， 其等同于css中的：border-collapse: collapse（邊框合并），但又不完全相同,，cellspacing僅間距,，而border-collapse使臨近的邊線合并成一條邊線，也就避免了cellspacing中邊線重合造成邊線加粗的問(wèn)題,。所以在這里不提倡使用html屬性設(shè)置表格邊框時(shí)將cellspacing設(shè)置為0,，，如果你希望他等于0,，更提倡使用css樣式屬性的方法去設(shè)置表格的邊框,，并使用border-collapse: collapse去合并邊線，而不是將cellspacing設(shè)置為0,，造成重合邊線加粗的問(wèn)題,。
總結(jié)來(lái)說(shuō)，給表格加邊框,，有兩種方式： 1,、Html屬性，行內(nèi)加，邊框默認(rèn)為黑色 <table border="1" cellpadding="2" cellspacing="0" > <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr> <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr> <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr> <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr> </table> 如圖：
2,、Css樣式,，可以自定義你喜歡的顏色，大小,，樣式： <style> table,table tr th, table tr td { border:1px solid #0094ff; } table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse; padding:2px;} </style> <table > <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr> <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr> <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr> <tr><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td><td>內(nèi)容</td></tr> </table> 如圖： 經(jīng)此總結(jié),，我發(fā)現(xiàn)很多時(shí)候我都誤用了表格邊框的很多東西，實(shí)際上,，用第一種方法的時(shí)候就無(wú)需使用第二種方法,，兩種方式混合在一起使用就會(huì)出現(xiàn)我前面說(shuō)很多問(wèn)題。
作者：leona 版權(quán)聲明：本文版權(quán)歸作者和博客園共有,，歡迎轉(zhuǎn)載,，但未經(jīng)作者同意必須保留此段聲明，且在文章頁(yè)面明顯位置給出原文鏈接
|
|
|
,，也就是border=1,，意思就是給表格的每一格,，及邊框加上1像素的邊框
這時(shí)表格大小為：200*118px
這時(shí)表格大小為：200*110px
這個(gè)時(shí)候我們發(fā)現(xiàn)，css中的border其實(shí)就是給表格加了一個(gè)外邊框而已
（Google）
（firefox）
