HTML制作表格（面试登记表）

最新推荐文章于 2024-07-18 15:09:01 发布

呆呆龙嘟嘟嘟

最新推荐文章于 2024-07-18 15:09:01 发布

阅读量410

点赞数 13

文章标签： html 前端 java

本文链接：https://blog.csdn.net/weixin_64662118/article/details/140111287

版权

第一步：下载Hbuilder X （创建项目-->新建-->选择.html文件）

第二步：回顾部分知识

表头 <caption> </caption>
行 <tr> </tr>
列 <td> </td>
向右合并 colspan="2" 举例子：<td colspan="2">填表日期</td>

向下合并 rowspan="5" 举例子：<td rowspan="5">基本资料</td>

空格：  举例子：<td>    </td>

第三步：开动吧！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
			table
			{
			text-align:center;	
			}
		</style>
		<table border="1" width="600px" cellspacing="0px">
			<caption>面试登记表</caption>
			<tr>
				<td colspan="2">填表日期</td>
				<td>  </td>
				<td colspan="2"></td>
				<td>岗位名称</td>
				<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
				<td rowspan="5">  &nbsp;&nbsp;&nbsp;照片&nbsp;&nbsp;&nbsp;</td>
			</tr>
			<tr>
				<td>姓名</td>
				<td>  </td>
				<td>出生日期</td>
				<td colspan="2"></td>
				<td>性别</td>
				<td>  </td>
			</tr>
			<tr>
				<td rowspan="5">基本资料</td>
				<td>邮箱</td>
				<td colspan="3"></td>
				<td>现居地址</td>
				<td>  </td>
				
			</tr>
			<tr>
				<td>微信</td>
				<td colspan="3"></td>
				<td>户籍地</td>
				<td>  </td>
			
			</tr>
			<tr>
				<td>身份证号码</td>
				<td colspan="2"></td>
				<td>手机</td>
				<td colspan="2"></td>
				
			</tr>
			<tr>
				<td>专业</td>
				<td colspan="2"></td>
				<td>紧急联系人</td>
				<td colspan="3"></td>
			</tr>
			<tr>
				<td>学历</td>
				<td colspan="2"></td>
				<td>婚姻状况</td>
				<td colspan="3"></td>
			</tr>
			<tr>
				<td rowspan="3">教育情况</td>
				<td colspan="2">时间</td>
				<td colspan="2">学校</td>
				<td colspan="3">专业</td>
			</tr>
			<tr>
				<td colspan="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
				<td colspan="2"></td>
				<td colspan="3"></td>
			</tr>
			<tr>
				<td colspan="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
				<td colspan="2"></td>
				<td colspan="3"></td>
			</tr>
			<tr>
				<td rowspan="6">面试人</td>
				<td colspan="2">评分项</td>
				<td colspan="2">分数</td>
				<td colspan="3" rowspan="6">评价</td>
			</tr>
			<tr>
				<td colspan="2">仪表</td>
				<td colspan="2"></td>
			</tr>
			<tr>
				<td colspan="2">表达能力</td>
				<td colspan="2"></td>
			</tr>
			<tr>
				<td colspan="2">反应能力</td>
				<td colspan="2"></td>
			</tr>
			<tr>
				<td colspan="2">相关经验</td>
				<td colspan="2"></td>
			</tr>
			<tr>
				<td colspan="4">总分60以下不得录用</td>
			</tr>
			<tr>
				<td rowspan="2">工作安排</td>
				<td rowspan="2">结果（打勾）</td>
				<td>不录用</td>
				<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
				<td>部门</td>
				<td colspan="3"></td>
			</tr>
			<tr>
				<td>录用</td>
				<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
				<td>上岗时间</td>
				<td colspan="3"></td>
			</tr>
		</table>
	
	</body>
</html>

结果是：

呆呆龙嘟嘟嘟

关注

13
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML制作表格（面试登记表）

填表日期</td>向下合并 rowspan="5" 举例子：<td rowspan="5">基本资料</td>空格：举例子：<td> </td>表头 <caption> </caption>行 <tr> </tr>列 <td>
复制链接

扫一扫