table表格中单元格的合并

最新推荐文章于 2024-04-29 11:15:32 发布

绿皮车的忧伤

最新推荐文章于 2024-04-29 11:15:32 发布

阅读量1.4w

点赞数 11

文章标签： html5 javascript css

本文链接：https://blog.csdn.net/greentrainsad/article/details/127632115

版权

table表格中单元格的合并

table表格中单元格的合并很多朋友不一定了解，今天我就写一篇博客来跟大家分享一下table表格中的跨行合并和跨列合并。

我们先看一个合并过的表格，大家可以先思考一下这种表格通过代码是怎么实现的。

解析：我们先要知道这是一个四行四列的表格，

第一行的第三个和第四个单元格跨列合并

第三行和第四行的我一个和第二个单元格跨列合并以后，再进行跨行合并

最后是第三行和第四行的最后一个单元格跨行合并了

注意：超过两个单元格的跨行合并的前提一定是先跨列合并，再跨行合并。

合并单元格的公式或者方法分享：

合并单元格：
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
目标单元格（写合并代码）
跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码

合并单元格三部曲
1.先确定是跨行还是跨列合并
2.找到目标单元格，写上合并方式=合并的单元格数量。比如：<td colspan=“2”></td>
3.删除多余的单元格。

这个公式非常清晰，大家一定要理解透呀。接下来我把这个表格的代码贴在博文中，大家可以好好研究一下。

<body>
    <table border="1" width="600" height="230" cellspacing="0">
<tr >
    <td></td>
    <td></td>
    <td colspan="2"></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td colspan="2" rowspan="2"></td>
    <td></td>
    <td rowspan="2"></td>
</tr>
<tr>
    <td></td>
</tr>
    </table>
    
</body>

好啦，今天的分享就到这儿啦，大家想要了解什么内容也可以私信我哟~