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>

    效果:

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

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

    效果:

    果然如此!

  • 相关阅读:
    python3.6.3中html页面转化成pdf
    python3 基于zabbix 自动抓取监控图片
    AWS EC2 云服务器 Red Hat Enterprise Linux Server release 7.4 (Maipo) vnc远程连接教程
    python处理两个json根据序号进行一对一组合
    CentOS6.9 内核升级(2.6.32-696.16.1升级到4.4.101-1.el6.el)
    给List分页
    Quartz的学习记录
    Uri
    Android studio 随笔
    android 随笔之 GridLayout
  • 原文地址:https://www.cnblogs.com/milantgh/p/3662653.html
Copyright © 2011-2022 走看看