在HTML中经常会用到表格，但由于我们想要的表格总是需要不规则的。而表格的合并常常会经常用到，今天我们来看一下表格的合并。
首先我们要了解一下合并的步骤
先确认是跨行合并还是跨列合并根据单元格先上后下，先左后右来进行合并如果要合并的单元格有内容则需要先将内容消除在表格合并前需要明确我们的合并是跨行合并还是跨列合并
一、跨行合并rowspan
在 HTML 中，可以使用属性 rowspan 来合并行，即合并纵向的多个相邻单元格
首先我做了一个HTML表格
现在我想将5、10、15合并，接下来按照跨行的步骤进行
步骤：
确定为跨行合并跨行合并按照先上后下的原则进行合并，即把属性rowspan放到需要合并的最上面单元格的td标签中。rowspan的参数数字是你要合并几个表格就是多少将被合并的td标签和其内容全部删除所以我们将属性rowspan放到5的td标签中
发生了错误，那这个为什么呢？
原因是我忘记将10，15的td标签删除，所以出现了错误
注意：当我们弄完rowspan属性后一定要将剩下被合并的td标签删除 具体代码如下：
注意：10，15的td标签被删除了 <tr> <td class="b1"> <p>1</p> </td> <td class="b1"> <p>2</p> </td> <td class="b1"> <p>3</p> </td> <td class="b1"> <p>4</p> </td> <td class="b1" rowspan="3"> <p>5</p> </td> </tr> <tr> <td class="b1"> <p>6</p> </td> <td class="b1"> <p>7</p> </td> <td class="b1"> <p>8</p> </td> <td class="b1"> <p>9</p> </td> </tr> <tr> <td class="b1"> <p>11</p> </td> <td class="b1"> <p>12</p> </td> <td class="b1"> <p>13</p> </td> <td class="b1"> <p>14</p> </td> </tr>当我们删除后：
叮咚，我们成功了！
二、跨列合并colspan
在 HTML 中，可以使用属性 colspan 来合并列，即合并横向的多个相邻单元格。
还是我们原来的表格：
当我们想要将11，12，13进行合并，具体的步骤如下：
步骤：
确定为跨列合并跨行合并按照先左后右的原则进行合并，即把属性colspan放到需要合并的最左边单元格的td标签中。colspan的参数数字是你要合并几个表格就是多少将被合并的td标签和其内容全部删除代码如下：
注意：12，13的td标签被删除了 <tr> <td class="b1" colspan="3"> <p>11</p> </td> <td class="b1"> <p>14</p> </td> <td class="b1"> <p>15</p> </td> </tr>运行之后：
大体的步骤与问题和跨行合并类似。 好啦，到这里我们的跨列合并也完毕了！ 如果大家有什么疑问可以在评论区留言或者私信我哈！ 附上跨行合并和跨列合并的全部代码，大家可以参考一下！
跨行合并的全部代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格合并</title> </head> <style type="text/css"> body{ position: relative; margin:60px; } .b1{ width:60px; text-align: center; } </style> <body> <table border="1"> <tr> <td class="b1"> <p>1</p> </td> <td class="b1"> <p>2</p> </td> <td class="b1"> <p>3</p> </td> <td class="b1"> <p>4</p> </td> <td class="b1" rowspan="3"> <p>5</p> </td> </tr> <tr> <td class="b1"> <p>6</p> </td> <td class="b1"> <p>7</p> </td> <td class="b1"> <p>8</p> </td> <td class="b1"> <p>9</p> </td> </tr> <tr> <td class="b1"> <p>11</p> </td> <td class="b1"> <p>12</p> </td> <td class="b1"> <p>13</p> </td> <td class="b1"> <p>14</p> </td> </tr> <tr> <td class="b1"> <p>16</p> </td> <td class="b1"> <p>17</p> </td> <td class="b1"> <p>18</p> </td> <td class="b1"> <p>19</p> </td> <td class="b1"> <p>20</p> </td> </tr> </table> </body> </html>跨列合并的全部代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格合并</title> </head> <style type="text/css"> body{ position: relative; margin:60px; } .b1{ width:60px; text-align: center; } </style> <body> <table border="1"> <tr> <td class="b1"> <p>1</p> </td> <td class="b1"> <p>2</p> </td> <td class="b1"> <p>3</p> </td> <td class="b1"> <p>4</p> </td> <td class="b1"> <p>5</p> </td> </tr> <tr> <td class="b1"> <p>6</p> </td> <td class="b1"> <p>7</p> </td> <td class="b1"> <p>8</p> </td> <td class="b1"> <p>9</p> </td> <td class="b1"> <p>10</p> </td> </tr> <tr> <td class="b1" colspan="3"> <p>11</p> </td> <td class="b1"> <p>14</p> </td> <td class="b1"> <p>15</p> </td> </tr> <tr> <td class="b1"> <p>16</p> </td> <td class="b1"> <p>17</p> </td> <td class="b1"> <p>18</p> </td> <td class="b1"> <p>19</p> </td> <td class="b1"> <p>20</p> </td> </tr> </table> </body> </html>