css给表格单元格加边框及table的bordercollapse属性

在http://www.pmob.co.uk/faqcss/index.htm看到以下的代码,是用css的方法给表格的单元格加边框,

<style type="text/css" media="screen">

.tableborder {

border:1px ridge #FF0000;
border-color: #FF0000 #00FF00 #FFFF00 #00FFFF;
}

</style>

And apply it to your tables in the body of the document:
<table class="tableborder" >
<tr>
<td>Hello look at my border</td>
</tr>
</table>

正好看到了border-collapse这个属性, 查看css 手册,有下面一段代码来讲解这些属性的.

<style>
#idCodeDiv{width:80%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;}
</style>

<script>
function rdl_change(e){
var oCodeDiv=document.all("idCodeDiv");
with (document.all("idSel")) var sValue=options[selectedIndex].value;
if (sValue!="null") {
document.all("idTable").style.borderCollapse=sValue;
oCodeDiv.innerText="border-collapse : "+sValue+";";
}
}
</script>

<table id=idTable width=100% height=70 bgcolor=#FF6633>
<tr><td bgcolor=#999999 rowspan=2> </td><td bgcolor=#999999> </td><td bgcolor=#999999> </td></tr>
<tr><td bgcolor=#999999> </td><td bgcolor=#999999 colspan=2> </td></tr>
</table>
<br>
<select id="idSel" onchange="rdl_change();">
<option value="null">---请选择参数---
<option value="collapse">collapse
<option value="separate">separate
</select>
<br>
<div id=idCodeDiv>border-collapse : separate ;</div>

记录下.顺便把 说明 也贴过来了.

语法：
border-collapse : separate | collapse
取值：

separate	:	默认值。边框独立（标准HTML）
collapse	:	相邻边被合并

说明：
设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 borderCollapse 。