HTML代码制作的表格合并单元格教程

前言

        在HTML代码里面，如果我们要合并单元格，就需要用到两个属性，

        一个是合并行单元格，还有一个就是合并列单元格，分别是 rowspan 以及 colspan  这两个属性。

案例表格

          我以下面这个表格为本文的演示表格，教程以这个表格以及源代码为案例进行讲解。
 
          下面这个是本文将使用到的案例表格

          
     
          此为表格的源代码，关于HTML制作表格的教程本站之前有发布过文章，各位可以去翻一下。

<table border="1">
<tr>
<th>古诗</th>
<th>古诗</th>
<th>古诗</th>
<th>古诗</th>
</tr>
<tr>
<th>古诗</th>
<td>清明时节雨</td>
<td>纷纷路上行</td>
<td>人欲断魂</td>
 </ tr>
<tr>
<th>古诗</th>
<td>野火烧不尽</td>
<td>春风吹又生</td>
<td>远芳侵古道</td>
</tr>
</table>

表格合并行单元格

        在表格里面，通常会用很多相同的内容出现，然而我们可以把这些重复的内容合并成为一个单元格，这样可以省很多事，在办公软件里面，合并单元格只需要鼠标操作几下就行了，但是在html里面却要依靠属性来完成这个操作。

     合并行单元格之后的效果：

      合并行单元格的源代码：.

<table border="1">
<tr>
<th rowspan="3">古诗</th>
<th>古诗</th>
<th>古诗</th>
<th>古诗</th>
</tr>
<tr>
<td>清明时节雨</td>
<td>纷纷路上行</td>
<td>人欲断魂</td>
 </tr>
<tr>
<td>野火烧不尽</td>
<td>春风吹又生</td>
<td>远芳侵古道</td>
</tr>
</table>

表格合并列单元格

      合并单元列的方法和合并行的方法是一样的，只不过使用的却是 colspan 这个属性，演示效果和源代码如下

    表格合并列单元格演示效果：

       表格合并列单元格的源代码：

<table border="1">
<tr>
<th colspan="4">古诗</th>
</tr>
<tr>
<th>古诗</th>
<td>清明时节雨</td>
<td>纷纷路上行</td>
<td>人欲断魂</td>
 </tr>
<tr>
<th>古诗</th>
<td>野火烧不尽</td>
<td>春风吹又生</td>
<td>远芳侵古道</td>
</tr></table>

后记

        rowspan 和 colspan 属性所对应的值，就是你要合并单元格的数量，如果值为2，那就是合并两个单元格，rowspan属性的意思就是合并两个相对于的行，colspan属性的意思就是合并两个相对的列，之所以说这个是因为很多人在对于属性的理解上面都会出现一点问题。