zoukankan      html  css  js  c++  java
  • 不规则形状表格合并

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

    <!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>

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

  • 相关阅读:
    0 RabbitMQ概念
    java 排序
    spring整合redis(基于redisTemplate)
    http之content-type
    http协议讲解
    Java8 lambda 以及 Lambda在集合中的使用
    java中decimalFormat格式化数值
    找出占用的端口进程ID,并且杀死该进程
    CSS
    标签
  • 原文地址:https://www.cnblogs.com/xutao1517588477/p/10602765.html
Copyright © 2011-2022 走看看