html中表格細邊框的四種實現及其比較

?html中表格細邊框的四種實現及其比較

第一種

使用css

!--- 華麗的分隔線。。 -- .box ?border-top-width: 1px;?border-right-width: 0px;?border-bottom-width: 0px;?border-left-width: 1px;?border-top-style: solid;?border-right-style: solid;?border-bottom-style: solid;?border-left-style: solid;?border-top-color: #000000;?border-right-color: #000000;?border-bottom-color: #000000;?border-left-color: #000000; .box td ?border-top-width: 0px;?border-right-width: 1px;?border-bottom-width: 1px;?border-left-width: 0px;?border-top-style: solid;?border-right-style: solid;?border-bottom-style: solid;?border-left-style: solid;?border-top-color: #000000;?border-right-color: #000000;?border-bottom-color: #000000;?border-left-color: #000000;?text-align: center;?font-size: 13px;?font-weight: bold;?word-break:?? break-all; table width "640" height "480" border "1"? cellspacing "0" cellpadding "0" class "box" ? ? ? !--- 華麗的分隔線結束 --

第二種,使用ie中特有的屬性,不支持除ie外的瀏覽器

!--- 憂傷的分隔線start -- table width "640" height "480" border "1"? cellspacing "0" cellpadding "0" bordercolordark "#FFFFFF" bordercolorlight "#000000" ? ? ? !--- 憂傷的分隔線end --

?第三種，整個表格的背景為黑色，每個單元格背景為白色，單無格間距為1,表格粗細為0

!--- 痛苦的分隔線start -- table width "200" border "0" cellpadding "2" cellspacing "1" bgcolor "#000000" th bgcolor "#FFFFFF" colspan "2" 背景設置式－細邊框表格 td bgcolor "#FFFFFF" text td bgcolor "#FFFFFF" text td bgcolor "#FFFFFF" text td bgcolor "#FFFFFF" text !--- 痛苦的分隔線end --

第四種 啥也不說了，直接代碼表示 一個style "BORDER-COLLAPSE:collapse"搞定

!--- 漂亮的分隔線start --

table width "640" height "480" border "1"? cellspacing "0" cellpadding "0" bordercolor "#000000" style "BORDER-COLLAPSE: collapse" ? ? ? !--- 漂亮的分隔線end --

?比較：

第一種和第四種支持 ie和ff但是第四種更簡單一些

第三種也支持所有瀏覽器，但實現起來比較麻煩，很痛苦

第二種雖然實現簡單但是兼容性差，只支持ie

第四種自我感覺最好用