表格案例(差旅报销单)
作者:互联网
制作表格时要注意区分单元格的跨行合并和跨列合并,***“colspan”***属性是跨列合并单元格,***“rowspan”***属性是跨行合并,还要注意设置单元格的大小和样式,不然显示出来的效果可能会不大美观。
源码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
td {
text-align: center;
width: 70px;
height: 30px;
}
.one {
background-color: coral;
}
</style>
</head>
<body>
<table border="1" align="center" cellpadding="1" cellspacing="0">
<tr>
<td colspan="3" class="one">部门</td>
<td colspan="3"></td>
<td colspan="2" class="one">出差人</td>
<td></td>
<td class="one">出差日期</td>
<td colspan="2" class="one"></td>
</tr>
<tr>
<td colspan="3" class="one">出差事由</td>
<td colspan="9"></td>
</tr>
<tr class="one">
<td colspan="8">交通费</td>
<td colspan="4">出差补贴</td>
</tr>
<tr>
<td colspan="3">出发</td>
<td colspan="3">到达</td>
<td rowspan="2">单据张数</td>
<td rowspan="2">金额</td>
<td rowspan="2">人数</td>
<td rowspan="2">补贴标准</td>
<td rowspan="2">天数</td>
<td rowspan="2">金额</td>
</tr>
<tr>
<td>月</td>
<td>日</td>
<td>地点</td>
<td>月</td>
<td>日</td>
<td>地点</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="4" class="one">其他费用</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td rowspan="2">项目</td>
<td rowspan="2">摘要</td>
<td rowspan="2">单据张数</td>
<td rowspan="2">金额</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>住宿费</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>汽油费</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>市内费用</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>办公费用</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="6">合计</td>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr class="one">
<td colspan="2" rowspan="2">报销金额</td>
<td colspan="3">人民币</td>
<td colspan="5" rowspan="2"></td>
<td rowspan="2">小写</td>
<td rowspan="2"></td>
</tr>
<tr class="one">
<td colspan="3">大写</td>
</tr>
</table>
</body>
</html>
效果图
标签:出差,表格,金额,单元格,合并,差旅,报销,张数,跨列 来源: https://blog.csdn.net/qq_51903681/article/details/113031620