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

134 lines
4.4 KiB
HTML

<!-- 作者:landaiqing
时间:2023.3.2
-->
<!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>表格练习2</title>
<style>
body{
font-family: 仿
}
#main{
width: 600px;
height: 650px;
margin: auto;
display:flex;
align-items:center;
/* background-color: aliceblue; */
border: 1px solid black;
}
#all{
/* background-color: aquamarine; */
width: 500px;
height: 650px;
margin: auto;
display:flex;
align-items:center;
}
.top {
/* background-color: aqua; */
width: 230px;
height: 50px;
top: 10px;
left: 0;
right: 0;
/* bottom: 0; */
margin: auto;
position: absolute;
text-align: center;
}
table {
border-collapse: collapse;
border: 1px solid #19ab98;
/* table-layout: fixed; */
width: 100%;
/* overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; */
}
.tables{
top: 50px;
/* top: 50px;
left: 350px;
right: 0;
bottom: 0; */
margin:0, auto;
position: absolute;
}
</style>
</head>
<body>
<div id="main">
<div id="all">
<div class="top">
<font size="6">&nbsp人&nbsp简&nbsp历</font>
</div>
<div class="tables">
<table border="1">
<tr>
<th style="width: 80px;">姓名</th>
<th style="width: 100px;height: 40px;"></th>
<th style="width: 80px;">性别</th>
<th style="width: 100px;height: 40px;"></th>
<td rowspan="5" style="width: 125px;"></td>
</tr>
<tr>
<th style="width: 80px;">出生年月</th>
<th style="width: 100px;height: 40px;"></th>
<th style="width: 80px;">身高</th>
<th style="width: 100px;height: 40px;"></th>
</tr>
<tr>
<th style="width: 80px;">籍贯</th>
<th style="width: 100px;height: 40px;"></th>
<th style="width: 80px;">民族</th>
<th style="width: 100px;height: 40px;"></th>
</tr>
<tr>
<th style="width: 80px;">政治面貌</th>
<th style="width: 100px;height: 40px;"></th>
<th style="width: 80px;">毕业院校</th>
<th style="width: 100px;height: 40px;"></th>
</tr>
<tr>
<th style="width: 80px;">学历</th>
<th style="width: 100px;height: 40px;"></th>
<th style="width: 80px;">专业</th>
<th style="width: 100px;height: 40px;"></th>
</tr>
<tr>
<th style="width: 80px;">联系电话</th>
<th style="width: 100px;height: 40px;"></th>
<th style="width: 80px;">电子邮件</th>
<th style="width: 100px;height: 40px;" colspan="2"></th>
</tr>
<tr>
<th style="width: 80px;height: 100px;">具备技能</th>
<th style="width: 100px;height: 40px;" colspan="4"></th>
</tr>
<tr>
<th style="width: 80px;height: 100px;">个人评价</th>
<th style="width: 100px;height: 40px;" colspan="4"></th>
</tr>
<tr>
<th style="width: 80px;height: 50px;">爱好特长</th>
<th style="width: 100px;height: 40px;" colspan="4"></th>
</tr>
<tr>
<th style="width: 80px;height: 50px;">实习经历</th>
<th style="width: 100px;height: 40px;" colspan="4"></th>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>