0. 概述

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

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

1. 行合并

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

图 1:行合并示例

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

  1. [[email protected].io]# cat rowspan.html
  2. <table>
  3. <tr>
  4. <th>表头一</th>
  5. <th>表头二</th>
  6. </tr>
  7. <tr>
  8. <td rowspan="2">听说我被合并了?</td>
  9. <td>这里是有两个 TD 的</td>
  10. </tr>
  11. <tr>
  12. <td>这里只有一个 TD</td>
  13. </tr>
  14. </table>

2. 列合并

图 2:列合并示例

这个就是所谓的列合并,将两个列合并成一个:

HTML 代码示例为:

  1. <table>
  2. <tr>
  3. <th>表头一</th>
  4. <th>表头二</th>
  5. </tr>
  6. <tr>
  7. <td colspan="2">听说我被合并了?</td>
  8. </tr>
  9. <tr>
  10. <td>上面 TR 只有一个 TD</td>
  11. <td>这个 TR 是有两个 TD</td>
  12. </tr>
  13. </table>

3. 行列合并

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

图 3:行列合并效果

HTML 代码也很简单:

  1. <table>
  2. <tr>
  3. <th>表头一</th>
  4. <th>表头二</th>
  5. <th>表头三</th>
  6. </tr>
  7. <tr>
  8. <td colspan="2" rowspan="2">听说我被合并了?</td>
  9. <td>(0,2)</td>
  10. </tr>
  11. <tr>
  12. <td> (1,2)</td>
  13. </tr>
  14. <tr>
  15. <td>(2,0)</td>
  16. <td>(2,1)</td>
  17. <td>(2,2)</td>
  18. </tr>
  19. </table>

3. Ref