HTML/Html-practice/03-表格练习.html
2023-05-01 19:37:40 +08:00

333 lines
11 KiB
HTML

<!-- 作者:landaiqing
时间:2023.3.3
-->
<!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>表格练习3</title>
<style>
body{
font-family:
}
#main {
width: 600px;
height: 750px;
margin: auto;
display:flex;
align-items:center;
/* background-color: aliceblue; */
border: 1px solid black;
}
#all{
/* background-color: aquamarine; */
width: 500px;
height: 700px;
margin: auto;
display:flex;
align-items:center;
}
.top {
/* background-color: aqua; */
width: 250px;
height: 70px;
top: 0;
left: 0;
right: 0;
/* bottom: 0; */
margin: auto;
position: absolute;
text-align: center;
}
table {
border-collapse: collapse;
border: 1px solid #ff0000;
top: 1px;
width: 100%;
margin:0, auto;
position: absolute;
}
.tables{
/* background-color: gray; */
height: 600px;
width: 500px;
top: 100px;
margin:0, auto;
position: absolute;
border: 2px solid red;
}
.table_2{
margin:0, auto;
position: absolute;
top: 52px;
text-align: left;
}
.table_3{
margin:0, auto;
position: absolute;
top: 209px;
text-align: center;
color: red;
border: 1.5px solid red;
width: 166.6px;
}
.table_4{
margin:0, auto;
position: absolute;
top: 209px;
left: 166.6px;
text-align: center;
color: red;
border: 1.5px solid red;
width: 166.6px;
}
.table_5{
margin:0, auto;
position: absolute;
top: 209px;
left: 333.2px;
text-align: center;
color: red;
border: 1.5px solid red;
width: 167px;
}
.table_6{
margin:0, auto;
position: absolute;
top: 300px;
text-align: center;
color: red;
border: 1.5px solid red;
width: 210px;
}
.table_7{
margin:0, auto;
position: absolute;
top: 300px;
left: 210px;
text-align: center;
color: red;
border: 1.5px solid red;
width: 140px;
}
.table_8{
margin:0, auto;
position: absolute;
top: 300px;
left: 350px;
text-align: center;
color: red;
border: 1.5px solid red;
width: 150px;
}
.table_9{
margin:0, auto;
position: absolute;
top: 450px;
text-align: center;
color: red;
border: 1.5px solid red;
height: 149px;
}
</style>
</head>
<body>
<div id="main">
<div id="all">
<div class="top">
<font size="6"><h4 style="color: red;">账簿使用登记表<h4></font>
</div>
<div class="tables">
<table border="1" class="table_1">
<tr>
<th style="width: 130px; color: red; font-size: 20px;">单位名称</th>
<th style="width: 363px;height: 50px;">呼伦贝尔安泰基电有限责任公司东海拉尔发电厂</th>
</tr>
</table>
<table border="1" class="table_2">
<tr>
<td rowspan="5" style="width: 40px;text-align: center;color: red;font-size: 20px;"><br><br><br><br>簿</td>
<tr>
<th style="width: 87.5px;text-align: center;color: red; height: 30px;" >名称</th>
<th>银行存款</th>
</tr>
<tr>
<th style="text-align: center;color: red;height: 30px;">景次</th>
<th style="color: red;"><span style="color: black;">&nbsp&nbsp二&nbsp&nbsp</span></th>
</tr>
<tr>
<th style="text-align: center;color: red;height: 30px;">页数</th>
<th style="color: red;"><span style="color: black;">&nbsp0012&nbsp</span>号至第<span style="color: black;">&nbsp0126&nbsp</span>号共计<span style="color: black;">&nbsp&nbsp115&nbsp&nbsp</span></th>
</tr>
<tr>
<th style="text-align: center;color: red;">使用起<br>始日期</th>
<th style="color: red;">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span style="color: black;">1</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span style="color: black;">1</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp起<br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span style="color: black;">2019</span>&nbsp&nbsp&nbsp&nbsp年&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp月&nbsp&nbsp&nbsp&nbsp&nbsp日<br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span style="color: black;">12</span>&nbsp&nbsp&nbsp&nbsp&nbsp<span style="color: black;">31</span>&nbsp&nbsp&nbsp&nbsp&nbsp止</th>
</tr>
</tr>
</table>
<table border="1" class="table_3">
<tr>
<th style="width: 166.6px;" colspan="2">单 位 负 责</th>
<tr>
<th style="width: 110px;">&nbsp名</th>
<th>盖章</th>
</tr>
<tr>
<th style="height: 45px;"></th>
<th></th>
</tr>
</tr>
</table>
<table border="1" class="table_4">
<tr>
<th style="width: 166.6px;" colspan="2">主 管 会 计</th>
<tr>
<th style="width: 110px;">&nbsp名</th>
<th>盖 章</th>
</tr>
<tr>
<th style="height: 45px;"></th>
<th></th>
</tr>
</tr>
</table>
<table border="1" class="table_5">
<tr>
<th style="width: 166.6px;" colspan="2">&nbsp&nbsp&nbsp账</th>
<tr>
<th style="width: 110px;">&nbsp名</th>
<th>盖 章</th>
</tr>
<tr>
<th style="height: 45px;"></th>
<th></th>
</tr>
</tr>
</table>
<table border="1" class="table_6">
<tr>
<td rowspan="6" style="width: 30px;"><br><br><br><br><br><br><br></td>
</tr>
<tr>
<th style="height: 40px;width: 40px;">职别</th>
<th>姓 名</th>
</tr>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
</tr>
</table>
<table border="1" class="table_7">
<tr>
<th colspan="4">&nbsp&nbsp管</th>
</tr>
<tr>
<th style="width: 35px;"></th>
<th></th>
<th></th>
<th>盖章</th>
</tr>
<tr>
<th style="height: 24px;"></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th style="height: 24px;"></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th style="height: 24px;"></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th style="height: 25px;"></th>
<th></th>
<th></th>
<th></th>
</tr>
</table>
<table border="1" class="table_8">
<tr>
<th colspan="4">&nbsp&nbsp出</th>
</tr>
<tr>
<th style="width: 35px;"></th>
<th></th>
<th></th>
<th>盖章</th>
</tr>
<tr>
<th style="height: 24px;"></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th style="height: 24px;"></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th style="height: 24px;"></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th style="height: 25px;"></th>
<th></th>
<th></th>
<th></th>
</tr>
</table>
<table border="1" class="table_9">
<tr>
<td style="width: 30px;"><br><br><br></td>
<th style="width: 265px;"></th>
<td style="width: 30px;"><br><br><br><br><br><br></td>
<th></th>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>