表格的应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>项目增补单</title>
<style type="text/css">
.table1{
text-align: center;
border-collapse: collapse;
}
.table1 td{
border: 1px solid #E2E2E2;
}
.table1 tr{
height: 40px;
}
.td1{
width: 300px;
}
.td2{
width: 100px;
}
.td3{
width: 200px;
}
.td4{
}
.div4 li{
float: left;
list-style-type: none;
margin: 0px 100px 0px 100px;
}
</style>
</head>
<body>
<center>
<div class="div1">
<div class="div2">
<h2>项目增补单</h2>
</div>
<div class="div3">
<table class="table1">
<tr class="tr1">
<td class="td2">序号</td>
<td class="td1">维修项目及更换配件</td>
<td class="td2">单价</td>
<td class="td2">数量</td>
<td class="td2">小计</td>
<td class="td2">工时费</td>
<td class="td2">合计</td>
<td class="td3">故障原因</td>
</tr>
<tr class="tr2">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="tr3">
<td>2</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td >1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="tr4">
<td>3</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="tr5">
<td>4</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="tr6">
<td>5</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="tr7">
<td>6</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="tr8">
<td rowspan="4">7</td>
<td>1</td>
<td rowspan="4" colspan="2">1</td>
<!-- <td rowspan="4">1</td> -->
<td rowspan="4">1</td>
<td rowspan="4">1</td>
<td rowspan="4">1</td>
<td rowspan="4">1</td>
</tr>
<tr class="tr9">
<td>1</td>
<!-- <td>1</td> -->
<!-- <td>1</td>
<td>1</td> -->
<!-- <td>1</td> -->
<!-- <td>1</td>
<td>1</td>
<td>1</td> -->
</tr>
<tr class="tr10">
<td>1</td>
<!-- <td>1</td>
<!-- <td>1</td>
<td>1</td>
<td>1</td> -->
<!-- <td>1</td>
<td>1</td>
<td>1</td> -->
</tr>
<tr class="tr11">
<td>1</td>
<!-- <td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>-->
</tr>
<tr class="tr12">
<td colspan="2" align="left">备件费用小计:</td>
<!-- <td class="td1">1</td> -->
<td colspan="5" align="left">工时费用小计:</td>
<!-- <td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>-->
<td align="left">合计:</td>
</tr>
</tr>
</table>
</div>
<div class="div4">
<ul>
<li>班组长:</li>
<li>技术部:</li>
<li>服务顾问:</li>
<li>客户确认:</li>
</ul>
</div>
</div>
</center>
</body>
</html>
结果如下图所示
浙公网安备 33010602011771号