不规则形状表格合并

Posted xutao1517588477

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了不规则形状表格合并相关的知识，希望对你有一定的参考价值。

技术图片

在学习表格时我们会遇到一些既跨行又跨列合并的情况，此时可以用下面这种方法来实现。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Document</title>
    </head>
    <body>
        <br>
        <br>
        <br>
        <br>
        <table width="300px" height="300px" bordercolor="blue">
            <caption></caption> 
            <tr bgcolor="antiquewhite">
                <td colspan="2" rowspan="2"></td>
                <td></td>
            </tr>
            <tr bgcolor="aqua">
                <td></td>
            </tr>
            <tr bgcolor="aquamarine">
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </body>
</html>

但是需要特别指出的是，如果一个单元格既跨行又跨列合并了，那么最好不要再让相邻单元格也跨行或跨列合并了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Document</title>
    </head>
    <body>
        <br>
        <br>
        <br>
        <br>
        <table width="300px" height="300px" bordercolor="blue">
            <caption></caption> 
            <tr bgcolor="antiquewhite">
                <td colspan="2" rowspan="2"></td>
                <td></td>
            </tr>
            <tr bgcolor="aqua">
                <td rowspan="2"></td>
            </tr>
            <tr bgcolor="aquamarine">
                <td colspan="2"></td>
            </tr>
        </table>
    </body>
</html>

此时会出现如下所示的错误效果，可以看到单元格与单元格的尺寸不再一致了。

技术图片

以上是关于不规则形状表格合并的主要内容，如果未能解决你的问题，请参考以下文章

我可以在这个复杂的不规则形状的链接上使用 CSS 悬停吗

使用HTML编写一个网页：如何将图片依照想要的形状摆放，比如爱心。如何控制图片大小。请教如何写代码？

php如何合并PNG图片

java poi xwpf操作word生成一个表格怎么合并单元格,求大神指导!

JS（JavaScript）创建不规则表格 ,请高手帮忙实现一下啊

4.3 合并重复的条件执行片段