其他分享
首页 > 其他分享> > 表格案例(差旅报销单)

表格案例(差旅报销单)

作者:互联网

制作表格时要注意区分单元格的跨行合并和跨列合并,***“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