zoukankan      html  css  js  c++  java
  • 表格的用法

    表格

    组合标签     table   tr  td

    table基本格式:<table>属性1="属性值1" 属性2="属性值2" 属性3="属性值3">表格内容</table>

    Table属性

                    Width  宽度    默认按照内容来

                   Cellpadding   边距

                     内容和边框的距离

                   Cellspacing   间距

                  单元格和单元格的距离

    border:边框属性。边框宽度值。不定义边框属性,表格就不显示边框。

    Tr和td的属性

            Width

            Height

            align:表格对齐方式  left|center|right

    其他标签:

           Th和td是同级标签     表头

           Caption和tr是同级标签       表格标题

    合并单元格(靠占位)  单元格的属性

    横向合并  colspan(向右合并)

    垂直合并  rowspan(向下合并)

     对合并单元格有一定的了解,在练习方面也有了头绪,希望越做越好!

    作业练习:

    复制代码
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style type="text/css">
        td{ height: 30px}
    </style>
    </head>
    
    <body>
    <table align="center">
        <tr>
            <td>受理员业务统计表</td>
        </tr>
    </table>
    <table align="right">
        <tr>
            <td>2017-01-02---2017-05-02</td>
        </tr>
    </table>
    <table border="1" width="100%" height="50%">
        <tr>
            <th rowspan="2">受理员</th>
            <th rowspan="2">受理数</th>
            <th rowspan="2">自办数</th>
            <th rowspan="2">直接解答</th>
            <th colspan="2">拟办意见</th>
            <th colspan="2">返回修改</th>
            <th colspan="3">工作类型</th>
        </tr>
        <tr>
            <td>同意</td>
            <td>比例</td>
            <td>数量</td>
            <td>比例</td>
            <td>建议件</td>
            <td>诉求件</td>
            <td>咨询件</td>
        </tr>
        <tr>
            <th rowspan="9">受理处</th>
            <td>王艳</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>    
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            
        </tr>
        <tr>
            <td>总计</td>
            <td>20</td>
            <td>20</td>    
            <td>20</td>    
            <td>20</td>    
            <td>20</td>
            <td>20</td>
            <td>20</td>
            <td>20</td>    
            <td>20</td>    
        </tr>
        <tr>
            <th rowspan="9">话务组</th>
               <td>王艳</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
        </tr>
        <tr>
                <td>王艳</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
        </tr>
        <tr>
            <td>王艳</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            
        </tr>
        <tr>
            <td>王艳</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            
        </tr>
        <tr>
                <td>总计</td>
                <td>20</td>
                <td>20</td>
                <td>20</td>
                <td>20</td>
                <td>20</td>
                <td>20</td>
                <td>20</td>
                <td>20</td>
                <td>20</td>
                <td>20</td>
        </tr>
    </table>
    </body>
    </html>
    复制代码

    运行结果:

    所遇问题:

    在练习期间碰到很多问题,对表格使用不太熟练,在规整代码时出错,错行之类的问题;

    还是要多加练习,熟记所学知识点,掌握代码运用!

    下面是对理工大学官网页面进行的一个简单操作:

    运行结果如下:

  • 相关阅读:
    Redis 主从复制
    Redis 持久化
    Redis 的消息订阅/发布
    Redis 排序功能 -- SORT
    Redis 过期时间与缓存应用
    Redis 事务
    Redis 5种数据类型的常用命令
    Java 框架的核心 -- 反射
    类的加载和初始化 ---- new 一个对象时,在JVM 中的过程是什么
    了解spring
  • 原文地址:https://www.cnblogs.com/qq1312583369/p/10258428.html
Copyright © 2011-2022 走看看