HTML-table-合并单元格
程序员文章站
2022-05-14 07:54:20
...
如图的表格:
合并单元格11+12
合并单元格22+32
合并单元格33+34+43+44
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格-合并单元格</title>
</head>
<body>
<table border="1px" width="200px" height="200px" align="center" cellspacing="0" cellpadding="0"> <!--4行4列(tr->行 td->列)-->
<!--cellspacing:边框间距离(如果不为0,则表格边框间有空隙)-->
<!--cellpadding:表格内容距离边框距离(内边距)-->
<tr>
<td colspan="2" align="center">11</td><!--跨列合并单元格-->
<!--<td>12</td> 合并第一行,第一,二列 需要删除第二列-->
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td rowspan="2" align="center">22</td><!--跨行合并单元格-->
<!--把第二列的二,三行合并-->
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<!--把第二列的二,三行合并,删除“<td>32</td>”-->
<td rowspan="2" colspan="2" align="center">33</td><!--合并单元格33,34,43,44-->
</tr>
<tr>
<td>41</td>
<td>42</td>
</tr>
</table>
</body>
</html>
合并结果如图: