zoukankan      html  css  js  c++  java
  • html之colspan && rowspan讲解

    1.colspan && rowspan均在td标签中使用

    2.每个单元格大小一致的前提

    <table border="1" bordercolor="red">
    <tr>
        <td>nokiacomputer</td>
        <td>nokiacomputer</td>
        <td>nokiacomputer</td>
    </tr>
    <tr>
        <td>nokiacomputer</td>
        <td>nokiacomputer</td>
        <td>nokiacomputer</td>
    </tr>
    </table>

    效果:

    colspan属性代码:

    <table border="1" bordercolor="red">
    <tr>
        <td>nokiacomputer</td>
        <td>nokiacomputer</td>
        <td>nokiacomputer</td>
    </tr>
    <tr>
        <td colspan="3">nokiacomputer</td>
    </tr>
    </table>
    效果:

    全面举例说明:

    一行一列的表格:

    <table>

    <tr>

    <td></td>

    </tr>

    </table>

    一行两列的表格:

    <table>

    <tr>

    <td></td>

    <td></td>

    </tr>

    </table>

    一行三列的表格:

    <table>

    <tr>

    <td></td>

    <td></td>

    <td></td>

    </tr>

    </table>

    两行一列的表格:

    <table>

    <tr>

    <td></td>

    </tr>

    <tr>

    <td></td>

    </tr>

    </table>

    两行两列的表格:

    <table>

    <tr>

    <td></td>

    <td></td>

    </tr>

    <tr>

    <td></td>

    <td></td>

    </tr>

    </table>

    有趣的现象:

    <table border="1" bordercolor="red">
    <tr>
        <td rowspan="2">nokiacomputer</td>
        <td>nokiacomputer</td>
        <td>nokiacomputer</td>
    </tr>
    <tr>
        <td>nokiacomputer</td>
        <td>nokiacomputer</td>
        <td>nokiacomputer</td>
    </tr>
    <tr>
        <td>nokiacomputer</td>
        <td>nokiacomputer</td>
        <td>nokiacomputer</td>
    </tr>
    </table>

    效果:

    而在第二行去掉一个<td>nokiacomputer</td>时 ,

    代码如下:

    <table border="1" bordercolor="red">
    <tr>
        <td rowspan="2">nokiacomputer</td>
        <td>nokiacomputer</td>
        <td>nokiacomputer</td>
    </tr>
    <tr>
        <td>nokiacomputer</td>
        <td>nokiacomputer</td>
    </tr>
    <tr>
        <td>nokiacomputer</td>
        <td>nokiacomputer</td>
        <td>nokiacomputer</td>
    </tr>
    </table>

    效果:

    为什么多一列时会自动向后排?

    多两列时会不会也是这样的?

    效果:

    果然如此!

  • 相关阅读:
    Java实例_队列Queue用法
    JAVA中不同类型的取值范围
    面试被问到的题
    关于Maven启动项目各种.xml文件和.properties文件找不到问题的解决
    jupyter使用
    java中“==”和equal区别
    redis持久化的几种方式
    事务是什么,以及事务四个特性
    Java中的String类能否被继承?为什么?以及final和static的区别
    pytest.mark.parametrize 参数化
  • 原文地址:https://www.cnblogs.com/milantgh/p/3662653.html
Copyright © 2011-2022 走看看