日期:2014-05-17  浏览次数:20943 次

html中合并单元格
在html中table有没有办法可以将上下2行合并为一行,我知道合并一列可以用colspan,不知道合并一行可不可以?

------解决方案--------------------
也想知道,关注。。。
------解决方案--------------------
合并一行用rowspan,用法和colspan一样!
------解决方案--------------------
合并行:rowspan
------解决方案--------------------
用rowspan这个属性,用法如下
HTML code

<table width=300 height=100 border=0 align="center" cellspacing=0 cellpadding=0>
 <tr>
  <td rowspan=3>例子</td>
  <td>选项一</td>
 </tr>
 <tr>
  <td>选项二</td>
 </tr>
 <tr>
  <td>选项三</td>
 </tr>
</table>

------解决方案--------------------
用rowspan
------解决方案--------------------
<style>
.td_blue{background-color:#3982F7;}
</style>

<table id="tableId" name="tableId" align="center" cellpadding="2" cellspacing="1" width="300" class="border3" border="2" >

 <tr>
<td align="left" class="color9" id="cor_1" colspan="2" rowSpan="1" height="43" width="50%" onclick="selTD(11);sel(1);">111</td>
<td align="left" class="color9" id="cor_2" colspan="2" rowSpan="1" height="43" width="50%" onclick="selTD(21);sel(2);">222</td>
</tr>
<tr>
<td align="left" class="color9" id="cor_3" colspan="2" rowSpan="1" height="43" width="50%" onclick="selTD(12);sel(3);">333</td>
<td align="left" class="color9" id="cor_4" colspan="2" rowSpan="1" height="43" width="50%" onclick="selTD(22);sel(4);">444</td>

</tr>
<tr>
<td align="left" class="color9" id="cor_5" colspan="2" rowSpan="1" height="43" width="50%" onclick="selTD(13);sel(5);">555</td>
<td align="left" class="color9" id="cor_6" colspan="2" rowSpan="1" height="43" width="50%" onclick="selTD(23);sel(6);">666</td>

</tr>
</table>
<p align="center"><input type="button" value="合并" onclick="selTD('join');sel(7);"></p>
<script>
function sel(i){

x=document.getElementById('cor_'+i)
if(i!=7){x.className="td_blue"}
}

var td_array=new Array();
var flag='td_flag';
var tdcol1="",tdcol2="",tdrow1="",tdrow2="";
function selTD(i)
{
i=i.toString();
if(flag!="td_flag"&&i!='join'){
tdcol2=i.substr(0,1)
tdrow2=i.substr(1,1)
}
if(flag=='td_flag'&&i!='join'){
tdcol1=i.substr(0,1)
tdrow1=i.substr(1,1)
flag=i
}

if(i=="join"){

doTab(tdcol1,tdcol2,tdrow1,tdrow2);
flag='td_flag';

}

}

function doTab(tdcol1,tdcol2,tdrow1,tdrow2){

if(tdcol1>tdcol2) {var temp=tdcol1;
tdcol1=tdcol2;
tdcol2=temp;
}
if(tdrow1>tdrow2) {var temp=tdrow1;