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>

    效果:

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

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

    效果:

    果然如此!

  • 相关阅读:
    反射
    ASP.NET
    解析命令行
    Private和Protected方法
    洗牌算法
    目标指向、Icon图标的错误
    数字签名与数字证书
    (Java实现) 最大团问题 部落卫队
    (Java实现) 最大团问题 部落卫队
    (Java实现)洛谷 P1164 小A点菜
  • 原文地址:https://www.cnblogs.com/milantgh/p/3662653.html
Copyright © 2011-2022 走看看