今天小编给大家分享的是怎么在html页面中调用外部样式，相信很多人都不太了解，为了让大家更加了解，所以给大家总结了以下内容，一起往下看吧。一定会有所收获的哦。两种调用方法：1、使用link标签调用，语
前端：简单的html表格和样式 - 清宇诺诺
顺晟科技
2022-09-15 21:25:30
46
View Post
前端：简单的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: 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>
效果：
相关文章
-
19
2022-10
-
19
2022-10
-
16
2022-10
-
30
2022-09
-
25
2022-09
-
16
2022-09
推荐阅读
随机推荐
- 当flash邂逅html5
- html tbody标签是块级元素吗？
- html怎么引入js
- html超链接去掉下划线 html去除取消超链接下划线
- Head First HTML 与 CSS 学习笔记
- bootstrap中的输入框组怎么制作?
- HTML5期末考试作业:游戏网站3354网络游戏主页(欢乐世界)第6页HTML CSS JavaScript ~ ~学生HTML个人主页作业作品下载
- html5视频播放解决方案 - coder狼
- 【CSON原创】HTML5游戏框架cnGameJS开发实录
- 基于html2canvas实现网页保存为图片及图片清晰度优化
- 润乾报表html代码填报
- HTML-如果条件为真，如何使按钮链接到页面？-堆栈溢出
- JavaScript-如何在设置React组件时插入HTML标记'；S动态内文本？-堆栈溢出
- HTML-使用height：0隐藏CSS中的组件时，为什么需要overflow：hidden？-堆栈溢出
- JavaScript-如何在快速传递元素时防止交叉观察器触发-堆栈溢出
- html-newb警报导航条问题，下面的部分将介绍导航条。还需要帮助学习如何窗体节限制-堆栈溢出
- HTML-如何使每个callendar项目均匀增长？-堆栈溢出
- HTML-使用isNaN的简单JavaScript代码不起作用-堆栈溢出
- HTML样式的块，在块本身和其中的文本上有独立的背景-堆栈溢出
- JavaScript-从标准HTML-Stack溢出向react组件传递道具