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;

}

第二种,使用ie中特有的属性,不支持除ie外的浏览器

第三种，整个表格的背景为黑色，每个单元格背景为白色，单无格间距为1,表格粗细为0

背景设置式－细边框表格
text	text
text	text

第四种 啥也不说了，直接代码表示(一个style="BORDER-COLLAPSE:collapse"搞定)

比较：

第一种和第四种支持 ie和ff但是第四种更简单一些

第三种也支持所有浏览器，但实现起来比较麻烦，很痛苦

第二种虽然实现简单但是兼容性差，只支持ie

第四种自我感觉最好用