简单的网页表格的制作4
图片示例:
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>静态网页的表格制作4</title>
<style type="text/css">
caption{font-family: "宋体";font-weight: bolder;}
.content{width: 1024px;text-align: center;margin-left: 15%;margin-top:10px;margin-top: 50px;font-weight: bold;}
table{width: 1000px;border: 3px solid orange; border-collapse: collapse;}
table td{border: 3px solid orange;padding: 0px;}
input{outline: medium;margin: 0px;border: none;height: 80px;}
.oneInput{margin: 0px;border: none;padding: 1px;}
.pictureInput{width: 414px;height: 121px;}
.tupain{width: 414px;height: 427.45px;}
.tupain>input{width: 414px;height: 427.45px;margin: 50% 50%; }
#ownPicture{display: none;}
.fixSize{width:100px;}
.yourPicture{background: none;}
.lastLine{height: 80px;}
</style>
</head>
<body>
<div class="content">
<form action="#" method="GET"name="" id="">
<table border="1">
<caption>
逆战班学员介绍
</caption>
<tr>
<td class="fixSize">您的大名</td>
<td colspan="2"><input class="oneInput" type="text"></td>
<td class="fixSize">贵庚</td>
<td colspan="2"><input class="oneInput" type="text"/></td>
<td rowspan="5"colspan="2" class="pictureInput">
<div class="tupain"><input type="file" name="yourPircture" class="yourPircture" /><img src="#" name="ownPicture" id="ownPicture" alt="ownPicture" title="请放下你最美的照片"></div>
</td>
</tr>
<tr>
<td class="fixSize">是否毕业</td>
<td colspan="2"><input class="oneInput" type="text"></td>
<td class="fixSize">专业是啥</td>
<td colspan="2"><input class="oneInput" type="text"/></td>
</tr>
<tr>
<td class="fixSize">大学名称</td>
<td colspan="5"><input class="oneInput" type="text"></td>
</tr>
<tr>
<td class="fixSize">从事过工作</td>
<td colspan="5"><input class="oneInput" type="text"></td>
</tr>
<tr>
<td class="fixSize">H5基础程度</td>
<td colspan="3"><input class="oneInput" type="text"></td>
<td colspan="2"></td>
</tr>
<tr>
<td class="fixSize">自我性格描述</td>
<td colspan="7"><input type="text"></td>
</tr>
<tr>
<td rowspan="4" class="fixSize">简述1.目标规划2.对H5疑问3.建议</td>
<td rowspan="4"colspan="3"><input type="text"></td>
<td rowspan="2"colspan="4"><input class="oneInput" type="text"></td>
</tr>
<tr>
</tr>
<tr>
<td rowspan="2"colspan="4"><input class="oneInput" type="text"></td>
</tr>
<tr>
</tr>
<tr>
<td colspan="8"class="lastLine"><input class="oneInput" type="text"></td>
</tr>
</table>
</form>
</div>
</body>
</html>