里面运用到了大量的表单操作,在这里和大家一起分享一下。
HTML <table> 标签
1.定义和用法
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元,常用的元素还有caption(表格标题)。
<caption>表格</caption>
<table border=“1”>
<tr>
<th>111</th>
<th>222</th>
</tr>
<tr>
<td>333</td>
<td>444</td>
</tr>
</table>
数据单元格可以包含文本、图片、列表、表单、表格等。
2.表格的列合并
<caption>表格</caption>
<table border=“1”>
<tr>
<th colspan=“2”>111</th>
</tr>
<tr>
<td>333</td>
<td>444</td>
</tr>
</table>
下面是操作要求:
代码如下:
<!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>Document</title>
<style>
input{
width: 100px;
}
</style>
</head>
<body>
<p style="text-align: center;"><strong>个人简历</strong></p>
<table border="1" align="center">
<tr>
<th>姓名</th>
<th><input></th>
<th>性别</th>
<th><input></th>
<th>出生年月</th>
<th><input></th>
<th rowspan="4">
<form action="demo_form.php" method="get">
<input type="submit" value="选择提交">
</form>
</th>
</tr>
<tr>
<td>民族</td>
<td><input></td>
<td>政治面貌</td>
<td><input></td>
<td>身高</td>
<td><input></td>
</tr>
<tr>
<td>学制</td>
<td><input></td>
<td>学历</td>
<td><input></td>
<td>户籍</td>
<td><input></td>
</tr>
<tr>
<td>专业</td>
<td><input></td>
<td>毕业学校</td>
<td colspan="3"><input style="width: 98%;"></td>
</tr>
<tr><td colspan="7" style="text-align: center;"><strong>技能、特长或爱好</strong></td></tr>
<tr>
<td>外语等级</td>
<td colspan="2"><input style="width: 95%;"></td>
<td>计算机</td>
<td colspan="3"><input style="width: 97%;"></td>
</tr>
<tr>
<td colspan="7" style="text-align: center;">个人履历</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">时间</td>
<td colspan="2" style="text-align: center;">单位</td>
<td colspan="3" style="text-align: center;">经历</td>
</tr>
<tr>
<td colspan="2"><input style="width: 95%;"></td>
<td colspan="2"><input style="width: 95%;"></td>
<td colspan="3"><input style="width: 97%;"></td>
</tr>
<tr>
<td colspan="2"><input style="width: 95%;"></td>
<td colspan="2"><input style="width: 95%;"></td>
<td colspan="3"><input style="width: 97%;"></td>
</tr>
<tr>
<td colspan="2"><input style="width: 95%;"></td>
<td colspan="2"><input style="width: 95%;"></td>
<td colspan="3"><input style="width: 97%;"></td>
</tr>
<tr>
<td colspan="7" style="text-align: center;">联系方式</td>
</tr>
<tr>
<td>通讯地址</td>
<td colspan="3"><input style="width: 97%;"></td>
<td>联系电话</td>
<td colspan="2"><input style="width: 97%;"></td>
</tr>
<tr>
<td>E-mail</td>
<td colspan="3"><input style="width: 97%;"></td>
<td>邮编</td>
<td colspan="2"><input style="width: 97%;"></td>
</tr>
<tr>
<td colspan="7" style="text-align: center;">自我评价</td>
</tr>
<tr>
<td colspan="7">
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
</td>
</tr>
</body>
</html>
每天一个小练习,html+css 青铜选手报道!