表格案例（差旅报销单）

2021-01-23 11:32:41 阅读：324 来源： 互联网

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

表格案例（差旅报销单）