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>

    效果:

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

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

    效果:

    果然如此!

  • 相关阅读:
    百度地图引用
    【转,待验证】HTML文件中也玩include文件包含
    【转】php.ini 里加载的DLL文件 中文说明
    iOS 申请账号使用的邓白氏网址 (免费)
    Xcode 插件
    关于时间的
    mac 终端命令集合
    2015年3月苹果新的审核标准(PDF)
    2015年3月苹果新的审核标准(中文)
    2015年3月苹果新的审核标准(英文)
  • 原文地址:https://www.cnblogs.com/milantgh/p/3662653.html
Copyright © 2011-2022 走看看