表格与表单
表格是由单元格的矩形框构成,从左到右、从上到下的顺序的结构按照一定的格式来摆放数据。
关于创建表格
定义表格<table></table>
创建行<tr></tr>
创建单元格<td></td>
表格的属性
table属性:
border cellpadding 单元格的内边距(单元格边框与内容的距离)
cellspacing 单元格的外边距(单元格之间的距离)
width height align(水平位置) bgcolor(背景颜色)
tr属性:
align(调整内容水平对齐方式)
valign(调整内容垂直对齐方式)
bgcolor(背景颜色)
td属性:width height align valign cowspan rowspan
表格的标题<caption></caption>
关于复杂表格
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
表单
用于显示、收集用户的信息、并且将信息穿给服务器
主要由表单元素和表单控件组成。
用法<form></form>
表单属性:
action(定义表单被提交的时候的动作,服务器上处理数据)
method:get/post
get提交数据有长度限制;post无长度限制而且安全性更高。
表单控件
type:创建各种类型的输入字段;
value:值;
name:控件名称,没有name无法提交;
disabled:禁用控件;
个人制作表格的代码:
<html>
<head>
<meta charset="UTF-8">
<title>个人简历</title>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="0" width="430px" height="644px" align="center" background="img/01.jpg">
<tr height="20px">
<th colspan="5">个人求职简历</th>
</tr>
<tr height="20px" align="center">
<td >姓名</td>
<td></td>
<td >性别</td>
<td></td>
<td rowspan="6"></td>
</tr>
<tr height="20px" align="center">
<td>年龄</td>
<td></td>
<td>出生日期</td>
<td></td>
</tr>
<tr height="20px" align="center">
<td>所在城市</td>
<td></td>
<td>从事行业</td>
<td></td>
</tr>
<tr height="20px" align="center">
<td>学历</td>
<td></td>
<td>民族</td>
<td></td>
</tr>
<tr height="20px" align="center">
<td>婚姻状况</td>
<td></td>
<td>身份证</td>
<td></td>
</tr>
<tr height="20px" align="center">
<td>毕业学校</td>
<td></td>
<td>计算机能力</td>
<td></td>
</tr>
<tr height="20px">
<td colspan="5"></td>
<!--<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td rowspan="3">家庭成员</td>
<td height="20px">姓名</td>
<td >成员关系</td>
<td >职务</td>
<td >工作单位</td>
</tr>
<tr height="20px" align="center">
<!--<td></td>-->
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="20px" align="center">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="20px" align="center">
<td colspan="5"></td>
</tr>
<tr align="center">
<td rowspan="5">工作经历</td>
<td height="20px">工作时间</td>
<td>公司名称</td>
<td>职位名称</td>
<td>所属部门</td>
</tr>
<tr height="20px" align="center">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td rowspan="2"></td>
<td rowspan="2"></td>
<td height="20px"></td>
<td></td>
</tr>
<tr height="20px" align="center">
<td></td>
<td></td>
</tr>
<tr height="20px" >
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="20px">
<td colspan="5"></td>
</tr>
<tr height="20px" align="center">
<td rowspan="2">教育情况</td>
<td>时间</td>
<td>学校</td>
<td colspan="2">学历</td>
</tr>
<tr height="20px">
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr height="20px">
<td colspan="5"></td>
</tr>
<tr height="20px" align="center">
<td rowspan="2">培训经历</td>
<td>培训时间</td>
<td>培训机构</td>
<td colspan="2">培训内容</td>
</tr>
<tr height="20px">
<!--<td></td>-->
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr height="20px" align="center">
<td>备注</td>
<td colspan="4"></td>
</tr>
<tr height="20px">
<td colspan="5"></td>
</tr>
<tr align="center">
<td>自我评价</td>
<td colspan="4"></td>
</tr>
</table>
</body>
</html>
效果图: