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>

    效果:

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

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

    效果:

    果然如此!

  • 相关阅读:
    leetcode 5286 网格中的最短路径
    C++ STL
    Transformer解读
    global_steps
    tensorflow中的一些语法问题
    生成器与yield关键字
    CNN神经网络一维卷积和二维卷积
    electron-builder打包后,运行的程序左上角图标不显示,桌面和状态栏的显示正常,是什么情况。
    git慢设置代理
    js使用正则表达式获取字符串中特定的字符
  • 原文地址:https://www.cnblogs.com/milantgh/p/3662653.html
Copyright © 2011-2022 走看看