html细边框表格代码,html中表格细边框的四种实现及其比较.doc

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

第四种自我感觉最好用