zoukankan      html  css  js  c++  java
  • 7.31前端之table练习

    7.31前端之table练习

    Html部分

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="author" content="Lucifer" />
    <meta name="description" content="This is a table" />
    <link rel="stylesheet" href="../../../Css/Coding/Code/TableCssDemoNo1.css" />
    <title>这是一个table的练习,制作一个table</title>
    </head>
    <body>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
    <td align="center" class="biaoti" height="60">这只是一张表</td>
    </tr>
    <tr>
    <td align="right" height="25">2021-07-31</td>
    </tr>
    </table>

    <table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#cccccc" class="tabtop13" align="center">
    <tr>
    <td colspan="2" class="btbg font-center titfont" rowspan="2" align="center">受理员</td>
    <td width="10%" class="btbg font-center titfont" rowspan="2" align="center">受理数</td>
    <td width="10%" class="btbg font-center titfont" rowspan="2" align="center">自办数</td>
    <td width="15%" class="btbg font-center titfont" rowspan="2" align="center">直接解答</td>
    <td colspan="2" class="btbg font-center titfont">拟办意见</td>
    <td colspan="2" class="btbg font-center titfont">返回修改</td>
    <td colspan="3" class="btbg font-center titfont" align="center">工单类型</td>
    </tr>
    <tr>
    <td width="6%" class="btbg font-center">同意</td>
    <td width="6%" class="btbg font-center">比例</td>
    <td width="6%" class="btbg font-center">数量</td>
    <td width="6%" class="btbg font-center">比例</td>
    <td width="8%" class="btbg font-center">建议件</td>
    <td width="8%" class="btbg font-center">诉求件</td>
    <td width="8%" class="btbg font-center">咨询件</td>
    </tr>
    <tr>
    <td width="4%" rowspan="8" class="btbg1 font-center">受理处</td>
    <td width="8%" class="btbg2">韩丽慧</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td class="btbg2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td class="btbg2 font-center">总计</td>
    <td class="btbg2 font-center">&nbsp;</td>
    <td class="btbg2 font-center">&nbsp;</td>
    <td class="btbg2 font-center">&nbsp;</td>
    <td class="btbg2 font-center">&nbsp;</td>
    <td class="btbg2 font-center">&nbsp;</td>
    <td class="btbg2 font-center">&nbsp;</td>
    <td class="btbg2 font-center">&nbsp;</td>
    <td class="btbg2 font-center">&nbsp;</td>
    <td class="btbg2 font-center">&nbsp;</td>
    <td class="btbg2 font-center">&nbsp;</td>
    </tr>
    </table>
    </body>
    </html>

    Css部分

    @charset "utf-8";
    /* CSS Document */
    .tabtop13{
    margin-top: 13px;
    }
    .tabtop13 td{
    background-color: #ffffff;
    height: 25px;
    line-height: 150%;
    }
    .font-center{
    text-align: center;
    }
    .btbg{
    background: #e9faff !important;
    }
    .btbg1{
    background: #f2fbfe !important;
    }
    .btbg2{
    background: #f3f3f3 !important;
    }
    .biaoti{
    font-family: 微软雅黑;
    font-size: 26px;
    font-weight: bold;
    border-bottom:1px dashed #CCCCCC;
    color: #255e95;
    }
    .titfont {
    font-family: 微软雅黑;
    font-size: 16px;
    font-weight: bold;
    color: #255e95;
    background: url(../images/ico3.gif) no-repeat 15px center;
    background-color:#e9faff;
    }
    .tabtxt2 {
    font-family: 微软雅黑;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    padding-right: 10px;
    color:#327cd1;
    }
    .tabtxt3 {
    font-family: 微软雅黑;
    font-size: 14px;
    padding-left: 15px;
    color: #000;
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 20px;
    }

     

    It's a lonely road!!!
  • 相关阅读:
    fedora如何删除某个包且不删除依赖它的相关包
    git分支切换时的时间戳问题
    [Centos] ERROR: Could not find useradd in chroot, maybe the install failed?
    linux通过python设置系统默认编码
    linux设置系统时间和时区
    python: "TypeError: 'type' object is not subscriptable"
    如何搭建http服务仓库
    [转载]RPM中SPEC常用路径以及宏变量
    spec文件写作规范
    GeoServer中利用SLD配图之矢量图层配图
  • 原文地址:https://www.cnblogs.com/JunkingBoy/p/15104923.html
Copyright © 2011-2022 走看看