前端:简单的html表格和样式


1.代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        table
        {
            border-collapse: collapse;
            text-align: center;
            table-layout: fixed;
            width: 700px;
        }
        table td, table th
        {
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
        }
        table thead th
        {
            background-color: #CCE8EB;
            width: 100px;
        }
        table tr:nth-child(odd)
        {
            background: #fff;
        }
        table tr:nth-child(even)
        {
            background: #F5FAFA;
        }
    </style>

</head>
<body>
    <div style="width: 100%; height: 15px"></div>
    <table border="1">
        <tr><th colspan="9" style="text-align: left;">url: {url}</th></tr>
        <tr><th colspan="9" style="text-align: left;">时间范围: {time}</th></tr>
        <tr><th colspan="9" style="text-align: left;">总次数: {all_num}</th></tr>
        <tr>
            <td rowspan="6">TotalTime</td>
            <td>超时区间</td>
            <td>超时次数</td>
            <td rowspan="6">downtime</td>
            <td>超时区间</td>
            <td>超时次数</td>
            <td rowspan="6">HttpCode</td>
            <td>错误类型</td>
            <td>错误次数</td>
        </tr>
        <tr>
            <td>(3-5)</td>
            <td>{T(3-5)}</td>
            <td>(2-5)</td>
            <td>{d(2-5)}</td>
            <td>解析失败</td>
            <td>{解析失败}</td>
        </tr>
        <tr>
            <td>[5-10)</td>
            <td>{T[5-10)}</td>
            <td>[5-10)</td>
            <td>{d[5-10)}</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>[10-20)</td>
            <td>{T[10-20)}</td>
            <td>[10-20)</td>
            <td>{d[10-20)}</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>[20-60)</td>
            <td>{T[20-60)}</td>
            <td>[20-60)</td>
            <td>{d[20-60)}</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>[60,+)</td>
            <td>{T[60,+)}</td>
            <td>[60,+)</td>
            <td>{d[60,+)}</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="2">合计</td>
            <td>{T[num]}</td>
            <td rowspan="2" colspan="2"></td>
            <td>{d[num]}</td>
            <td rowspan="2" colspan="2"></td>
            <td>{H[num]}</td>
        </tr>
        <tr>
            <td colspan="2">错误率</td>
            <td>{T[rate]}</td>
            <td>{d[rate]}</td>
            <td>{H[rate]}</td>
        </tr>
    </table>
<div style="width: 100%; height: 15px"></div>
</body>
</html>
2.效果

备注:可用户发送邮件内容

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM