0. 概述

在写文章的时候，我经常需要用到表格（Table），有时出于美观和直观的缘故需要合并单元格，本文就介绍一下在 HTML 中如何合并 Table 中的单元格。

合并单元格有两种情况（要算三种也可以），分别是 行合并 和 列合并，当然，如果你强行再加一个的话，行列一起合并 也算，但是其实这个就是 行合并 和 列合并 的结合。

1. 行合并

所谓的行合并，就是在表格中上下两格或者多格合并在一起，效果类似于：

图 1：行合并示例

要实现这个效果，只需要在所有合并行的第一行的 <td> 上加入属性：rowspan="行数"，然后下面被合并的行就不用加 <td> 了，HTML 示例为：

[root@liqiang.io]# cat rowspan.html
<table>
    <tr>
        <th>表头一</th>
        <th>表头二</th>
    </tr>
    <tr>
        <td rowspan="2">听说我被合并了？</td>
        <td>这里是有两个 TD 的</td>
    </tr>
    <tr>
        <td>这里只有一个 TD</td>
    </tr>
</table>

2. 列合并

图 2：列合并示例

这个就是所谓的列合并，将两个列合并成一个：

• 将需要合并的多个列的第一列的 TD 加上属性：colspan="2"
• 被合并掉的 TD 就不用写出来了

HTML 代码示例为：

<table>
  <tr>
    <th>表头一</th>
    <th>表头二</th>
  </tr>
  <tr>
    <td colspan="2">听说我被合并了？</td>
  </tr>
  <tr>
    <td>上面 TR 只有一个 TD</td>
    <td>这个 TR 是有两个 TD</td>
  </tr>
</table>

3. 行列合并

如果想要行列一起合并的话，其实就是结合 行合并 和 列合并，操作内容都是一样的：

图 3：行列合并效果

HTML 代码也很简单：

<table>
  <tr>
    <th>表头一</th>
    <th>表头二</th>
    <th>表头三</th>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">听说我被合并了？</td>
    <td>（0，2）</td>
  </tr>
  <tr>
      <td> （1，2）</td>
  </tr>
  <tr>
      <td>（2，0）</td>
      <td>（2，1）</td>
      <td>（2，2）</td>
  </tr>
</table>

3. Ref

• How to merge table columns in HTML?