一、代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新出纳</title>
</head>
<style>
table{
border-style: solid;
border-color: black;
border-width: 1px;
width: 100%;
height: 400px;
border-collapse: collapse;
}
td{
border-width: 1px;
border-style: solid;
color:black;
width: 200px;
height: 40px;
text-align: center;
}
caption{
font-size: 30px;
border-color: red;
border-style: solid;
border-top-style: hidden;
border-right-style: hidden;
border-left-style: hidden;
border-bottom-style: hidden;
/* 去除caption的boder的样式 */
}
</style>
<body>
<table>
<caption>出纳日报表</caption>
<thead>
<!-- 第一行 -->
<tr>
<td colspan="2" rowspan="3">项目</td>
<!-- <td></td> -->
<td colspan="5">本日收支额</td>
<!-- <td></td>
<td></td>
<td></td>
<td></td> -->
<td colspan="2">本月</td>
<!-- <td></td> -->
</tr>
<!-- 第二行 -->
<tr>
<!-- <td colspan="2">AA</td> -->
<!-- <td></td> -->
<td rowspan="2">现金</td>
<td colspan="3">存款</td>
<!-- <td></td>
<td></td> -->
<td>合计</td>
<td>现金合计</td>
<td>银行合计</td>
</tr>
<!-- 第三行 -->
<tr>
<!-- <td colspan="2">BB</td> -->
<!-- <td></td> -->
<!-- <td></td> -->
<td>招商</td>
<td>建设</td>
<td>农业</td>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<!-- 第四行 -->
<tr>
<td rowspan="7">本月收入</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>
</tr>
<!-- 第六行 -->
<tr>
<!-- <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>
</tr>
<!-- 第八行 -->
<tr>
<!-- <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>
</tr>
<!-- 第十行 -->
<tr>
<!-- <td></td> -->
<td>本日合计</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</body>
</html>
二、效果图: