、什么是合并单元格？

一个表格中分为 行 和 列 ，有时候你经常在网页中看到类似这样的表格，有时候是合并了列，有时候是合并了行。那么这个是怎么做的？也是通过下面的方法实现的。

二、怎么合并？

向单元格添加属性即可实现，合并 列 和 行的属性不一样

1、合并列的属性：clospan="2" //要合并几列数字就是几

2、合并行的属性：rowspan="2" //同理，要合并几行数字就是几

3、合并后的单元格（行或列）必然会自动多出来一个，需要手动删掉。

4、重点：合并单元格只和 td 标签有关系：

（1）合并列：是左右合并，在左侧的 td 标签中添加 colspan="2" 要合并的 td 的数量。

（2）合并行：是上下合并，在上面的 td 标签中添加 rowspan="2" 要合并的td的数量。

（3）合并完后删除多余的 td 标签。

三、两个属性的用法

1、合并 列 的用法：

（1）首先确定你要合并的单元格在第几行第几列，然后找到它，从他的td标签中添加属性。

例如要合并第4行的，第4和第5列：

<tr>
    <td>第三节</td>
    <td>html</td>
    <td>css</td>
    <td colspan="2">php</td> <!-- 合并 列 的用法-->
    <td>php</td>
  </tr>

2、合并 行 的用法：

例如下面：合并第3行和第4行的第1列。

完整代码：↓

己美化吧

<section>

<table id="addrow" border=1>

<tr>

<td></td>

<td>序号</td>

<td></td>

</tr>

<tr>

<td></td>

<td>1</td>

<td></td>

</tr>

</table>

<button onclick='AddRow();'>添加行</button>

</section>

<script>

//添加行

function AddRow() {

// 被点击的目标标签tagName 如INPUT DIV

var clicktagname = $(event.target).get(0).tagName;

//获取点击对象

var clickedNode = event.target;

var $table = $(clickedNode).closest("section").find("table:first");

var tableId = $table.attr("id");

//var $table=$("#"+tableId);

var numRows = $table.find("tr").length; //行数

if(numRows > 20) { //数据行最多10行 共11行

mscAlert("别再加了！");

return false;

} else {

numRows = $table.find("tr").length;

$("#" + tableId + " tr:last").clone(false).insertBefore("#" + tableId + " tr:eq(1)");

}

for(var i = 1; i < numRows + 1; i++) { //第二列序号

$('#' + tableId + ' tr:eq(' + i + ') td:eq(1)').text(i);

}

}

</script>