一、什么是合并单元格？

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

二、怎么合并？

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

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列。

完整代码：↓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--网页抬头-->
    <title>Title</title>
</head>

<body>
<table border="2">
  <!-- 给表格添加标题 -->
  <caption><h2>课程表</h2></caption>
  <tr>
    <td></td>
    <th>周一课程</th>
    <th>周二课程</th>
    <th>周三课程</th>
    <th>周四课程</th>
  </tr>

  <tr>
    <td>第一节</td>
    <td>html</td>
    <td>css</td>
    <td>php</td>
    <td>python</td>
  </tr>

  <tr>
    <td>第二节</td>
    <td rowspan="2">html</td>  <!-- 合并 行 的用法-->
    <td>css</td>
    <td>php</td>
    <td>python</td>
  </tr>

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

</table>
</body>

</html>

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

html开发笔记20-合并单元格-列和行

一、什么是合并单元格？

二、怎么合并？

三、两个属性的用法