我们在进行网页编辑的时候经常会用到TABLE表格，但是百翔网络 发现，如果直接在<TABLE>标记中用border="1" 表格的边框会比较粗，很不好看，这个问题其实一直都是一个比较头疼的问题，今天下午，百翔网络没事，顺便研究了一下如何设置表格边框为1像素灰色，这样的表框看起来会比较协调，总结代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>设置表格边框</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE>
TABLE {
LINE-HEIGHT: 20px; MARGIN: 20px auto; WIDTH: 980px; BORDER-COLLAPSE: collapse
}
TD {
BORDER: #c0c0c0 1px solid;
}
</STYLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD vAlign=center width=107>
<P>套餐（年） </P></TD>
<TD vAlign=center width=158>
<P>400电话资费 </P></TD>
<TD vAlign=center width=114>
<P>最低消费 </P></TD>
<TD vAlign=center width=319>
<P>400电话资费套餐说明 </P></TD></TR>
<TR>
<TD vAlign=center width=107>
<P>600套餐 </P></TD>
<TD vAlign=center width=158>
<P>长途0.30元/分钟<BR></P></TD>
<TD vAlign=center width=114>
<P>30元/月 </P></TD>
<TD vAlign=center width=319>
<P>预存360元，尾号4位带4，不带689及连号 </P></TD></TR>
<TR>
<TD vAlign=center width=107>
<P>600套餐 </P></TD>
<TD vAlign=center width=158>
<P>长途0.25元/分钟<BR></P></TD>
<TD vAlign=center width=114>
<P>50元/月 </P></TD>
<TD vAlign=center width=319>
<P>预存600元，尾号6位不带连号 </P></TD></TR>
<TR>
<TD vAlign=center width=107>
<P>1000套餐 </P></TD>
<TD vAlign=center width=158>
<P>长途0.20元/分钟 </P></TD>
<TD vAlign=center width=114>
<P>70元/月 </P></TD>
<TD vAlign=center width=319>
<P>预存1000元，尾号4位不带连号 </P></TD></TR>
<TR>
<TD vAlign=center width=107>
<P>1500套餐 </P></TD>
<TD vAlign=center width=158>
<P>长途0.18元/分钟 </P></TD>
<TD vAlign=center width=114>
<P>100元/月 </P></TD>
<TD vAlign=center width=319>
<P>预存1500元，普通号码 </P></TD></TR>
<TR>
<TD vAlign=center width=107>
<P>2400套餐 </P></TD>
<TD vAlign=center width=158>
<P>长途0.16元/分钟 </P></TD>
<TD vAlign=center width=114>
<P>100元/月 </P></TD>
<TD vAlign=center width=319>
<P>预存2400元，可选C类靓号 </P></TD></TR>
</TABLE>
</BODY></HTML>
重点：CSS border-collapse 属性
border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。
| 默认值： |
separate |
| 继承性： |
yes |
| 版本： |
CSS2 |
| JavaScript 语法： |
object.style.borderCollapse="collapse" |
