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

其他 2019-10-30 17:50:51 阅读次数: 0 
<!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>

效果：

　　

 自己稍微改动的代码加效果图：

<!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: 100%;
            }
            table td, table th
            {
                border: 1px solid #cad9ea;
                color: #666;
                height: 30px;
            }
            table thead th
            {
                background-color: #CCE8EB;
                width: 200px;
            }
            table tr
            {
                background: #fff;
            }
            /*        table tr:nth-child(even)
                    {
                        
                    }*/
            .title{
                background: #F5FAFA;
            }
        </style>
        <script>
            /*打印   */
            window.print();
        </script>
    </head>
    <body>
        <div style="width: 100%; height: 15px"></div>
        <table border="1">
            <tr ><th colspan="8" style="text-align: center;" class="title">勘测服务单</th></tr>
            <tr><th colspan="8" style="text-align: left;padding:10px;">勘测日期： {php echo date('Y年m月d日 H时i分', $surveyinfo['createtime'])}</th></tr>
            <tr class="title">
                <td rowspan="2" >姓名</td>
                <td rowspan="2">联系方式</td>
                <td rowspan="2">安装地址</td>
                <td rowspan="2">货物预达时间</td>
                <td rowspan="2">安装预计时间</td>
                <td colspan="2">铺装方式</td>
                <td rowspan="2">备注</td>
            </tr>
            <tr class="title">
                <td >直铺</td>
                <td>龙骨</td>
            </tr>
            <tr>
                <td >{$order['username']}</td>
                <td>{$order['mobile']}</td>
                <td >{$order['address']}</td>
                <td >{$order['yyyf_time']}</td>
                <td >{$order['yysg_time']}</td>
                <td>{if $order['pavingtype']=='0'}☑{else}☐{/if}</td>
                <td >{if $order['pavingtype']=='1'}☑{else}☐{/if}</td>
                <td >{$order['remark']}</td>
            </tr>
            <tr class="title"><th colspan="8" style="text-align: center;height: 50px;">产品明细</th></tr>
            <tr ><th colspan="8" style="text-align: center;">主材</th></tr>
            <tr class="title">
                <td rowspan="2">序号</td>
                <td rowspan="2">品名</td>
                <td rowspan="2">规格</td>
                <td rowspan="2">色号</td>
                <td rowspan="2">数量㎡</td>
                <td colspan="2">辅助单位</td>
                <td rowspan="2">备注</td>
            </tr>
            <tr class="title">
                <td >件</td>
                <td>片</td>
            </tr>
            {loop $order['mainplans'] $row}
            <tr>
                <td >1</td>
                <td >{$row['projectname']}</td>
                <td>{$row['fixtitle']}</td>
                <td >{$row['fixplan']}</td>

                <td>{$row['realcount']}</td>
                <td>☐</td>
                <td >☐</td>
                <td></td>
            </tr>
            {/loop}

            <tr><th colspan="8" style="text-align: center;">辅材一</th></tr>
            <tr class="title">
                <td rowspan="2">序号</td>
                <td rowspan="2">品名</td>
                <td rowspan="2">材质</td>
                <td rowspan="2">规格mm</td>
                <td rowspan="2">数量M</td>
                <td colspan="2">辅助单位</td>
                <td rowspan="2">备注</td>
            </tr>
            <tr>
                <td >件</td>
                <td>根</td>
            </tr>
            {loop $order['adjuvantplans'] $row}
            <tr>
                <td >1</td>
                <td >{$row['projectname']}</td>
                <td>{$row['fixtitle']}</td>
                <td >{$row['fixplan']}</td>
                <td>{$row['realcount']}</td>
                <td>☐</td>
                <td >☐</td>
                <td></td>
            </tr>
            {/loop}

            {loop $order['childdetail'] $row}
            <tr>
                <td >1</td>
                <td >{$row['projectname']}</td>
                <td>{$row['fixtitle']}</td>
                <td >{$row['fixplan']}</td>
                <td>{$row['realcount']}</td>
                <td>☐</td>
                <td >☐</td>
                <td></td>
            </tr>
            {/loop}

            <tr><th colspan="8" style="text-align: center;">辅材二</th></tr>
            <tr class="title">
                <td rowspan="2">序号</td>
                <td rowspan="2">品名</td>
                <td rowspan="2">材质</td>
                <td  colspan="3">规格mm</td>
                <td  colspan="2" rowspan="2">备注</td>
            </tr>
            <tr class="title">
                <td >900</td>
                <td>1800</td>
                <td>2700</td>
            </tr>
            <tr>
                <td >1</td>
                <td></td>
                <td ></td>
                <td >☐</td>
                <td>☐</td>
                <td>☐</td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td >2</td>
                <td></td>
                <td ></td>
                <td ></td>
                <td></td>
                <td></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td >3</td>
                <td></td>
                <td ></td>
                <td ></td>
                <td></td>
                <td></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td colspan="4" rowspan="2">勘测服务项目及要求</td>
                <td rowspan="2"></td>
                <td colspan="3" class="title">勘测须知</td>
            </tr>
            <tr style="text-align: left;padding: 50px;">
                <td  colspan="3" rowspan="15" style="text-align: left;padding-left:  50px;margin-top: 40px;line-height: 30px;">
                    {loop $fixkcxzlist $row}    
                    {$row}<br/>
                    {/loop}
                </td>
            </tr>
            <tr>
                <td class="title">地板平整度</td>
                <td>{if $surveyinfo['dbpzd']=='合格'}☑{else}☐{/if}合格</td>
                <td>{if $surveyinfo['dbpzd']=='不合格已标示'}☑{else}☐{/if}不合格已标示</td>
                <td></td>


            </tr>
            <tr>
                <td class="title">地面含水量</td>
                <td>{if $surveyinfo['dmhsl']=='合格'}☑{else}☐{/if}合格</td>
                <td>{if $surveyinfo['dmhsl']=='不合格'}☑{else}☐{/if}不合格</td>
                <td></td>
            </tr>
            <tr>
                <td class="title">地暖</td>
                <td>{if $surveyinfo['dn']=='有'}☑{else}☐{/if}有</td>
                <td>{if $surveyinfo['dn']=='无'}☑{else}☐{/if}无</td>
                <td></td>
            </tr>
            <tr>
                <td class="title">柜下安装</td>
                <td>{if $surveyinfo['gxaz']=='是'}☑{else}☐{/if}是</td>
                <td>{if $surveyinfo['gxaz']=='否'}☑{else}☐{/if}否</td>
                <td></td>
            </tr>
            <tr>
                <td class="title">跨度过长</td>
                <td>{if $surveyinfo['kdgc']=='压条过度'}☑{else}☐{/if}压条过度</td>
                <td>{if $surveyinfo['kdgc']=='通道（8米以内）'}☑{else}☐{/if}通道（8米以内）</td>
                <td></td>
            </tr>
            <tr>
                <td class="title">铺装方位</td>
                <td>{if $surveyinfo['pzfw']=='东西'}☑{else}☐{/if}东西</td>
                <td>{if $surveyinfo['pzfw']=='南北'}☑{else}☐{/if}南北</td>
                <td>{if $surveyinfo['pzfw']=='其他'}☑{else}☐{/if}其他</td>
            </tr>
            <tr>
                <td class="title">垃圾清理</td>
                <td>{if $surveyinfo['ljql']=='自理'}☑{else}☐{/if}自理</td>
                <td>{if $surveyinfo['ljql']=='代办'}☑{else}☐{/if}代办</td>
                <td></td>
            </tr>
            <tr>
                <td class="title">其他</td>
                <td colspan="3">{$surveyinfo['qt']}</td>
            </tr>
            <tr>
                <td colspan="4">详细房屋尺寸</td>
            </tr>
            <tr>
                <td class="title">客厅</td>
                <td colspan="3">{$surveyinfo['ktsize']}</td>
            </tr>
            <tr>
                <td class="title">餐厅</td>
                <td colspan="3">{$surveyinfo['ctsize']}</td>
            </tr>
            <tr>
                <td class="title">主卧</td>
                <td colspan="3">{$surveyinfo['zwsize']}</td>
            </tr>
            <tr>
                <td class="title">其他卧室</td>
                <td colspan="3">{$surveyinfo['qtsize']}</td>
            </tr>
            <tr>
                <td class="title">过道</td>
                <td colspan="3">{$surveyinfo['gdsize']}</td>
            </tr>
            <tr>
                <td class="title">客户特殊要求：</td>
                <td colspan="7" style="text-align: left;padding:10px;">{$surveyinfo['specialask']}</td>
            </tr>
            <tr>
                <td>勘测人员</td>
                <td colspan="3">{$maninfo['username']}</td>
                <td>客户确认</td>
                <td colspan="3" style="text-align: left;padding:10px;"><img width="60%" src="{php echo tomedia($surveyinfo['epc'])}"></td>
            </tr>

        </table>
        <div style="width: 100%; height: 15px"></div>
    </body>
</html>

效果：

猜你喜欢

转载自www.cnblogs.com/WZH75171992/p/11766376.html
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
OOP第二次作业
java web 乱码问题
android 禁止scrollview 因控件变化自动滚动到底的方法
mysql服务解压版的安装(5.7)
centos7 nginx+tomcat配置https 安装免费SSL Let’s Encrypt
使用Mosquitto遗嘱机制实现感知客户端上下线功能的方法
面向对象之------多态与多态性
开发Teams Tabs应用程序
C# 希尔排序
第2章 Jupyter Notebooks
每日归档
更多
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022