被迫营业的第二天( •̀ ω •́ )y
学习内容:table标签
一、html实现个人间接
主要运用了table标签,献上实例图:
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。
在上面例子中的表格可编写,这里运用到了td元素中的一个属性contenteditable,表示规定元素内容是否可编辑。
代码:
<!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>
body{
text-align: center;
}
</style>
<body>
<table border="2px" bordercolor="#478cc3" cellspacing="0" align="center">
<tr align="center">
<td colspan="7" width="558px" height="70px"><h2>个人简历</h2></td>
</tr>
<tr>
<th width="93px" height="35px">姓名</th>
<td width="93px" contenteditable="true"></td>
<th width="93px">性别</th>
<td width="93px" contenteditable="true"></td>
<th width="93px">出生年月</th>
<td width="93px" contenteditable="true"> </td>
<td rowspan="4" width="93px">
<button>选择文件</button>
</td>
</tr>
<tr>
<th height="35px">民族</th>
<td contenteditable="true"> </td>
<th>政治面貌</th>
<td contenteditable="true"> </td>
<th>身高</th>
<td contenteditable="true"></td>
</tr>
<tr>
<th height="35px">学制</th>
<td contenteditable="true"> </td>
<th>学历</th>
<td contenteditable="true"> </td>
<th>户籍</th>
<td contenteditable="true"></td>
</tr>
<tr>
<th height="35px">专业</th>
<td contenteditable="true"></td>
<th colspan="2">毕业学校</th>
<td colspan="2" contenteditable="true"></td>
</tr>
<tr>
<th height="35px" colspan="7">技能、特长或爱好</th>
</tr>
<tr>
<th height="35px">外语等级</th>
<td colspan="2" contenteditable="true"></td>
<th >计算机</th>
<td colspan="3" contenteditable="true"></td>
</tr>
<tr>
<th height="35px" colspan="7">个人履历</th>
</tr>
<tr>
<th height="35px">时间</th>
<th colspan="2">单位</th>
<th colspan="4">经历</th>
</tr>
<tr>
<th height="35px" contenteditable="true"></th>
<td colspan="2" contenteditable="true"></td>
<td colspan="4" contenteditable="true"></td>
</tr>
<tr>
<th height="35px" contenteditable="true"></th>
<td colspan="2" contenteditable="true"></td>
<td colspan="4" contenteditable="true"></td>
</tr>
<tr>
<th height="35px" contenteditable="true"></th>
<td colspan="2" contenteditable="true"></td>
<td colspan="4" contenteditable="true"></td>
</tr>
<tr>
<th height="35px" colspan="7">联系方式</th>
</tr>
<tr>
<th height="35px">通信地址</th>
<td colspan="2" contenteditable="true"></td>
<th >联系电话</th>
<td colspan="3" contenteditable="true"></td>
</tr>
<tr>
<th height="35px">E-mail</th>
<td colspan="2" contenteditable="true"></td>
<th >邮编</th>
<td colspan="3" contenteditable="true"></td>
</tr>
<tr>
<th height="35px" colspan="7">自我评价</th>
</tr>
</table>
</body>
</html>
二、HTML实现添加员工
附上实例图
代码:
<!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>
body{
text-align: center;
}
</style>
<body>
<table border="2px" bordercolor="#478cc3" cellspacing="0" align="center">
<tr align="center">
<td colspan="7" width="558px" height="70px"><h2>个人简历</h2></td>
</tr>
<tr>
<th width="93px" height="35px">姓名</th>
<td width="93px" contenteditable="true"></td>
<th width="93px">性别</th>
<td width="93px" contenteditable="true"></td>
<th width="93px">出生年月</th>
<td width="93px" contenteditable="true"> </td>
<td rowspan="4" width="93px">
<button>选择文件</button>
</td>
</tr>
<tr>
<th height="35px">民族</th>
<td contenteditable="true"> </td>
<th>政治面貌</th>
<td contenteditable="true"> </td>
<th>身高</th>
<td contenteditable="true"></td>
</tr>
<tr>
<th height="35px">学制</th>
<td contenteditable="true"> </td>
<th>学历</th>
<td contenteditable="true"> </td>
<th>户籍</th>
<td contenteditable="true"></td>
</tr>
<tr>
<th height="35px">专业</th>
<td contenteditable="true"></td>
<th colspan="2">毕业学校</th>
<td colspan="2" contenteditable="true"></td>
</tr>
<tr>
<th height="35px" colspan="7">技能、特长或爱好</th>
</tr>
<tr>
<th height="35px">外语等级</th>
<td colspan="2" contenteditable="true"></td>
<th >计算机</th>
<td colspan="3" contenteditable="true"></td>
</tr>
<tr>
<th height="35px" colspan="7">个人履历</th>
</tr>
<tr>
<th height="35px">时间</th>
<th colspan="2">单位</th>
<th colspan="4">经历</th>
</tr>
<tr>
<th height="35px" contenteditable="true"></th>
<td colspan="2" contenteditable="true"></td>
<td colspan="4" contenteditable="true"></td>
</tr>
<tr>
<th height="35px" contenteditable="true"></th>
<td colspan="2" contenteditable="true"></td>
<td colspan="4" contenteditable="true"></td>
</tr>
<tr>
<th height="35px" contenteditable="true"></th>
<td colspan="2" contenteditable="true"></td>
<td colspan="4" contenteditable="true"></td>
</tr>
<tr>
<th height="35px" colspan="7">联系方式</th>
</tr>
<tr>
<th height="35px">通信地址</th>
<td colspan="2" contenteditable="true"></td>
<th >联系电话</th>
<td colspan="3" contenteditable="true"></td>
</tr>
<tr>
<th height="35px">E-mail</th>
<td colspan="2" contenteditable="true"></td>
<th >邮编</th>
<td colspan="3" contenteditable="true"></td>
</tr>
<tr>
<th height="35px" colspan="7">自我评价</th>
</tr>
</table>
</body>
</html>