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!!!
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/JunkingBoy/p/15104923.html